WordPress.org

Forums

Twenty Twelve
Make the whole page one color. (One page site) (12 posts)

  1. phillipc421
    Member
    Posted 2 years ago #

    Hey there,

    I'd like to use my site as a one-page site. More like a landing page. I need the site to be all one color (black) with not interruptions. I want to use the Full-Width page layout, but the post area is not the color of the back ground and a has a visible outline around it. Can any one provide me with the CSS to change this?

    Thanks,
    Phillip

  2. WPyogi
    Forum Moderator
    Posted 2 years ago #

    Do you have a child theme set up? Post a link to it for CSS help.

  3. phillipc421
    Member
    Posted 2 years ago #

    I do not, I've just been using the CSS editor in the theme options

  4. beckibb2
    Member
    Posted 2 years ago #

    I've been searching for this for awhile and figured it out, so wanted to share. You need to change the css for the .site attribute. I wanted to change mine to gray, so I added: 'background: #fafaf6;' under .site, and it worked.

  5. WPyogi
    Forum Moderator
    Posted 2 years ago #

    You should not be making changes to theme files - they will be overwritten when WP is updated, and it's also crucial to have a clean copy of the default theme for troubleshooting purposes. You should really go back and make a child theme or if you are only making CSS changes, you can use a custom CSS plugin such as Custom CSS Manager or JetPack.

    @beckibb2 - the same goes for you - changing the default theme files is going to create a big problem for you.

  6. phillipc421
    Member
    Posted 2 years ago #

    thanks for the help guys! I am working on making a child theme now. Do you know how I could have the background only be all one color for just one page? Instead of across the whole site?

  7. WPyogi
    Forum Moderator
    Posted 2 years ago #

    The body tag has page-specific classes in it - so you can use that in your css selector for that single page. If you need more specific help, a link to your site would be relevant.

  8. beckibb2
    Member
    Posted 2 years ago #

    Thanks WPYogi...I did make my changes to a child theme, so all good!

  9. phillipc421
    Member
    Posted 2 years ago #

    site is http://www.chroniccrane.com

    the body tag is what? .body?

  10. WPyogi
    Forum Moderator
    Posted 2 years ago #

    This is the HTML for your home page:

    <body class="home blog custom-background custom-font-enabled single-author">

    So to target CSS to just that page you can use:

    body.home .site, body.home .site .wrapper {
       background: black;
    }

    Try copying that to your custom CSS (you have JetPack so it should be under Edit CSS.

    To repeat - do NOT modify twentytwelve theme files.
    If you are making changes other than CSS, you must use a child theme.

  11. annmari1
    Member
    Posted 2 years ago #

    Hi Wypogi,

    I started with your idea for changing the background color on a page template but found that the custom-background part was somehow overriding my child theme css. Here's what I ended up with:

    body.custom-background.page-template-quiz3-page-php{
    	background-color: green;
    }

    which works. But this doesn't:

    body.page-template-quiz3-page-php{
    	background-color: green;
    }

    I'm working offline so I can't link to the site. I'm wondering if there's a way to turn the custom stuff off. I don't have Jetpack installed, I'm talking about the customization that comes with the theme automatically.

    Thanks!

  12. phillipc421
    Member
    Posted 2 years ago #

    Is there a way to get rid of the page border and white line towards the bottom with CSS?
    http://www.chroniccrane.com
    Thanks

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic