我的论坛装修
半透明代码:filter:Alpha(opacity=80);-moz-opacity:0.8;opacity:0.8;
最新发现:使用fox的查看器时,除了定位于,这种可以直接使用#xxxx来引用之外,下一级的 也可以引用了,这样:#xxxx .yyy。比如下图就是在线会员的标题栏:
就可以这样引用:#online
.bm_h{background-image:url(/static/image/common/titlebg.png);}
站点LOGO现在不需要,但如果取消,会有文字替补上去,所以我就做了个1*1的透明图片logo.png放在那里,是不是很聪明呐。
页面背景固定起来比较好看。
字体用微软雅黑:Microsoft YaHei 好看
#toptb页面最顶部的那条
#hd是顶部(但不包括最顶部那条)
#nv是导航条,背景颜色可以在CSS文件和后台定义。但是有一点,就是即使定义了透明的背景,在导航条的左右两边边界还是有一条竖线无法消除。。。后来发现一个笨办法,就是把高度定义为0,这样就彻底消除了这两条竖线。当然。。右边的“快捷导航”也没有了,但是这个貌似没多大作用的。有一个副作用,#hd的高度变小了,我就直接在#hd里面定义了高度:height:
188px;为顶图的高度。还有就是,用这个方法取消了导航条之后,会使得下面的搜索条位置升高。我是采用了定义搜索条位置的办法,在#scbar的定义中加入:position:relative;
bottom:-45px;
就实现了搜索条停靠在下边线。
#scbar是导航条下面的搜索条,#scbar_txt是搜索条里面的输入条。其实,给搜索条背景放透明是最好看,然后呢,还有这个参数:
border-top: 1px solid #FFF;
是有边框线的,把它删除,就能实现全透明背景了。然后,在搜索条的最左边有一个小块颜色,怎么也搞不掉。。后来才发现,这里还有个小盒子:.scbar_icon_td,处理一下就好了。
#pt是主体区域的第一行,也就是面包屑导航条。初始的common.css文件里,有transparent参数,所以这一行是背景透明的,出去掉这个参数才有背景显示出来。后来,为了突出面包屑下面的主体部分,我又给这行加上个特殊处理的背景图片,该图片中间部分半透明,上下部分都是从半透明过渡到全透明(PS渐变),这样的效果是非常棒的哦。->后来的后来,俺又发现这样一个半透明条条横在页面中间,其实还是不大好看,于是俺又动了脑筋,还是用了白色背景,顶端一条实线,底部一条虚线,终于使得整个页面的风格统一以来勒
#ct也是是主体(不包括顶部、尾部),但不包括面包屑那行。通过设置margin-lest参数,可以让主体部分距离左边界有距离,这样使得背景图片更显眼,从而也突出了主体部分。
.mn也是主体,它比#ct更小一些,不包括论坛信息那一行:今日,昨日,帖子。。。
后台的 链接->主体表格背景色 也可以设置主体的背景色
这3个主体如果都设置背景色,那么优先级的关系就是:.mn>#ct>#wp。
.bm也是主体
.bm_c也是主体
.bm 是最常用的区块元素,默认带有 1px 的边框和 10px 的下边距。一般情况下,.bm 内应包括两个子容器:.bm_h 和 .bm_c,前者代表区块头部,带有灰色背景和下边框;后者是容器主体,默认带有 10px 的内边距。
.bm_c的背景色优先于.bm。
在透明度设置上面,好像是#wp是老大,一个人就覆盖了下面所有的设置(包括#ct,.mn,.bm,.bm_c)。那么怎么办呢?后来终于想到个办法就是把common.css里面的wp(#wp,.wp)定义都删除,就能够实现主体不同部分的不同透明度了然后,帖子内容页面的透明度,除了受到common.css里面的#ct的定义,还有受到module.css里面的#ct定义,而以后者的优先级为高。所以,如果想主页、主题列表页、帖子页的透明度统一,取消module.css的#ct中的透明度定义即可;反之,则可以在module.css中作出单独的定义。
PS:好多主体,我都要搞糊涂了
#online是 在线会员 部分。
.bm_c.ptm是 在线会员 下面的那个 友情网站链接 部分。这个名字挺有意思的,如果光是
.ptm,那就还包括了上面在线会员模块的一个部分,所以还要加上.bm_c来限制一下。
#ft是尾部,就是最后的
给最顶行#toptb,页头#hd,面包屑#pt,主体#ct,页尾#ft 5个部分都加上左右边距
margin-left: 30px;
margin-right: 30px;
就能实现整个首页左右边距的整齐划一。但是还有个条件,就是那个wp会作怪,影响到#pt,#ct的表现,所以我干脆就把common文件夹下面的所有#wp,.wp都屏蔽(删除)了,然后就完美了哇哈哈~~
通过定义#ct的内边距,#ft的内边距,就可以使得页面更加规范整齐。因为#ct包括了除尾部外的所有主体,所以通过定义它的内边距,就同时实现了里面所有模块的内边距设置。再加上给#online,.bm_c.ptm设置边框,就显得非常整齐好看了。(主体板块区域的边框好像是在后台定义的)
有个问题,#ct的左内边距:padding-left:10px;会使得设置页面的左侧标签栏消失,现在还不知道什么原因??没办法,只好暂时取消这个定义。(为了对称,把右边距也取消了。。。。。。)
.bm_h是每个区域版块的顶行,这里能够定义高度。
搜索条的文字颜色在文字->浅色文字中定义(还有面包屑下面的一行,那些:今日,昨日,帖子。。。也是,还有每个版块介绍右边的帖子数的颜色也是)。可以用灰色的比较好看:#777777
height,line-height参数定义条条的高度。
margin参数定义外边距,padding参数定义内边距,border定义边框。
因为顶部不包括最顶行,所以要想使得整个顶部的背景画面整齐划一,就要想个办法。我是把页头背景的图片分割为两个部分,最顶行的20px和顶部的120px。这样就要先把图片的高度变到140,然后再分割为上下两部分。上面部分作为CSS的背景图片参数定义在common.css中:
};
下面部分可以在论坛后台的页头背景中直接定义:(或者在common.css中对#hd作定义也一样的)
这样就实现了头部背景的完美呈现。(但是后来发现还是有个问题,就是当分辨率小于1280,比如到了1024*768这种很古老的时候,就开始出现错位;大于等于1280的则无问题。。。这个问题暂时无解)
导航条的背景颜色在这里定义:
如果在颜色栏目留白(什么也不输入),貌似就是透明颜色。
如果这时候再在主导航那里把项目全部取消,就相当于取消了主导航栏。
快捷导航 这几个字的颜色在 链接->高亮链接颜色 中定义(还有论坛首页的每个版块最新帖子的名称链接==)
首页最顶部的那个条条的背景颜色,在其他->通用显示区域背景颜色定义,这里还是首页下部显示在线会员的区域顶行的背景色。
首页各个板块介绍之间的分隔虚线,原来是在其它->通用边框颜色里定义的。这里还是首页版块部分边框线的颜色。
因为在通用显示区域背景颜色中定义了这种颜色,在发帖和回复,编辑帖子时候编辑框上的各种图标显得不是很清晰,所以我就加工了一下,把那些白色、浅色的外围色块都擦掉,这样就好看多了。图标文件是集中放置在一起的,在 bbs\static\image\editor 下的editor.gif 文件中。
字体大小:在文字那里,正常字体就是首页的文字,还有其他各个页面的文字,除了主体列表字体和帖子内容->帖子内容字号。另外就是,正常字体大小的
15px/1.7
后面的这个1.8就是所有页面的文字的行间距。目前暂定为,正常15px,主题列表16px,帖子16px,行间距1.7。
其他用户的资料查看页面,是: #uhd,也要做相对位置额定义:position:relative;bottom:-45px;