pjblog修改皮肤主体宽度教程
在逛别人的blog(pjblog)的时候,发现人家和我一样的pjblog皮肤,但是整个的布局宽度却看上去很舒适,就想着自己改一下皮肤的宽度,于是去百度搜索,却没有详细的教程,当然,对CSS很熟悉的高手来说,这根本不是问题,可惜我还处于初步学习CSS的阶段,不过终究灵犀一点,自己试验了一把,成功了,把这个过程傻瓜化,帖出来,方便后来的人使用。
pjblog主体内容宽度调整,pjblog皮肤宽度调整,pjblog风格宽度调整,其实是一样的目的,不一样的说法。
第一步,找到你使用的pjblog皮肤(pjblog风格)安装文件夹,就是服务器目录skins(皮肤风格文件都在这里存放)
第二步,找到你用的是那个皮肤,找到layout.css 这个CSS文件
第三步,编辑这个CSS。
其实改几个数值就可以了,就是调整宽度的数值。
#container #header #menu{ height:32px; text-align:right;/*visibility:hidden;*/ margin-top: 11px; padding: 0px; width: 900px; (内容框+侧栏宽度=900.就是你这款皮肤总的宽度,这里需要变化哦) margin-right: auto; margin-left: auto; |
/*---工具条--*/ #sidebar{float:left;width:210px;margin-left:15px;text-align:left;} 红色的数值是侧边栏的宽度 |
/*---主内容--*/ #mainContent{float:left;text-align:center;width:670px;padding-top:0px;border:1px solid #ddd;} 红色的数值是内容框的宽度 #innermainContent{margin:5px 10px 0px 0px;} #mainContent-topimg{height:0px;overflow:hidden;} #mainContent-bottomimg{height:0px;overflow:hidden;} .content-width{margin:auto;width:100%;}/*--主内容元素的全局宽度--*/ |
好了,知道怎么做了吧?首先计算看你现在的宽度是多少?你想改变为多少?为了迎合宽屏和普屏的需要,总宽度不可超过1000,一般是910、996等,做好这个加减法,你就可以看到pjblog的布局变化了。
最后,如果你的blogname那一栏,(就是pjblog顶部)和你设置好的内容宽度不符合,或者和内容框对不齐,你还可以调整一下PJblog顶部的宽度。见下表:
#container #header #blogname{ |
需要注意需要设计的就这几个数值,我说的很详细咯,琢磨一下自己就会了!可以只增加内容宽度不改变侧栏宽度,也可以同时增加两者的宽度。看你自己需要吧!
相关新闻>>
- 发表评论
-
- 最新评论 更多>>