May 22

好的WP模板层次分明、代码清晰,不用看效果,光看代码就觉得有种美感。但很痛苦的是,曾遇到一些很漂亮的模板,但它的宽度不适合我的要求(正文部分要放800像素宽度的图片)而作罢。

这两天稍微研究了下,发现只要对CSS做点小手术就可以了–当然,对于不熟悉CSS的我来说,如果本身的CSS文档写得过于天书就麻烦了,还好目前这个模板还不错。

IE8里面Tools里的Developer Tools里面有个小工具叫做Ruler,用它可以精确测量像素级的长度。先测量了原始模板的整体宽度,960px,在CSS里搜索,发现下面这句:

#wrapper {width: 960px;margin: 0px auto;position: relative;}

这就是一个960像素宽、外边距为0、相对定位的最外层包裹,直接改成1080px,发现整个模板变成了1080像素宽。

有了好的开始,接下来修改左边的正文栏部分。由于注释写得很清楚,找到下面这几句:

/* ————————————- main content area */
#page #wrapper #container #left-col {
width: 675px;
float: left;
}

正文宽度为675px,改成866px(中间经过几次修改以找到最合适的宽度)。继续修改sidebar的宽度,找到下面几句:

/* sidebar */
#sidebar {
margin-top: 15px;
padding-bottom: 20px;
float:right;
width: 260px;
color: #666666;
line-height: 160%;
position: relative;
}

宽度260px,改成200px

保存刷新,大功告成!



Leave a Reply

You must be logged in to post a comment.

preload preload preload

无觅相关文章插件,快速提升流量