Tuesday 14 April 2009

Add third column to Minima template

Add third column to Minima template

These instructions relate to adding a left hand side bar to the two column Minima template with a right hand side bar. I used the procedure to build this site. I have found this method more sound that finding a template on the internet and changing the whole lot. Sometimes these customised templates have glitches and this is a hands on mod that works perfectly with no glitches. One glitch that can be encountered is line spacing which can become compressed after tables or bullets. That can be annoying. If you want to see the result of all the instructions carried out - the finished product - and are starting from scratch with a new blog, you can copy the template from this page: http://docs.google.com/Doc?id=dcwcsr3b_588gbwdrddx
  • These instructions also relate to the layout version of Blogger. You can check by going to the dashboard screen and find this section:
  • Update 17-11-09: Note: if you have an existing blogger site with widgets you will find that when a new third party template (non-Google Blogger template) is uploaded there will be a warning that says widgets will be lost. This is normal and applies to the upload of all templates like these. You should accept that and rebuild the widgets once the template is uploaded if they are standard templates or save the code and reinsert in a new widget if they are specialized widgets (html code that you have added yourself). I think one or two of the comments refer to this problem and that is why I have written this update.
  • OK...onwards.....when in dashboard click on "layout" and then "edit HTML". This takes you to the template code. You now have to find pieces of code to change slightly. The changes are easy. But before you do I would download the template. You can do that using the "download full template" link under the heading "Backup/Restore template". The downloaded template will go to downloads in Windows. I usually drag it out to desktop and put it into a folder to find it more easily when needed. It can be uploaded using the buttons just below the "download full template link referred to.
  • Staying on the edit HTML page, we need to find some code. This is best done using a search facility. A search box can be brought up bottom left of the computer window by using "Ctrl F". That is hold down the Ctrl key and then the F key.
  • Drop this text into the search box: #header-wrapper {
  • That takes you to the code immediately and it is highlighted in green.
  • We need to change the width of the blogger template to accommodate the third column like this at the point where you are at in the template:

Instructions for changing code
Stage 1 - change width where and as indicated
Before


#header-wrapper {
width:660px;
margin:0 auto 10px;
>border:1px solid $bordercolor;
}
After

#header-wrapper {
width:
960px;
margin:0 auto 10px;
>border:1px solid $bordercolor;
}
Stage 2 - either scroll down about 10 inches of text or search using Ctrl F for this: #header .description { then change the code as shown below, marked in red:
Before


#description {
margin:0 5px 5px;
padding:0 20px 20px;
border:1px solid #eee;
border-width:0 1px 1px;
max-width:660px;
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#999;
After

#description {
margin:0 5px 5px;
padding:0 20px 20px;
border:1px solid #eee;
border-width:0 1px 1px;
max-width:940px;
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#999;
Stage 3 - Next using the search box mentioned above search for this code: #outer-wrapper { - this stage means adding some code where indicated and changing widths
Before

#outer-wrapper {
width: 700px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 410px;
float: $startSide;
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 */
}
After

#outer-wrapper {
width: 960px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#left-sidebar-wrapper {
width: 220px;
float: $startSide;
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 */
}


#main-wrapper {
width: 500px;
float: $startSide;
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 */
}

Stage 4 - search for this code: #footer { - change width where and as indicated
Before

#footer {
width:660px;
clear:both;
margin:0 auto; 10px
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}


After

#footer {
width:960px;
clear:both;
margin:0 auto; 10px
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

Stage 5 - search for this code: <div id='main-wrapper'> - this stage means pasting the code in red into the place indicated
Before

<div id='content-wrapper'>

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>

<div id='main-wrapper'>


After

<div id='content-wrapper'>

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>

<div id='left-sidebar-wrapper'> <b:section class='sidebar' id='left-sidebar' preferred='yes'> <b:widget id='Gadget1' locked='false' title='Geo IP Tool' type='Gadget'/> </b:section> </div>

<div id='main-wrapper'>



Then check with preview. All should be well. Save template and go.......!

16 comments:

  1. This worked perfectly. thanks for the help! http://www.lifeinthesubs.blogspot.com

    ReplyDelete
  2. Very good tutorial! Feel free to check out http://creditwindow.blogspot.com (site with third column) and http://thoughtsetmusings.blogspot.com

    ReplyDelete
  3. Thanks this was so easy and worked perfectly!

    ReplyDelete
  4. Nice work guys. Kissy El - WOW site! Pleased to assist.

    ReplyDelete
  5. It didn't work for me :( I'll have to go back and see what I've done wrong. Thanks for this post though - very helpful!

    ReplyDelete
  6. It didn't work for me either, it isaid there is already one widget with the name of gadget1

    help??

    ReplyDelete
  7. Hi there. It works if the starting point is correct. However, when a template is changed the existing widgets (the things you have in the outside columns) will be lost unless you save them first and rebuild them or rebuild from scratch. So if the widget is an html code just save the code and replace it in a new widget with the new template.

    Loss of widgets is normal on a template change like this. It is the same for all templates except the Google ones.

    So in response to the last comment: I think this is what is being referred to. Press on but make sure you are happy with rebuilding widgets.

    ReplyDelete
  8. I have adjusted everything, deleted my right side elements (to add on later) but when I click preview, it says on the webpage 'there was an error with this gadget'. It is not the same error, because no error message shows up on the html page.

    more help??

    ReplyDelete
  9. Hi, I have not seen that error before. I would make sure that all the steps have been followed to the letter. It is is possible to make even a small almost insignificant error and it won't work. This does work as this website was built using it. It is just that the starting point and the process has to be perfect.

    ReplyDelete
  10. Hi - response to last comment. Please tell me the URL of your website. There may be something I can spot from that to help you.

    ReplyDelete
  11. it is www.darhling.com I haven't saved the changes, so it is back to it's original layout. any help will be useful!

    ReplyDelete
  12. Serious problems now, I deleted ALL changes, converted to the original MINIMA design and started over. It still does not work..

    ReplyDelete
  13. This comment has been removed by the author.

    ReplyDelete
  14. Hi, it seems to me that you have a 3 column website. There is one gadget that is not right but this can be deleted I would have thought.

    The width of your template is too wide. I am sorry but you have definitely entered some wrong numbers. If you copy the template you can email it to me as an attachment (make it notepad not Word please of Google docs) and I'll check.

    There is a massive space between the center column and the RHS column. You do have a LHS column though and your header is great.

    I would check things again. I note too that this is not a Blogger hosted site but a custom site (not a Blogger URL). That may (but should not cause problems).

    The template changes apply to a standard Google blogger minima two column template with second column on the RHS.

    ReplyDelete
  15. PS you have not lost your posts but you have lost labels which is a widget and which can be added with ease and quickly. It is a standard Blogger widget.

    If you are fed up with my template (!) you can try another but I sense that the problem is not the template.

    ReplyDelete
  16. This worked perfectly! I first tried to do this from another site and it was horrible. Great instructions!!!

    ReplyDelete

Your comments are always welcome.

Featured Post

i hate cats

i hate cats, no i hate f**k**g cats is what some people say when they dislike cats. But they nearly always don't explain why. It appe...

Popular posts