修改Prower V6主题为固定双栏版本

Prower V6主题使用了屏幕自适应的设计,当屏幕宽度小于或等于1280px时,隐藏侧边栏内容只显示单栏,如果屏幕宽度大于1280px的话,则显示带侧边栏的双栏版本。

最近陆续的有同学从微博上问怎么固定显示双栏结构,在这里做一个统一的答复。

所有的修改,都是只在style.css这个样式表里:

1、删除以下样式代码:

@media only screen and (max-width:1280px) {
#sidebar {display:none;}
}
@media only screen and (min-width:1281px) {
#header_box,.nav,#content,#footer_box {width:80%; margin:0 auto; max-width:1150px;}
.page,#main {max-width:800px;}
#main {float:left;}
#sidebar {float:right; width:18%; max-width:250px;}
#sidebar .widget {display:block; width:100%; margin:0 0 1em; padding-bottom:1em; padding-top:1em;}
}

或是可以使用注释的方式(/**/),修改为

/*@media only screen and (max-width:1280px) {
#sidebar {display:none;}
}
@media only screen and (min-width:1281px) {
#header_box,.nav,#content,#footer_box {width:80%; margin:0 auto; max-width:1150px;}
.page,#main {max-width:800px;}
#main {float:left;}
#sidebar {float:right; width:18%; max-width:250px;}
#sidebar .widget {display:block; width:100%; margin:0 0 1em; padding-bottom:1em; padding-top:1em;}
}*/

2、修改以下代码

/*Sidebar*/
#sidebar {font-size:0.8em;}
#sidebar h2 {font-size:1.2em;}
#sidebar .widget {display:inline-table; vertical-align:top; width:30.3%; margin:3% 1.5%; padding-top:2%; border-top:1px solid #ccc; position:relative;}

/*Sidebar*/
#sidebar {float:right; width:18%; max-width:250px; font-size:0.8em;}
#sidebar h2 {font-size:1.2em;}
#sidebar .widget {display:block; border-top:1px solid #ccc; position:relative; width:100%; margin:0 0 1em; padding-bottom:1em; padding-top:1em;}

再修改代码

#header_box,.nav,#content,#footer_box {width:62.5%; margin:0 auto; max-width:800px;}

#header_box,.nav,#content,#footer_box {width:80%; margin:0 auto; max-width:1150px;}
.page,#main {max-width:800px;}
#main {float:left;}

OK!大功告成!

reeoo.com - web design inspiration

28条评论

  1. 林木木说道:

    双栏固定也不错~

  2. 阿锋小子说道:

    俺先试试效果~

  3. 还不错的方法,谢谢分享

  4. 左夜说道:

    标记一下,以后再改,现在的单栏用着很好,毕竟刚刚起步,没什么人,还是简洁点好

  5. 以前一直看成了power。。。。囧

  6. xpress说道:

    自动适应的多好啊,小屏手机就单栏,大显示器就双栏。多喜欢。

  7. 麦田一根葱说道:

    博主的主题很给力啊

  8. leo说道:

    博主在吗?为什么V6这个模版首页和目录不会显示摘要,而是全文显示啊?

    • 摄氏度说道:

      没有特别设置显示摘要内容,如果要显示摘要的话,可以在编辑文章的时候加入 More 这个功能。

  9. 菜鸟先飞说道:

    博主,你这个V6主题的CSS里面怎么改才能让文章的内容每段开头自动空两格,谢谢~

    • 摄氏度说道:

      加一句
      .post p {text-indent:2em;}

      • 菜鸟先飞说道:

        谢谢博主O(∩_∩)O

      • 菜鸟先飞说道:

        对了,还有一个,那页面的内容怎么空两格呢,.post p {text-indent:2em;}这句对页面的内容没影响

  10. 马丁鞋说道:

    以简约唯美,没有多余的语言.

  11. 拉斯维家斯说道:

    有没有固定双栏版本模板

  12. 七色骄阳说道:

    头像是怎么改的啊?

  13. iv5.me说道:

    博主?你的是文章缩短,为什么我的显示全文?请赐教

  14. sparereal说道:

    修改为固定双栏版本后,手机端还是单栏显示,没有注册和登录功能,这个怎么弄啊?

  15. 超高层说道:

    请问 能增加二级分类菜单吗? 怎么添加?

  16. 陈先生说道:

    自适应就好啦,侧边栏放三个差不多高度的widget,小于1280的时候在最下面显示也不影响版面~ bingo~

  17. Junan说道:

    支持 已修改 双兰比较好看一点~

  18. 好云端说道:

    1.底部广告不能居中了,请问怎么弄成官方效果。演示见http://goodcloud.cc
    2.请问友情链接怎么搞得,谢谢。

    • sparereal说道:

      答第2问:小工具中选“文本”,拖到右边,里面用html写几个链接就是。

  19. spking说道:

    怎样使用二级目录啊 首页不显示

  20. spking说道:

    请问怎样在首页显示二级目录

  21. Yusky说道:

    我一直记得是Power。。。找了半天没找到。。

评论已关闭。