[Theme: Twenty Twelve] Make the whole page one color. (One page site)

  • 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

Viewing 11 replies - 1 through 11 (of 11 total)

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

    Thread Starter phillipc421

    (@phillipc421)

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

    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.

    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.

    Thread Starter phillipc421

    (@phillipc421)

    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?

    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.

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

    Thread Starter phillipc421

    (@phillipc421)

    site is https://www.chroniccrane.com

    the body tag is what? .body?

    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.

    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!

    Thread Starter phillipc421

    (@phillipc421)

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

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘[Theme: Twenty Twelve] Make the whole page one color. (One page site)’ is closed to new replies.