WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Twelve Theme: More Margin (9 posts)

  1. T-I-W
    Member
    Posted 1 year ago #

    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?

  2. alchymyth
    Forum Moderator
    Posted 1 year ago #

    try working with a browser inspection tool to find out how these elements are styled.

    make sure to either work with a child theme http://codex.wordpress.org/Child_Themes or - for just formatting tweaks - use a custom css plugin.

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

  3. T-I-W
    Member
    Posted 1 year ago #

    I included the URL but it didn't show up for some reason. It's http://www.best-tkd.com/test

  4. alchymyth
    Forum Moderator
    Posted 1 year ago #

    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 http://csscreator.com/forum

  5. T-I-W
    Member
    Posted 1 year ago #

    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.

  6. T-I-W
    Member
    Posted 1 year ago #

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

  7. alchymyth
    Forum Moderator
    Posted 1 year ago #

    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...

  8. alchymyth
    Forum Moderator
    Posted 1 year ago #

    What browser inspection tool are you using

    I use Firefox' web developer add-on https://addons.mozilla.org/en-US/firefox/addon/web-developer/

  9. T-I-W
    Member
    Posted 1 year ago #

    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. http://www.best-tkd.com/test

Topic Closed

This topic has been closed to new replies.

About this Topic