HOME | ABOUT | CONTACT |

Search

Custom Search

Saturday, May 10, 2008

How to Expand Your Minima Stretch Template?

Did you know that this blog uses Minima Stretch template which is one of New Blogger's default templates? Minima Stretch only provides two columns. However, I expanded it to be three columns here. Do you like it? Expanding your template gives you a few advantages. Not only your template looks better but also gives you the flexibility in adding more page elements to your sidebars as well.

You may wonder why you should bother: you can just search the Internet and get your favorite one out there. Well, to be honest with you, those third party templates have embedded third party codes within the templates. That means you either advertise for them or link back to them. That is why I prefer doing it myself. If you are interested, then read on and follow the instructions to implement them:

  • Always backup your template before you do anything. Click on Layout/Edit Template/Download Full Template: Layout/Edit HTML/Backup Template
  • Find the following codes in your HTML editor by holding Ctrl and hit F. Then search for it by copy and paste the first line of the codes in the search box. Depending on which Minima template you used, yours may look different than mine:
    #outer-wrapper {
    width: 750px;
    margin:0 auto;
    text-align:left;
    font: $bodyfont;
    }

    #main-wrapper {
    width: 400px;
    margin-left: 15px;
    float: left;
    word-wrap: break-word;
    /* fix for long text breaking sidebar float in IE */
    overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
    }

    #sidebar-wrapper {
    width: 150px;
    float: right;
    word-wrap: break-word;
    /* fix for long text breaking sidebar float in IE */
    overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
    }
  • Add a new sidebar wrapper right after the above codes. See below in green and pay attentions to those blue spots:
    #outer-wrapper {
    width:
    970px; //pick your own width here
    margin:0 auto;
    text-align:left;
    font: $bodyfont;
    }

    #main-wrapper {
    width:
    500px; //pick your own width here
    margin-left: 15px;
    float: left;
    word-wrap: break-word;
    /* fix for long text breaking sidebar float in IE */
    overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
    }

    #sidebar-wrapper {
    width: 220
    px; //pick your own width here
    float: right;
    word-wrap: break-word;
    /* fix for long text breaking sidebar float in IE */
    overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
    }

    #newsidebar-wrapper {
    width:220px;//pick your own width here
    float: left; // float to right if you want to have a three-column template with two sidebars at right
    word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
    overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
    }
  • Find the following codes:
    <div id='main-wrapper'>
    <b:section class='main' id='main' showaddelement='no'>
    <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
    </b:section>
    </div>

    <div id='sidebar-wrapper'>
    <b:section class='sidebar' id='sidebar' preferred='yes'/>
    </div>
  • Remember you just added a new sidebar wrapper. Now you need to add a new section to your style sheet too. See below in green. The following codes will produce a three-column template with left sidebar, blog posts, right sidebar style.
    <div id='newsidebar-wrapper'>
    <b:section class='sidebar' id='newsidebar' preferred='yes'>
    </div>


    <div id='main-wrapper'>
    <b:section class='main' id='main' showaddelement='no'>
    <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
    </b:section>
    </div>

    <div id='sidebar-wrapper'>
    <b:section class='sidebar' id='sidebar' preferred='yes'/>
    </div>

    If you want to have a three-column template with blog posts, right sidebar, right sidebar style just like my blog here. Then use the following codes instead:
    <div id='main-wrapper'>
    <b:section class='main' id='main' showaddelement='no'>
    <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
    </b:section>
    </div>

    <div id='sidebar-wrapper'>
    <b:section class='sidebar' id='sidebar' preferred='yes'/>
    </div&gt'


    <div id='newsidebar-wrapper'>
    <b:section class='sidebar' id='newsidebar' preferred='yes'>
    </div>
  • Next find the header codes. See below:
    #header-wrapper {
    width: 660
    px;

    change the width number to meet your needs:
    #header-wrapper {
    width:
    970px; //pick your own width here
  • Then find the footer codes. See below:
    #footer {
    width: 660px;

    Change the width number to meet your needs:
    #footer {
    width:
    970px; //pick your own width here
  • Finally save your template
Let me know if it is working for you. If you have any questions, just leave your comments here.

Related article
Three Columns Minima Template

0 comments:

Post a Comment

Search

Custom Search