记录80后的网络生活

      我还是那么对三栏模板情有独钟，很多喜欢的模板只有两栏，只好无奈的使用，谁叫偶不会做模板

       但是今天实在忍不住了，打开BoBlog的帮助文档，开始我的模板改造之旅

       这里还要说明下，蛮有自豪感的，偶是一个CSS白痴，什么都不懂的，居然一边看帮助文档，一边Google，改成功了，下面解释如有错误请老鸟谅解，见笑了。

        首先找到需要修改的模板的两个文件style.css和element.php

        让后查看帮助文档，找到控制边栏的标签$elements['displayside'] ，对应调用的CSS类为”innerSidebar”

找到模板里element.php单烂调用代码为

[codes=php]$elements['displayside']=<<    

eot;[/codes]

而我需要的双侧边栏的调用为

[codes=php]$elements['displayside']=<<    

eot;[/codes]

        由此我们可以看到由两栏变三栏只是在调用里多加了两个类，那我们现在去样式表style.css加入对应的类就行，原两栏的样式表如下

[codes=css].sidebar {
  float:right;
  padding:0px 20px 20px 0px;
  width:220px;
  color:#666666;
  overflow:hidden;
}
.sidebar-hide {
  display: none;
  float:right;
}
#innerSidebar {
    padding:0px;
  margin:0px;
}[/codes]

        因为只有一个侧边栏，所以只有一个子类，现在我们就需要加入两个对应的子类就行

[codes=css].sidebar {
  float:right;
  padding:0px 5px 0px 0px;
  width:405px;
  color:#666666;
  overflow:hidden;
}
.sidebar-hide {
  display: none;
  float:right;
}
#innerSidebar {
  float:left;
    padding:0px;
  margin:0px;
}
#innerSidebar-left{
    float:left;
  overflow:hidden;
  display:inline-block;
  width:200px;
  margin-right:0px;
  padding-left:0px;
  padding-top: 0px;
  padding-right:2px;
}
#innerSidebar-right{
    float:right;
  overflow:hidden;
  display:inline-block;
  width:200px;
  padding-top: 0px;
  padding-right:0px;
  padding-left:2px;
}[/codes]

       这里要注意侧边栏的宽度，不要把页面撑破了，还有整个页面的宽度
[codes=css]#innerWrapper {
    margin:0px;
  padding:0px;
}[/codes]

        后面就自己调试页面了，偶开了6个浏览器，观察没有出错后就算搞定了，什么无法有没有错误我就不管了，像我这样的菜鸟，那个还是不考虑了，明天有时间把另几个喜欢的皮肤都改成三栏的

作者：小峰JoysBoy@小峰网络遨游记
原文地址：http://blog.joysboy.net/two-sidebar-to-three-sidebar-boblog-template/
本博客原创文字只代表本人某一时间内的观点或结论，与本人所在公司没有任何关系。
第三方若用于商业用途的转载，须取得本人授权。

您可能对这些文章感兴趣

• 2009年05月2日 -- 小博反省记 (3)
• 2008年11月15日 -- BlogUpp推广你的博客 (2)
• 2008年11月14日 -- 把你的博客域名变为OpenID (2)
• 2008年10月23日 -- 个人博客已经死亡？居然发现有人写了这么一篇文章 (0)
• 2010年05月2日 -- 小峰博客涅磐 (28)
• 2010年02月1日 -- 回归 (4)