Add 3 column to denim Template

The steps to add a sidebar to Denim and Washed Denim Templates are the same. When you are at Template -> Edit HTML, scroll to these lines:-

#header {
width: 760px;
margin: 0 auto;
background-color: $headerBgColor;
border: 1px solid $headerBgColor;
color: $headerTextColor;
padding: 0;
font: $headerFont;
}



We shall widen the Header to this:-

#header {
width: 950px;
margin: 0 auto;
background-color: $headerBgColor;
border: 1px solid $headerBgColor;
color: $headerTextColor;
padding: 0;
font: $headerFont;
}



Next, scroll to these lines:-

#content-wrapper {
width: 760px;
margin: 0 auto;
padding: 0 0 15px;
text-align: left;
background-color: $mainBgColor;
border: 1px solid $borderColor;
border-top: 0;
}
#main-wrapper {
margin-left: 14px;
width: 464px;
float: left;
background-color: $mainBgColor;
display: inline; /* fix for doubling margin in IE */
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 {
margin-right: 14px;
width: 240px;
float: right;
background-color: $mainBgColor;
display: inline; /* fix for doubling margin in IE */
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 */
}



Insert/amend the parts (shown in red):-

#content-wrapper {
width: 950px;
margin: 0 auto;
padding: 0 0 15px;
text-align: left;
background-color: $mainBgColor;
border: 1px solid $borderColor;
border-top: 0;
}
#main-wrapper {
margin-left: 14px;
width: 464px;
float: left;
background-color: $mainBgColor;
display: inline; /* fix for doubling margin in IE */
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 {
margin-right: 14px;
width: 215px;
float: right;
background-color: $mainBgColor;
display: inline; /* fix for doubling margin in IE */
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 {
margin-left: 14px;
width: 215px;
float: left;
background-color: $mainBgColor;
display: inline; /* fix for doubling margin in IE */
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 */
}



We have introduced a style definition for our new sidebar. You may have noticed that we have modified the width slightly in order to accommodate another column and yet not putting too much squeeze into the template. If you want to change the widths, by all means. Just adhere to the following guideline:-

(#content-wrapper width) = (#main-wrapper width) + (#sidebar-wrapper width) + (#newsidebar-wrapper width) + margins

We will have to insert something into the section of the template before you can preview your new layout.

Further down the template, look for this and add the lines (shown in red):-

The position where the code is inserted is important. The new code has to be above the

.

This places your Profile in the left sidebar. Not to worry, you can remove that later. Now, “Preview” the template to view the changes and if you like it, click “Save Template”. Remove the Profile if you don't want it there. Refresh your Blog to see your new Three Column Denim or Three Column Washed Denim layout!