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.......!