成功把BoBlog模板由两栏改为三栏模板

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

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

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

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

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

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

1
2
3
4
5
6
$elements['displayside']
<div id="sidebar" class="sidebar">
<div id="innerSidebar">
{section_side_components}
</div>
</div>

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

1
2
3
4
5
6
7
8
9
10
11
$elements['displayside']
<div id="sidebar" class="sidebar">
<div id="innerSidebar">
<div id="innerSidebar-left">
{section_side_components_one}
</div>
<div id="innerSidebar-right">
{section_side_components_two}
</div>
</div>
</div>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.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;
}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
.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;
}

这里要注意侧边栏的宽度,不要把页面撑破了,还有整个页面的宽度

1
2
3
4
#innerWrapper {
margin:0px;
padding:0px;
}

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

声明: 除非注明,小峰网络遨游记文章均为原创,转载请以链接形式标明本文地址

本博客原创文字只代表本人某一时间内的观点或结论,与本人所在公司没有任何关系。

本作品采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可。

第三方若用于商业用途的转载,须取得本人授权。

本文作者:

本文地址:http://xfeng.me/two-sidebar-to-three-sidebar-boblog-template/

你可能还对下面文章感兴趣: