我的论坛装修

半透明代码: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渐变),这样的效果是非常棒的哦。->后来的后来,俺又发现这样一个半透明条条横在页面中间,其实还是不大好看,于是俺又动了脑筋,还是用了白色背景,顶端一条实线,底部一条虚线,终于使得整个页面的风格统一以来勒我的论坛装修

    #pt {
    filter: Alpha(opacity=95);
    -moz-opacity: 0.95;
    opacity: 0.95;
    margin-left: 30px;
    margin-right: 30px;
    margin-bottom: 0px;
    height: 30px;
    border: none;
    line-height: 30px;
    background-color: #FFFFFF;
    border-top-color:#CCC;
    border-top-style:solid;
    border-top-width:thin;
    border-bottom-style:dashed;
    border-bottom-color:#CCC;
    border-bottom-width:thin;
        }

 #wp是主体(不包括顶部、尾部),包括了面包屑那行。(好像还可以覆盖掉面包屑的透明设置,还有#ct的透明设置也能覆盖掉)

 

#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是尾部,就是最后的    Powered by Discuz! X3.2   还有   站点统计|举报|Archiver|手机版|小黑屋|老顽童和娃哈哈的窝窝   这些东西。

 

给最顶行#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中:

    #toptb {
    min-width: 960px;
    border-bottom: 1px solid COMMONBORDER;
    background-image: url(/static/image/common/banner-top.jpg);
    background-position: center;
    height: 20px;
    background-repeat: no-repeat;
};

下面部分可以在论坛后台的页头背景中直接定义:(或者在common.css中对#hd作定义也一样的)

我的论坛装修

这样就实现了头部背景的完美呈现。(但是后来发现还是有个问题,就是当分辨率小于1280,比如到了1024*768这种很古老的时候,就开始出现错位;大于等于1280的则无问题。。。这个问题暂时无解)


导航条的背景颜色在这里定义:我的论坛装修
如果在颜色栏目留白(什么也不输入),貌似就是透明颜色。

如果这时候再在主导航那里把项目全部取消,就相当于取消了主导航栏。
我的论坛装修

快捷导航 这几个字的颜色在 链接->高亮链接颜色 中定义(还有论坛首页的每个版块最新帖子的名称链接==)
我的论坛装修

首页最顶部的那个条条的背景颜色,在其他->通用显示区域背景颜色定义,这里还是首页下部显示在线会员的区域顶行的背景色。


首页各个板块介绍之间的分隔虚线,原来是在其它->通用边框颜色里定义的。这里还是首页版块部分边框线的颜色。

 区域顶行用这种浅的天蓝色好看:#397DF3->太突出了,改用阳光论坛的渐变颜色背景图片。在背景->版块列表标题背景这里定义。首页下部的在线会员这行没办法定义背景图片(在.bm_h中定义背景图片无效),只好在其他->通用显示区域背景颜色中定义接近于版块区域顶行的颜色:#B4B4FA。->后来发现办法了,见帖子前头,可以用#online .bm_h来定义我的论坛装修我的论坛装修,耶~~~

 

因为在通用显示区域背景颜色中定义了这种颜色,在发帖和回复,编辑帖子时候编辑框上的各种图标显得不是很清晰,所以我就加工了一下,把那些白色、浅色的外围色块都擦掉,这样就好看多了。图标文件是集中放置在一起的,在 bbs\static\image\editor 下的editor.gif 文件中。



字体大小:在文字那里,正常字体就是首页的文字,还有其他各个页面的文字,除了主体列表字体和帖子内容->帖子内容字号。另外就是,正常字体大小的 15px/1.7 后面的这个1.8就是所有页面的文字的行间距。目前暂定为,正常15px,主题列表16px,帖子16px,行间距1.7。

 

其他用户的资料查看页面,是: #uhd,也要做相对位置额定义:position:relative;bottom:-45px;

posted @ 2014-07-19 19:09  新旧老顽童  阅读(28)  评论(0编辑  收藏  举报