Change site title font size and font type

hello kylerbarton,

John7022 here. If I understand your request correctly you want to change the font size of “Kyler Barton”. Just insert this little bit of code into your custom css editor and that should do it.

You will have to play with it for a while to get the font-size you want though. You can also Put in the font-family, font-weight, just about anything you want to do with the title, just play with it till you get what you want.

`h1 #site-title {
font-size: 36px;
}

Yes Kyler using the custom css is probably the safest way to go. It will hold all your customizations even through the updates.

Have fun and I look forward to hearing from you.
John7022

Hello John,

Thanks for the reply. You’re correct that I am just trying to edit the text “Kyler Barton” as the site title. I went ahead and inserted the code you gave me in the custom css box and it didn’t make any change. It looks like this in the custom css box:
/* Mantra Custom CSS */
h1 #site-title {
font-size: 36px;
}
I changed 36, trying numbers 12 and 42 and it didn’t affect the site title text at all (I made sure to keep the px; on the end and refresh the site a couple times). I’m not sure what to to try next. Although my code knowledge is fairly limited, what you provided looks like it should do the trick and it seems like the custom css box is the place for it. Let me know if you have any other ideas and thanks again for getting back to me.
Cheers,
Kyler

Hi I looked at your site and I this is the CSS you should paste into the custom CSS
#site-title {
font-size: 36px;
}

Or whatever font-size you would like. Hope this helps.
Kristen (VisualEdgeCreative)

Hello Kristin,

Thanks for the help. The code looks no different than the one above except for the font-size line was indented. Somehow it made a difference and I can control the font-size now! Now I just need to figure out how to take the site title text out of all caps and center it vertically in the header and I’ll be set.
Thanks again!

Hi, I’m glad it worked for you. To make the site title text not all caps and to move the title over to the right add this to the CSS above.

font-variant: normal;
margin-left: 100px;

The margin-left make the pixels whatever you want. Experiment to see where you want the title positioned. Hope this helps. Let me know please.
Kristen

All right. My custom css box currently looks like this:
/* Mantra Custom CSS */
#site-title {
font-size: 50px;
font-variant: normal;
font-family: “times new roman”;
margin-left: 100px;
}
The font-variant didn’t seem to change anything and the font-family line I just threw in to see if it would change the text at all (is that how you’re supposed code the font-family line?). Except for font-size and position in the header, the text hasn’t changed.
Regarding the position of the text, I think the code you suggested moved the text horizontally. I’m still playing around to see where I want it. What I can’t figure out is how to reposition it up and down inside the header. As it is now, the text sits closer to the bottom. I’d like to make it centered between the top and bottom of the header.
Once I get the header squared away, I should be able to get the rest up the site going. I really appreciate the help.
Thanks!

Hi.
Try this. Take out the text-variant.

text-transform:capitalize;
margin-left: 150px;
margin-top: -20px;

That makes it look centered vertically and horizontally to me. Let me know if that works. Thanks.

Cool. This is what I’ve got in the custom css box now:
/* Mantra Custom CSS */
#site-title {
font-size: 50px;
text-transform:capitalize;
margin-left: 150px;
margin-top: -10px;
font-family: “times new roman”;
}

As far as left to right placement of the text, I’m still experimenting with where I want it, but centering it vertically with the margin-top is what I couldn’t get and now it’s solved. Thanks!
At this point, all I need to change is the font itself. It seems like the current font can only render all caps. In the text-transform line, I switched it to “lowercase” and all the letters in the text became the same size. When it’s capitalized, the K and the B are larger than the other letters, so it could just be a matter of finding the right font now that supports upper and lowercase letters. I’ve got that font-family line in the code above, but it doesn’t seem to affect the site title text yet. Is it entered correctly or is there a better way to format it?
Thanks again. It’s really coming together.

Hi. I will look into this in the morning. It’s getting late. Hope that is ok. I will msg you with any info I find in the morning. Thanks.

Not a problem. I’m headed to bed myself. ??

Hi. I decided to quickly try it in the browser. I tried this and it changed the look of your site title.

#site-title {
font-size: 50px;
margin-left: 150px;
margin-top: -10px;
text-transform: capitalize;
font-family: times new roman;
}

I tried verdana and georgia too. They both changed the font of the title and looked good in my opinion. Let me know if that works.
Kristen

All right. Here’s what I’ve got:

/* Mantra Custom CSS */
#site-title {
font-size: 50px;
margin-left: 150px;
margin-top: -10px;
text-transform: capitalize;
font-family: georgia;
}

I tried it with times new roman and verdana in font family and I didn’t see any change in the text. Is there some way to make the K and B stay capitalized while making the rest of the letters lowercase? I’d like to see that, but once I successfully change the font type, that might take care of it.
Let me know what you think.
Thanks!

Hi, Sorry I didn’t see your reply. I can’t seem to connect to your site now. If you need more help msg me back plz. Thanks.