Change Title Font Size

actearly · Member · Feb 19, 2014 at 5:05 am
Copy link

Add topic to favorites
Hi, I know nothing about CSS (I couldn’t even find the CSS code for my site), but I want my header to have two different size fonts. Specifically, I want the first few sentences to be smaller than the last phrase. Any suggestions on how to do that?

Thanks!

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Feb 19, 2014 at 5:52 pm
Copy link
Hi, you can change your tagline to just the following at Settings > General and then add the following CSS which will put in the last sentence and then you can adjust the font size as desired.

Play it Safe. Play it Smart. Play it Healthy.

Go to Appearance > Customize > CSS, delete all of the informational text and then paste in the following CSS.
```
.site-description:after {
    content: " ACTEarly";
    font-size: 120%;
    font-weight: bold;
    color: #CC0000;
}
```
I’ve included font size, font weight and color declarations as well, in case you want to do additional styling. Use which you want and then delete the lines you do not use.

If you are not yet familiar with the web inspector built into your browser, you may want to watch the brief screencast on How to Find Your Theme’s CSS. I find the web inspectors a very valuable tool when doing CSS work.
actearly · Member · Feb 20, 2014 at 3:58 pm
Copy link
Thank you so much! That was so helpful. So one other question, what would the code be so I could also change the size of the individual words of the title and the phrase Play it Safe…

Thanks again!!!!
thesacredpath · Member · Feb 20, 2014 at 8:26 pm
Copy link
The site description is all one line of text, so in general, you cannot change part of it.

What you can do is to again, shorten your site description to Play it Smart. Play it Healthy and then use the same trick to put Play it Safe. before the site title. The CSS would look something like this.
```
.site-description:after {
    color: #CC0000;
    content: " ACTEarly";
    font-size: 30px;
    font-weight: 700;
}
.site-description:before {
    content: "Play it Safe. ";
    font-size: 15px;
}
.site-description {
    font-size: 25px !important;
}
```
Play around with that and see what you think.

Another options would be to use an image created in your image editing program and then we could insert the image as a background for the site description and turn the text of the site description invisible.
actearly · Member · Feb 23, 2014 at 11:05 pm
Copy link
Awesome. Thanks again for all your help! I’ll try some of these out and see what works!

I’ll also consider creating an image. That might be the easiest thing to do.
thesacredpath · Member · Feb 23, 2014 at 11:39 pm
Copy link
The image would give you the most control over things and can be implemented easily if you decide to go that way.

No items found.