Need help? Check out our Support site, then


Change color & size of site title & tagline

  1. I'm new to this, so please bear with me.

    I'm using the Misty Lake template with Custom Design "Colors" and "Fonts" features. I would like to refine my site title and tagline, specifically:

      My chosen color palette makes the title & tagline white, and I'd like to use different colors.
      The tagline uses the body text font but I'd like to make it larger (just the tagline, not the body text).

    Thanks!

    The blog I need help with is laurasmusings.wordpress.com.

  2. You can use the Appearance → Custom Design → CSS editor to add specific rules for those things.

    My chosen color palette makes the title & tagline white, and I'd like to use different colors.

    This example will change the color of the site title and description to red and the hover color for the site title to green:

    .site-title a,
    .site-description {
    	color: red;
    }
    
    .site-title a:hover {
    	color: green;
    }

    You can change out the color names with color codes: http://0to255.com/

  3. The tagline uses the body text font but I'd like to make it larger (just the tagline, not the body text).

    Because there's already a rule for font size coming from the settings on the Appearance → Custom Design → Fonts page, you need to make a new rule you add more specific. You can do that by adding "#masthead" to the selector. "#masthead" is the ID value for one of the parent elements of the site description.

    #masthead .site-description {
    	font-size: 200%;
    }

    Adjust the percentage as needed.

  4. Thank you! These tips were very helpful.

Topic Closed

This topic has been closed to new replies.

About this Topic