How to change the padding in columns?

  • TheSupercargo



    I’m building a website for myself with the Graphene theme. I’m impressed but I am no coder (though with several years experience stumbling through different WP themes).

    My website is here for the present:

    Following advice on this forum and in the Graphene wiki, I’ve set up a a child theme and managed to get the fonts I want to work. As you see I’m using a two column mode with the content to the left and a sidebar to the right.

    Now I’m trying to change the padding in the columns, but can’t see how to do it.

    Using Firebug, the only thing I can find that seems to have anything to do with the columns is something called ‘clearfix’ with a number next to it. I’ve tried changing the number, but that just breaks the theme.

    Obviously I’m not looking in the right place, so I’d appreciate some advice.

    What I suppose I want is some sort of CSS code I can put into my child theme that will specify how wide the padding around the content in the main column is and how wide the padding around the side column/sidebar is.

    At present it looks like there are 20px between the bottom of the menu under the banner and the top of the slider and the first widget in the sidebar, 20 px between the slider and the top widget, 30 px between bottom of the content and the footer at the bottom, 30 px the edge of the widget box and the edge of the background to the right, and 10 px between the edge of the content of the main column and the edge of the background to the left.

    I want to reduce all of these.

    Any advice greatly appreciated.





    Hi John,

    When you’re using Firebug, you can use your mouse to hover over a particular element within the html section of your firebug box. This will then highlight that particular element on your webpage in yellow, blue and purple. Yellow is the margin, Blue is the content of the element and Purple is the padding.

    One thing that caught me when I first started using this was that margin is the space outside the element, and padding is the space inside the element. So, basically, what I think you’re wanting to change is the margins.

    To change the margin between the slider and the top menu bar:

    .featured_slider {margin-top: -15px;}

    To change the margin between the footer and the content area:

    #footer {margin-top: -15px;}

    To change the margins on your sidebar, use #sidebar1 and margin-top / margin-bottom / margin-left / margin-right.

    There’s a couple of really great tutorials on Firebug here and here.

    Hope that’s what you’re after. 🙂





    Thanks for your reply Sharon.

    I’d actually watched both Josh Lobe’s video tutorials, but I went back and watched them again after your suggestion. I see now that there is some help to be had.

    I found how to change the margins in the main column (#content padding-bottom/-top) but I still can’t see how to change the spacing in the sidebar satisfactorily left and right. There’s one parcel of code titled

    .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12, .grid_13, .grid_14, .grid_15, .grid_16 where there is some padding I can change, and another called

    .sidebar div.sidebar-wrap

    which also allows for some changes, but neither of them seem to affect the widget titles which look to have some sort of separate padding I can’t see how to change.

    If I can’t alter this, I’ll have to try something that’s within the reach of my ability. I’ve been trying to use Internet safe colours, but I think my solution may have to be a softer grey that isn’t Internet safe. Something to make the background less obtrusive.

    I have other design questions but I’ll put them in a separate thread.




    Hi John,

    I had another play around with your website in firebug this morning and came up with the following:

    #content-main {margin-right: -1px;}


    #container {width:975px;}

    Change the numbers until you get something you’re happy with. You can also change the container width in Graphene Options-Display-Column Width Options. This will eliminate the need to use the above #container in your child theme css.

    I tried these settings on your home page, and one of your blog pages and they reduced the margins that you mentioned above.

    If I’ve understood you correctly, you also want to change the padding inside the widgets, around the widget title? To do this use:

    .sidebar h3 {padding-top/ padding-right / padding-bottom / padding-left : 5px;} Just change the five to whatever works for you.

    I hope that’s what you’re after. 🙂





    Hi Sharon,

    And once again many thanks.

    I played around with your suggestions and have come up with something that has improved the look. The

    #content-main {margin-right: -1px;}

    trick helped and in the end I went with

    .sidebar { padding-left : 5px;}

    which at least gives an equal width to the background either side of the widgets.

    It’s not perfect, but it’s good enough (and – I think – a marked improvement on what I had before).

    I much appreciate your help.

    I’ll wait a couple of days in case anyone else wants to weigh in, but then I’ll mark this as resolved.


Viewing 5 posts - 1 through 5 (of 5 total)

  • You must be logged in to reply to this topic.