Need help? Check out our Support site, then


Hatch Theme: changing background color

  1. Hi, I am using Hatch theme and am trying to change the background color throughout my site from white to black.
    I have tried doing this using the customize option in Premium, but despite changing the background color to black it doesn't replicate on my site.
    I've also changed the background color to back in the Appearances/background section of the dashboard, again with out success.
    I would be most grateful if someone could help my out by telling me what CSS code i need to use to override the white background setting.
    Thank you!

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

  2. Here's is the link to the stylesheet for Hatch so you can locate the selectors required. https://wpcom-themes.svn.automattic.com/hatch/style.css

  3. Hi, The theme options change the body background to black but the main content area is set to white. This css will change it to black. Do you need help changing you text color so it is readable on the black?

    .custom-background #page {
    background: #000;
    }
  4. Wow, thanks guys that was such a quick and very helpful response. Much appreciated! My background is now black, amazing!
    Yes, thanks I would love some help to change the text color so its readable; i guess it would be for the blog title/header, menu options and then actual bog text.
    Thankyou!

  5. You are welcome.

    Changing all the text to white or a color that isn't too dark is going to mean finding every text element. I'll try to get them in one go but if I miss some then checkout how to find the selector using Firebug or Chrome's inspect element. Your site is set to private so I can't see exactly what you have going on.

    body, h1, h2, h3, h4, h5, .site-title a, .site-description, a:hover, a:focus, a:active, .single-post .entry-header, #colophon, #colophon a, .page-title, .entry-title, .entry-title a, .entry-title a:visited, .wpl-count {
    color: #ffffff;
    }
  6. If you want to make some elements a color other than white each item is separated by a comma. So for example, if you wanted h3 elements to be gray you can change the color like this.

    h3 {
    color: #666666;
    }

Topic Closed

This topic has been closed to new replies.

About this Topic