A reader asked to have a three column template with a Table of Contents at the top. So I decided to make it and take you, my dear readers, along with me as I do so. Something like "The Making of a template.....". So here we go......... Technorati Tags:template, width, third column, change template, conditional tags, css, blogger hacks, 1. CREATE A BLOG
As I have said previously in Practical Approach to Hacking Templates, it is always best to start of with one of the Blogger Templates. So we login to the Dashboard and click on Create Blog link and follow the steps in How to Start a Blog. We will use this blog to showcase the new template. We choose the name as Table of Contents Template and the URL as http://tableofcontentsdemo.blogspot.com/. Lastly we choose the Minima Template and create a Test Post. Since this is to be a Demo blog we set the Settings----Basic------->Add your Blog to our listings?----->No----->Save. In Settings----->Publishing----->Send Pings---->No----->Save. In Settings----->Comments we set Who Can Comment? to Only Members of this blog----->Save, since we do not want spam comments on this Demo blog. In Settings----->Site Feed we set Allow Blog Feed to None---->Save, as this is a demo.2. INCREASE BLOG WIDTH
The next step is to increase blog width, as shown in How to change width of blog, so as to accommodate a third column. So we go to Template------>Edit Html and first backup the template. Then scroll down in edit Html text box till you come to this code :
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px; <----CHANGE THIS
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
The outer wrapper contains all the blog sections within it. See the picture below
:
To create space for a third column we increase it to 880 px and save the template. See the picture below showing increased width of the blog
3. ADD THIRD COLUMN
To add a third column as shown in add a third column to blog, we first define a new column which will be floated left and which will hold the posts column and the new left sidebar. Let us call it the bigcolumn. We add this code just below the outer wrapper code in No 2 above :
#bigcolumn {
width: 630px;
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 */
}
The width is Main (posts) Column 410px + Left sidebar 220px = 630px. It is floated left. Then add the new left sidebar wrapper code below it :
#leftsidebar-wrapper {
width: 220px;
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 */
}
It is floated left within the big column while the posts column is floated right. So we change the float property of the posts column in the code below fro left to right:
#main-wrapper {
width: 410px;
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 */
}
Save Template. The columns have been defined in the CSS and now we have to add code in the body part to show the on page. So we add the big column first after this line in the code :
<div id='content-wrapper'>
ADD THIS LINE
<div id='bigcolumn'>
THEN ADD THE LEFT SIDEBAR WRAPPER CODE BELOW IT :
<div id='leftsidebar-wrapper'>
<b:section class='sidebar' id='leftsidebar' preferred='yes'>
</b:section>
</div>
save the template after closing the bigcolumn division by putting
</div>
after this block of code which represents the main (posts) column :
<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>
See the picture of the full blog below which is now three columns :
4. TABLE OF CONTENTS
The Table of Contents is a Archive Widget which we will place in the central (posts) column. To do this we have to increase the number of widgets in the central column. Go to Template----->Edit Html----->and scroll down till you come to :
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
Change this code to
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='yes' maxwidgets='3'>
Save Template and switch to Page Elements tab. There is already an Archive widget in the right sidebar. Drag and drop it to the top of the posts column and click on Save at the top. Switch back to Edit Html tab and put a check in Expand Widgets Template checkbox at the top of the Edit Template textbox. This will expand the code for the Archives widget. Replace the code AFTER THE FIRST TWO LINES which are :
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'>
<b:includable id='main'>
WITH THE CODE BELOW :
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
</div>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>
<b:includable id='interval' var='intervalData'>
<b:loop values='data:intervalData' var='i'>
<b:if cond='data:i.data'>
<b:include data='i.data' name='interval'/>
</b:if>
<b:if cond='data:i.posts'>
<b:include data='i.posts' name='posts'/>
</b:if>
</b:loop>
</b:includable>
<b:includable id='posts' var='posts'>
<ul class='posts'>
<b:loop values='data:posts' var='i'>
<li><a expr:href='data:i.url'><data:i.title/></a></li>
</b:loop>
</ul>
</b:includable>
</b:widget>
Save Template.5. USE CONDITIONAL TAGS
Now we have the Blog Archives widget showing only the links to the posts. Below it is the posts. We will now use conditional tags as described in Post a Book in the New Blogger to show only the Archives widget on the main page and to show the posts widget on the post pages only.
To do this go to Templates----->Edit Html and put a check in the box to expand Widgets Templates at the top of the Edit Template text box. Then scroll down to the archives code
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'>
<b:includable id='main'>
Add after the above lines the following code :
<b:if cond='data:blog.url == data:blog.homepageUrl'>
Also add </b:if> before the immediate next </b:includable>
The whole code after modification becomes :
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
</div>
</div>
<b:include name='quickedit'/>
</div>
</b:if>
</b:includable>
<b:includable id='toggle' var='interval'>
<b:if cond='data:interval.toggleId'>
<b:if cond='data:interval.expclass == "expanded"'>
<a class='toggle' expr:href='data:widget.actionUrl + "&action=toggle" + "&dir=close&toggle=" + data:interval.toggleId + "&toggleopen=" + data:toggleopen'>
<span class='zippy toggle-open'>▼ </span>
</a>
<b:else/>
<a class='toggle' expr:href='data:widget.actionUrl + "&action=toggle" + "&dir=open&toggle=" + data:interval.toggleId + "&toggleopen=" + data:toggleopen'>
<span class='zippy'>► </span>
</a>
</b:if>
</b:if>
</b:includable>
<b:includable id='flat' var='data'>
<ul>
<b:loop values='data:data' var='i'>
<li class='archivedate'>
<a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
</li>
</b:loop>
</ul>
</b:includable>
<b:includable id='posts' var='posts'>
<ul class='posts'>
<b:loop values='data:posts' var='i'>
<li><a expr:href='data:i.url'><data:i.title/></a></li>
</b:loop>
</ul>
</b:includable>
<b:includable id='menu' var='data'>
<select expr:id='data:widget.instanceId + "_ArchiveMenu"'>
<option value=''><data:title/></option>
<b:loop values='data:data' var='i'>
<option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>
</b:loop>
</select>
</b:includable>
<b:includable id='interval' var='intervalData'>
<b:loop values='data:intervalData' var='i'>
<b:if cond='data:i.data'>
<b:include data='i.data' name='interval'/>
</b:if>
<b:if cond='data:i.posts'>
<b:include data='i.posts' name='posts'/>
</b:if>
</b:loop>
</b:includable>
</b:widget>
For the posts column paste this line of code :
<b:if cond='data:blog.pageType == "item"'>
instead of line xxxxxxxxxxxxxxxxx in below code in your template :
<b:includable id='main' var='top'>
<!-- posts -->
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<div class='blog-posts'>
Then locate the immediate next </div> and add </b:if> after it. Save Template.6. CUSTOMIZING APPEARANCE
You now have a TABLE OF CONTENTS on the front page. To change the title from Blog Archives to TABLE OF CONTENTS just click Edit link in the Archives section on top of the blog posts on Page Elements subtab of Template tab. To change the background of the Table of Contents put this code in the VARIABLE DEFINITIONS :
<Variable name="headingcolor" description="TABLE OF CONTENTS Color"
type="color" default="#fff" value="#ffffff">
<Variable name="contentBackgrnd" description="TABLE OF CONTENTS Background Color"
type="color" default="#fff" value="#ffff66">
and this code lower down after the outer wrapper code :
.BlogArchive h2 {
color:$headingcolor;
}
.BlogArchive {
border:10px solid #000000;
border-bottom:10px solid #000000 !important;
background-color:$contentBackgrnd;
text-align:center;
}
Save Template. See the picture of the blog below :
You can check out the DEMO BLOG here. You can download the full template here.
post titlestable of contents
The Table of Contents Template. |
How to change width of blog. |
To change the width of your blog.................
you will have to change certain parameters in the CSS (CASCADING STYLE SHEET) part of the template. The CSS part is the fourth part of the template and is described in How to do CSS in Beta Blogger.
To do this login to Dashboard and click on Layout under the name of your blog. This takes you to Page Elements. Then click on Edit Html tab next to Page Elements tab. This opens the Edit Template page.
FIRST BACKUP YOUR TEMPLATE TO YOUR PC USING METHODS DESCRIBED IN : HOW TO CHANGE THE TEMPLATE.
Then without putting a check in the Expand Widget Templates box at the top of the Edit Template text box scroll down in the box till you come to :
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 1025px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 530px;
margin-left: 20px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}
#sidebar-wrapper {
width: 250px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}
#newsidebar-wrapper {
width: 170px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}
The Outer wrapper contains the main wrapper and the two sidebar wrappers. Their dimensions are described by the width parameter. Their positions are described by the float parameter. Notice that the outer wrapper does not have a float parameter. This is because its position in the center of the page is described by the "margin 0 auto" parameter. To change the width of any of the main or sidebar column change their width parameters only. Then change the width of the outer wrapper by the same amount because it has to expand to include the new width.
IMPORTANT :
CHANGE ONLY ONE PARAMETER AT A TIME.........AND
HIT THE PREVIEW BUTTON (at the bottom of the box) TO SEE THE EFFECT........BEFORE
SAVING TEMPLATE.
IF YOU DON'T LIKE IT RELOAD OLD BACKED UP TEMPLATE AT ANY TIME.
You will have reason to increase the width of your blog when you find your main column of posts below the sidebar or the sidebar below the posts column. This happens when a large photograph or a large link is added in the posts column. This prevents the sidebar from rising up to take its normal place besides the posts column. Increasing the width of the outer-wrapper then accomodates the sidebar.
To change the width of the HEADER scroll down in Edit Template text box till you come to :
/* Header
-----------------------------------------------
*/
#header-wrapper {
width:750px;
margin:0 auto 10px;
border:0px solid $bordercolor;
}
then change 750 to whatever width you want it to be. IMPORTANT : To allow your blog/site to be viewable in all resolutions restrict the width of the outer wrapper to less than 750 px.
SOME TEMPLATES MAY NOT HAVE OUTER WRAPPER AS A DIVISON : Then go to Edit Html under Template tab and usually the first division after 'Body' and the a links will usually correspond to the outer wrapper.












