WordPress.com is an easy way to start blogging. Get a blog, check out our features, read the latest announcements, choose from great themes, or learn about the team behind it.
Need help? Check out our Support site, then
I would like to edit the font size and color for the Title of this page but don't know how to alter the code to do so. I would like the words "The DanceFusion Studio" to be one color, then the tagline to be a different color with the last word, "grace" larger than the other words and possibly a third color. Is this possible? Thank you.
The blog I need help with is thedancefusionstudio.com.
I should clarify this is for the blog address http://thedancefusionstudio.com using the Greyzed.
I found that you already figured out how to change the color of your site title and tagline using this CSS:
tanyablanck
designsimply#header h1 a {
color:blueviolet;
}
#header .description {
color:firebrick;
}To make the last word in the tagline bigger, you can use the "after" pseudo element. First, edit your tagline and remove ".GRACE" from it on the Settings → Genearl page. Then, add the following CSS rule to your Appearance → Custom Design → CSS page:
#header .description:after {
content: ".GRACE";
font-size: 1.4em;
}Adjust the font size as necessary.
Awesome, thank you so much!! I will try that now.
That worked great! How do I change the font size of the other two words. I tried using the font-size code for the other two words, but it didn't work.
You can adjust the font size of the tagline as a whole using the "#header .description" selector. I noticed it pushes the RSS text on the right down, so you can pull it back up with a negative top margin. Also note that if you adjust the size of the tagline, the size of the "GRACE" word that you styled separately will also be adjusted so you may need to change the 1.4em to something else if it looks too big. Try adding something like this and adjust the "font-size" value to your liking:
#header .description {
color:black;
font-size:2em !important;
}
.rss {
margin-top:-2em;
}I tried adding this code, but it didn't change anything. I left it there since it didn't make a difference, but maybe you can look at it and see if I did something wrong?
You saved it correctly, and it does make the change.
Before: http://cl.ly/GXP6/o
After: http://cl.ly/GXP6/o
at the risk of being annoying... I can't see any difference between those two screen shots. :(
My bad. I posted the same link twice! Also, it's not annoying at all. :)
This should be better:
Before: http://cl.ly/GXXM/o
After: http://cl.ly/GXP6/o
I see it now. Thank you!!!
It's not a huge difference, but the font size on the left does change. :) You should adjust the numbers to something different if you want.
right, I wasn't expecting the difference to be so subtle. Seeing it side by side helped and now I know the code is working. I may adjust it later, but for now I am happy to know everything is written correctly. You have been a huge help. :)
Cheers :)
This topic has been closed to new replies.
