Change color & size of site title & tagline

  • Author
    Posts
  • #1108147

    laura0218
    Member

    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.

    #1108291

    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/

    #1108292

    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.

    #1108296

    laura0218
    Member

    Thank you! These tips were very helpful.

The topic ‘Change color & size of site title & tagline’ is closed to new replies.