WordPress.org

Ready to get started?Download WordPress

Forums

How To: Theme - Identification Band 4-column (1 post)

  1. altoyes
    Member
    Posted 7 years ago #

    Configuring style.css to change column widths.

    First, make a copy of the style.css
    Name it, for example, copy styleORIG.css

    So now you have 2 x .css files.
    Use the style.css to work on and put the styleORIG.css somewhere safe so that you can always go back to using it if you mess up the style.css beyond recognition.

    The 4 Columns.
    In the css, from left to right, the four colums are:
    1. Left sidebar;
    2. this column where a post (content) goes, is not give a column name;
    3. Righter right sidebar;
    4. Lefter right sidebar.

    1. Left sidebar

    Scroll to the following section

    /*
    * Left sidebar
    */
    #menu-left {
    float: left;
    margin: 16px 8px 20px 8px;
    width: 220px;
    font-size: 11px;
    }

    I am leaving the Left sidebar width as it is. I have not tried changing it, so i can not tell if it works or not. It probably does.

    2. this column where a post (content) goes, is not give a column name.

    Scroll to the following section

    #content {
    float: left;
    width: 220px;
    margin: 16px 8px 20px 8px;
    overflow: hidden;
    text-align: left;
    }

    Increase the width to 250px

    3. Righter right sidebar

    Scroll to the following section

    #menu-right-right {
    float: right;
    margin: 16px 8px 20px 8px;
    width: 220px;
    font-size: 11px;
    }

    Reduce the width to 140px

    4. Lefter right sidebar

    Scroll to the following section

    * Lefter right sidebar
    */
    #menu-right-left {
    float: right;
    margin: 16px 8px 20px 8px;
    width: 220px;
    font-size: 11px;
    }

    Increase the width to 270px

    Nearly finished. Please note, the new widths are only a suggestion for the purposes of this How To.
    Save file.
    And have a look.
    And go and take a look at one of your pages.
    If it is not sitting pretty where it should be, dont worry, read on.

    Introduction

    All four colums are 220px each.

    columns 1 2 3 4
    orig. width 220 220 220 220 = 880px
    new width 220 250 140 270 = 880px

    So when you change the column widths, make sure that that your 4 columns still total 880px

    Configuring style.css to change the pages width.
    Introduction
    The pages sit astride column 2 and 3.
    So, if you reduce the original total width (ie 440px) of col 2 and 3, you will have to reduce the width of the page, so that it can still sit neatly on the page where it is supposed to.

    To change the width of pages

    Scroll to the following section

    #content-big {
    float: left;
    width: 456px;
    margin: 16px 8px 20px 8px;
    overflow: hidden;
    text-align: justify;
    }

    Reduce the width to 390px

    finis

    P.S.
    For an example you can take a look at my column width changes (while the site lasts)
    http://parentsawake.com/

Topic Closed

This topic has been closed to new replies.

About this Topic