Support » Themes and Templates » Twenty Twelve Theme: More Margin

  • Hello, I am using the Twenty Twelve theme and have a dark background placed. The actual page content that goes over top of has the navigation and the content butted up against the left edge of it’s space. I don’t mind that the header photo butts up against both left and right sides but I’d really like to see the navigation along the top of the page either center or give me about 20px of either margin or padding to push it away from the edge of the content area. The same goes for the body where all the posts appear, I’d like it about 20px away from the edge.

    What code can I enter into which style sheet to make this happen?

Viewing 8 replies - 1 through 8 (of 8 total)
  • try working with a browser inspection tool to find out how these elements are styled.

    make sure to either work with a child theme or – for just formatting tweaks – use a custom css plugin.

    without a live link to the problem, there is not much else to suggest.

    I included the URL but it didn’t show up for some reason. It’s

    indeed – however, you need to mark a word and then add the link to it to make it show; or simply post the site url.

    you seem to have removed some essential padding from the styles;
    re-trace those edits and reconsider to add some padding or margins to other elements.

    possibly add something like:

    #main, #site-navigation {
    	margin-left: 24px;
    	margin-right: 24px;

    as this is a pure formatting problem, it might actually be better suited for a css forum like

    Thank alchymyth. I didn’t actually edit any of the css but I’ll give it a try. Thanks for the css forum link as well.

    What browser inspection tool are you using btw? I’ve tried firebug but I find it difficult to understand.

    I didn’t actually edit any of the css

    you are right;
    I first thought you had removed the padding to get a ‘full-width’ header image;
    but after checking the theme a bit closer, I can see – the ‘no-padding’ is caused by the theme’s css and an added body_class, if the custom background-color is white; unfortunately the theme does not check if there is a (very colorful) background image 🙁

    try adding the styles – this might look slighly better;

    or try changing the custom background color – which is invisible behind your background image; but this would add a padding around the whole center, and ruin the ‘full-width’ header image effect…

    What browser inspection tool are you using

    I use Firefox’ web developer add-on

    Great Scott I think I’ve fixed it! I added some styles to the bottom of the style.css after identifying what the dives were called. I’ll try your addon. I used the one in Chrome this time which seems to work the same way firebug does. Amazingly I think I found what I was looking for.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Twenty Twelve Theme: More Margin’ is closed to new replies.