change tagline color and size

daveste99 · Member · May 27, 2014 at 11:07 pm
Copy link

Add topic to favorites
I simply want to change the tagline color and font size.

Can someone supply me the css code to plug in so that I achieve this?

Sorry for asking this as I know there are many other posts about doing this but I was unable to find code that worked.

My site is davesteckler.net
Thanks!

The blog I need help with is davesteckler.net.

The blog I need help with is: (visible only to logged in users)
supportmyoffice · Member · May 27, 2014 at 11:18 pm
Copy link
Assuming you have the CSS upgrade, just put this in your CSS:

.site-header h1, .site-header h2 {
color: (insert hex code or color);
font-size: (pixel size of font you want);
}

Here is my example:

.site-header h1, .site-header h2 {
color: #a21318;
font-size: 24px;
}

You can view hex color codes at http://www.w3schools.com/tags/ref_colorpicker.asp

Hope this helps!
kathrynwp · Staff · May 29, 2014 at 7:56 pm
Copy link
Thanks, supportmyoffice!

To only target the tagline I think I’d use this:
```
.site-header .site-description {
     color: #xxxxx;
     font-size: XXpx;
}
```
This:

.site-header h1 would also change the size of the site title, giving it the same style as the tagline.
supportmyoffice · Member · May 29, 2014 at 8:05 pm
Copy link
Thanks Kathryn!
supportmyoffice · Member · May 30, 2014 at 11:40 pm
Copy link
Hey Kathryn,

I pulled up Firebug again and tested the CSS I provided and it only changed the tagline. I’m not trying to be argumentative and I really appreciate your knowledge. Could you help me see where the site-description is in the CSS? When I inspect the site description for Dave’s site with Firebug, it gives me this CSS:

a:hover, .site-header h1 a:hover, .site-header h2 a:hover, .comments-area article header a:hover

Thank you so much for sharing and helping me learn.
supportmyoffice · Member · May 31, 2014 at 12:44 am
Copy link
I see now that I confused site title with site description but I’m still not sure where the site description is.

Dazed and confused. :)
supportmyoffice · Member · May 31, 2014 at 1:50 pm
Copy link
More research. Is the site-description different on WordPress.com? I found this thread over on the WordPress.org forum http://wordpress.org/support/topic/change-site-description-user-info.

Some are saying it is not displayed, some are saying it could be displayed depending on your theme. I guess I’ve just never used a theme where it was displayed because I can’t find it.
iamtakashi · Staff · Jun 2, 2014 at 12:03 pm
Copy link
“Site Description” is sometime also called “tagline” but where it appears and how to target with Custom CSS are entirely depending on the theme you use. Usually a site description is small type and appears below a site title but again ,it depends on how a theme designed.

The suggestion from Kathryn works well for davesteckler.net.
kathrynwp · Staff · Jun 3, 2014 at 1:18 pm
Copy link
supportmyoffice – this screenshot shows which is the site-description (tagline) and which is the site-title:

You can also see it in the source code:
```
<h1 class="site-title">
<a rel="home" title="Dave Steckler " href="http://davesteckler.net/">Dave Steckler </a>
</h1>
<h2 class="site-description">Please visit the new website</h2>
```
supportmyoffice · Member · Jun 3, 2014 at 2:08 pm
Copy link
Got it! Thanks Kathryn!

No items found.