Kubrick Width

  • Author
  • #1435311

    How do I change the width of the main text area so that it is wider and the side bar is more narrow?

    The blog I need help with is educationalequityblog.org.


    Kubrick uses an image for the background of the content area, which includes the grey behind the sidebar area. To maintain the same look and change the widths of the content and sidebar area, you would need to recreate, or edit the existing image and adjust the width of the grey background area. Here is the original image.


    The following decreases the sidebar by 20px and increases the main content area by 20px, keeping the overall width the same and assigns a plain white background to the content area.

    #page {
        background: none repeat scroll 0 0 #FFFFFF;
        width: 740px;
    #headerimg {
        margin: 0;
    #header {
        background: none repeat scroll 0 0 transparent;
    #sidebar {
        overflow: hidden;
        width: 170px;
    #facebook-likebox-2 iframe {
        height: 100% !important;
        width: 160px !important;
    #twitter_timeline-2 iframe {
        min-width: 160px !important;

    If you wish to increase the content area width further, it will require a new header image and some additional work. Let me know if you wish to do that.

The topic ‘Kubrick Width’ is closed to new replies.