changing font size and color

  • Author
    Posts
  • #887630

    tanyablanck
    Member

    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.

    #887816

    tanyablanck
    Member

    I should clarify this is for the blog address http://thedancefusionstudio.com using the Greyzed.

    #887905

    I found that you already figured out how to change the color of your site title and tagline using this CSS:

    #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.

    #887910

    tanyablanck
    Member

    Awesome, thank you so much!! I will try that now.

    #887913

    tanyablanck
    Member

    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.

    #887947

    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;
    }
    #887950

    tanyablanck
    Member

    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?

    #887951

    You saved it correctly, and it does make the change.

    Before: http://cl.ly/GXP6/o
    After: http://cl.ly/GXP6/o

    #887953

    tanyablanck
    Member

    at the risk of being annoying… I can’t see any difference between those two screen shots. :(

    #887954

    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

    #887955

    tanyablanck
    Member

    I see it now. Thank you!!!

    #887956

    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.

    #887957

    tanyablanck
    Member

    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. :)

    #887959

    Cheers :)

The topic ‘changing font size and color’ is closed to new replies.