How can I change the font size and change to italic?

[MDLIV]

In the following test site: https://testzen.marindelaislaverde.com/ I would like to adjust the tagline (Just when you thought it couldn't get any better!) font size and style to italic in header.php, however, I don't think I can use css styles in php.

Any suggestions?

[dbltoe]

In Chrome, when I right-click on the word thought and select inspect, I see that line 129 of stylesheet.css controls the #tagline.

#tagline {font-style:italic;font-size:1.8em;text-align:center;margin-top:10px;}

Adding the first item in red will change the font size. The em in the second red-colored item means that the font will adjust as the screen gets smaller or larger, so I wouldn't change the em - just the 1.8. Changing the number will show up on your browser. Once you decide what number you want, you will need to edit the file to make the changes. You will not see the changes on your site until you edit the file, save the file to your site, AND clear your cache.

Also, I would suggest you look into the mod in the second line of my sig. It will make your journey through color changes much easier. We recommend you clone the responsive_classic to some template of your naming PRIOR to making changes.

1. Use lat9's clone a template to clone responsive_classic to something new (like marinOrig)
2. Apply the color change mod in the second line of my sig to the new template and pick your colors.
3. Use the clone again to clone marinOrig to marinWeb.
4. Make changes to marinWeb.

The advantages are:

• You have an original responsive_classic for testing.
• You have marinOrig to fall back on and test changes to marinWeb.
• Changes to marinWeb affect your site but not the fall-back/test templates.

It's a preparation step that will save you a lot of grief in the long run.

[MDLIV]

Thank you so much for your reply, however, I do believe I followed your instruction but to no avail. I opened the file: includes/templates/responsive_classic/css/stylesheet.css
and added on the #tagline "font-style:italic;" as well as changed the "1.8em" to "1em", but nothing happened.


Am I going to the correct place?

[dbltoe]

Please read this entire paragraph once again.

Adding the first item in red will change the font size. The em in the second red-colored item means that the font will adjust as the screen gets smaller or larger, so I wouldn't change the em - just the 1.8. Changing the number will show up on your browser. Once you decide what number you want, you will need to edit the file to make the changes. You will not see the changes on your site until you edit the file, save the file to your site, AND clear your cache.

[MDLIV]

Thank you dbltoe for taking the time out to help me, however, I am a novice at using Zen Cart, and I did read you complete response several times, but I did not understand what you wrote after; "Also, I would suggest you look into the mod..." If you can simplify what you wrote I would greatly appreciate it.

Thank you so much!

[mprough]

He is saying you will need to edit the following file (includes/templates/responsive_classic/css/stylesheet.css) by adding

#tagline {font-style:italic;font-size:1.8em;text-align:center;margin-top:10px;}

He is also saying that if you use this addon (https://www.zen-cart.com/downloads.php?do=file&id=2087), you can clone the default template you are using and make changes to it instead for easier testing and integrity.

~Melanie

[MDLIV]

Thank you Melanie (mprough) for the clarification. I truly appreciate you.

~ Paul

[johnniejetski2]

[QUOTE=dbltoe;1362509]In Chrome, when I right-click on the word thought and select inspect, I see that line 129 of stylesheet.css controls the #tagline.

#tagline {font-style:italic;font-size:1.8em;text-align:center;margin-top:10px;}

Adding the first item in red will change the font size. The em in the second red-colored item means that the font will adjust as the screen gets smaller or larger, so I wouldn't change the em - just the 1.8. Changing the number will show up on your browser. Once you decide what number you want, you will need to edit the file to make the changes. You will not see the changes on your site until you edit the file, save the file to your site, AND clear your cache.

Need help...!.
1. found stylesheet_colors.css in responsive classic /css folder
2. made changes, saved back to proper location,
3. refreshed my site - no change to colors
4. opened file again to make sure changes were uploaded - no change to colors
5. removed all cache files - no change to colors
6. made changes to every color in the stylesheet - no change to colors in my browser...
7. changed the stylesheet.css in both template folders - no change to colors in my browser...

It has to be something simple I am missing...

[carlwhat]

[QUOTE=johnniejetski2;1370915]

In Chrome, when I right-click on the word thought and select inspect, I see that line 129 of stylesheet.css controls the #tagline.

#tagline {font-style:italic;font-size:1.8em;text-align:center;margin-top:10px;}

Adding the first item in red will change the font size. The em in the second red-colored item means that the font will adjust as the screen gets smaller or larger, so I wouldn't change the em - just the 1.8. Changing the number will show up on your browser. Once you decide what number you want, you will need to edit the file to make the changes. You will not see the changes on your site until you edit the file, save the file to your site, AND clear your cache.

Need help...!.
1. found stylesheet_colors.css in responsive classic /css folder
2. made changes, saved back to proper location,
3. refreshed my site - no change to colors
4. opened file again to make sure changes were uploaded - no change to colors
5. removed all cache files - no change to colors
6. made changes to every color in the stylesheet - no change to colors in my browser...
7. changed the stylesheet.css in both template folders - no change to colors in my browser...

It has to be something simple I am missing...

to make changes in your css, i would suggest spending a little bit of time with developer tools. with the developer tools, you can see specifically which css file and which line is controlling the display of the specific item.

do a web search and learn about developer tools. it will greatly help with your styling prowess, rather than randomly trying to figure which sheet is controlling what.

good luck.

[dbltoe]

He is saying you will need to edit the following file (includes/templates/responsive_classic/css/stylesheet.css) by adding

#tagline {font-style:italic;font-size:1.8em;text-align:center;margin-top:10px;}

Nope. OP is using classic as the template: NOT responsive_classic

@MDLIV -- Change back to responsive_classic and take a look at the docs on templates at https://docs.zen-cart.com/user/first_steps/overrides/