Changing Blog Title Font Size in Zuki

magerc · Member · Dec 31, 2014 at 7:16 pm
Copy link

Add topic to favorites
Hi, I recently bought the Zuki template and think that the size of the blog title is too small. I can make CSS changes to my site, I am just a newbie and have no idea how to! Could someone tell me what to input to make this change?

Thanks!

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Dec 31, 2014 at 8:23 pm
Copy link
Hi @magerc, it looks like you have accomplished this with the following CSS.
```
#site-header h1 {
    display: inline;
    font-size: 3rem;
    line-height: 1.2;
    margin: 0;
    padding: 0;
    word-wrap: break-word;
}
```
Since you are only changing the font size, I would delete the other declarations so that it looks like this.
```
#site-header h1 {
    font-size: 3rem;
}
```
That way browsers will not have to read those that didn’t change, twice.

Great job finding that and making the change. :)
magerc · Member · Jan 1, 2015 at 2:55 am
Copy link
Hi @thesacredpath! Thank you so much for this advice. I am now trying to tweak the site title color. I tried entering this to no avail:

#site-header h1.site-title {
color: #009900;
}

It seems to cross out some code in the CSS, but doesn’t change anything that I can see…I have deleted it for now. Do you have any tips on how to change the color of the title? I greatly appreciate your help!
thesacredpath · Member · Jan 1, 2015 at 3:36 am
Copy link
The color in this theme is set for the link (since the title is also a link, so use the following for the color:
```
#site-header h1 a {
color: #009900;
}
```
magerc · Member · Jan 1, 2015 at 9:17 pm
Copy link
Thanks, again!
thesacredpath · Member · Jan 1, 2015 at 11:19 pm
Copy link
You are welcome.
shivya · Member · Jan 24, 2015 at 7:15 pm
Copy link
Hello @thesacredpath , your clarifications have been very helpful in setting up my newly purchased Zuki theme. I wanted to know if there’s any way to increase the font size of my blog title without buying the CSS upgrade?

The blog I need help with is http://the-shooting-star.com/
thesacredpath · Member · Jan 25, 2015 at 5:04 am
Copy link
@shivya, sorry, no there is not. Zuki supports the flexible header feature here, so you could create a header image with a larger sized font and then turn your text-based title off at Appearance > Customize > Site Title.
shivya · Member · Jan 26, 2015 at 5:42 pm
Copy link
Thanks for the clarification, @thesacredpath. I’ll go ahead with my own header then.
thesacredpath · Member · Jan 28, 2015 at 1:44 am
Copy link
You are welcome.
cabindwellerstextbook · Member · Feb 4, 2015 at 9:02 pm
Copy link
Hi, Sacred Path:

I successfully changed my site title font size; now I need to make room for it. I’d like all three words to fit across the top of the page.

thoughts?

cabindwellerstextbook.com
staff-happychia · Staff · Feb 5, 2015 at 8:50 am
Copy link
@cabindwellerstextbook,

Try this and see if the result is what you are after :-)
```
#site-header h1 {
white-space: nowrap;
}
```
cabindwellerstextbook · Member · Feb 6, 2015 at 5:10 am
Copy link
Thanks; that did indeed prevent the site title from wrapping, but then on iPad or mobile, the whole title isn't visible. So I'm thinking it's best to keep the wrap in there. However, even in the current version, on an iPhone, the title is breaking the words to fit. Is there a code to scale the font instead of word-breaking?

Sorry for the novice questions! Thanks!
staff-happychia · Staff · Feb 6, 2015 at 6:31 am
Copy link
Try this:
This style keeps your site title in one line only if screen size is atleast 1360px ( 15″ laptop and some desktop screens)
```
@media screen and (min-width: 1360px) {
    #site-header h1 {
white-space: nowrap;
}
}
```
This style scales down the font on screens lower than 480 px wide.
```
@media screen and (max-width: 480px) {
	 #site-header h1 a {
	font-size: 30px;
	}
}
```
Try these and see how it goes.

No items found.