Lower Sidebar

The lower sidebar was created by adding the code that is highlighted below. It was done without expanding template widgets. <div id='sidebar-wrapper'> <b:section class='sidebar' id='sidebar' preferred='yes'> <b:widget id='Followers1' locked='false' title='Followers' type='Followers'/> <b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/> </b:section> <div id='sidebarBottom-wrapper'> <b:section class='sidebar' id='sidebarBottom' preferred='yes'> <b:widget id='Text1' locked='false' title='Added sidebar' type='Text'/> </b:section> </div> <!-- close sidebarBottom-wrapper--> </div> Both sidebars are inside the main sidebar wrapper id='sidebar-wrapper'. To control the appearance of the lower sidebar, three styles were added between the existing #sidebar and #footer. #sidebarBottom { margin:25px 0 0; padding:2px 20px 10px; background: #ffefd5 url("http://www2.blogblog.com/no897/corner_sidebar_left.gif") no-repeat left top; } #sidebarBottom-wrapper { /*background-color: #ffefd5;*/ } #sidebarBottom-wrapper .sidebar h2 { margin:1em 0 .25em; line-height: 1.4em; font: normal bold 125% Helvetica, Arial, Verdana, Sans-serif; color: #000080; text-transform:lowerca #sidebarBottom sets up the bottom sidebar in the same general configuration as the regular sidebar, and incluses the same rounded top as #sidebar-wrapper. #sidebarBottom-wrapper matches the new sidebar's id and sets the background color. #sidebarBottom-wrapper .sidebar h2 changes the gadget's title to a color that shows. This could be optional. Note the font variable is retained, and the variable is removed from the color and replaced with the code I want. This was not a difficult change, but the existing template should be backed up first. It could be a good idea to setup a new blog for testing, make the change there, add some content (lipsum.com is a good place for filler), work out the bugs. When it works, transfer the changes to the real blog.