Hatch Theme: changing background color

  • Author
    Posts
  • #1408587

    weaverjk84
    Member

    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.

    #1408686

    timethief
    Member

    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

    #1408687

    mrdirby
    Member

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

    weaverjk84
    Member

    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!

    #1408707

    mrdirby
    Member

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

    mrdirby
    Member

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

The topic ‘Hatch Theme: changing background color’ is closed to new replies.