默认风格顶部、尾部蓝条和顶部菜单栏等修改教程

sonocc

前面的话：今天（07-5-21）我用百度搜了一下该标题，发现已有网站收录，内容和我写的一样，但是作者却是别人了。请尊重我的劳动成果，要收录请写明

1. 转自http://www.discuz.net  作者：SONOCC

复制代码

***********************************************

尚有本人写的另一篇教程，欢迎指教：

《Discuz顶部菜单栏的修改方法（教程）》

***********************************************

看到网上总有人询问默认风格的顶部蓝线条、尾部蓝线条和顶部菜单栏的删除或修改宽度、高度等，尾部信息链接区的宽度修改。今天给大家做一个5.50默认版本的修改教程。欢迎指正！！
一、顶部和尾部蓝条：
1、位置见图示意：

2、修改方法：在templates/default中的css.htm内找

1. .mainborder {
   
2. clear: both;
   
3. height: 8px;
   
4. font-size: 0px;
   
5. line-height: 0px;
   
6. padding: 0px;
   
7. background-color: {MAINBORDER};
   
8.   }

复制代码

I、修改线条的高度（也就是厚度）：修改height: 8px值；
II、修改线条颜色：background-color: {MAINBORDER};如果想不显示有色线条则可用页面背景色{bgcode}取代；
III、调整线条宽度：将

1. .mainborder {
   
2. clear: both;
   
3. height: 8px;
   
4. font-size: 0px;
   
5. line-height: 0px;
   
6. padding: 0px;
   
7. background-color: {MAINBORDER};
   
8.   }

复制代码

改为

1. .mainborder {
   
2. clear: both;
   
3. height: 8px;
   
4. font-size: 0px;
   
5. line-height: 0px;
   
6. padding: 0px;
   
7. background-color: {MAINBORDER};
   
8. width:{MAINTABLEWIDTH};
   
9. }

复制代码

其中{MAINTABLEWIDTH}可以视需要进行调整
3、删除这条蓝线的方法：
通过II修改线条颜色的方法，是可以将此线条看不出显示，但显示会留下一个空白。彻底删除可以在header.htm内找到

1. <div class="mainborder"></div>

复制代码

将其删除。

[ 本帖最后由 sonocc 于 2007-5-21 16:53 编辑 ]

sonocc

二、顶部菜单栏：
1、位置见图示意：
为了让大家能清楚地了解顶部菜单栏，我将颜色改了一下。

红色是原来的顶部蓝线条。绿色是由于改变css.htm的mainheader配色才出现，原默认风格配色很浅不易发现。在header.htm中从<div class="mainheader">到倒数第二行的</div>一直控制着从顶部绿线到底部绿线。因此css.htm中的mainheader是控制这个区的关键。
2、修改方法：在templates/default中的css.htm内找

1. .mainheader {
   
2. background-color: {ALTBG1};
   
3. padding: 6px 0px;
   
4. }

复制代码

I、修改三条绿色线的颜色： background-color: {ALTBG1};绿色我是用了默认风格的{CALENDARTODAY}取代了{ALTBG1};
II、将padding: 6px 0px改成padding: 0px 0px;或取消这句话，将使顶部和底部的绿色线条消失，如要使中间的绿色线条消失，则找css.htm中的

1. .menu {
   
2. {HEADERMENUBGCODE};
   
3. height: 30px;
   
4. margin-top: 6px;
   
5. }

复制代码

删除margin-top: 6px;即可
III、调整这个区域的宽度：将

1. .mainheader {
   
2. background-color: {ALTBG1};
   
3. padding: 6px 0px;
   
4. }

复制代码

改为

1. .mainheader {
   
2. background-color: {ALTBG1};
   
3. padding: 6px 0px;
   
4. width:{MAINTABLEWIDTH};
   
5. }

复制代码

其中{MAINTABLEWIDTH}可以视需要进行调整
3、删除这三条绿色线的方法：
通过II修改线条颜色的方法，是可以将其线条看不出显示。但还可以有另外的方法彻底删除。可以在header.htm内找到

1. <div class="mainheader">

复制代码

和底部最后一个</div>删除即可。注意这时该区域的宽度调整要在css.htm的

1. .logo {
   
2. {BGCODE};
   
3. }

复制代码

和

1. .menu {
   
2. {HEADERMENUBGCODE};
   
3. height: 30px;
   
4. margin-top: 6px;
   
5. }

复制代码

分别加上width:{MAINTABLEWIDTH};即可。其中{MAINTABLEWIDTH}可以视需要进行调整

谈谈5.0和5.5在该处的不同
1、5.0的三条线（图中绿色线）是采用三条同样的<div class="headerline" style="height: 6px"></div>语句获得，在css中有一条关于headerline定义。因此要删除三条线，可以将三处<div class="headerline" style="height: 6px"></div>语句删除即可。

2、5.5的三条线的实现方式非常独特。它取消了css中的headerline定义，也没有<div class="headerline" style="height: 6px"></div>语句。它是通过header.htm中<div class="mainheader">调用css.htm中的

1. .mainheader {
   
2. background-color: {CALENDARTODAY};
   
3. padding: 6px 0px;
   
4. }

复制代码

使得出来上下内边距6px，从而露出6px高的上下两个背景色线条。中间的线条是通过header.htm中<div class="menu"><div class="maintable">调用css.htm中的

1. .menu {
   
2. {HEADERMENUBGCODE};
   
3. height: 30px;
   
4. margin-top: 6px;
   
5. }

复制代码

实现的,也是自然通过顶部外边距6px,导致出现露出6px背景色的线条。
看上去是三个线条，但严格意义上讲它不是线条，只是露出的背景色而已。因此前面说的将“padding: 6px 0px改成padding: 0px 0px;或取消这句话，将使顶部和底部的绿色线条消失”，而没有敢说是删除，大家也就理解了吧！！
因此，可以看出来，该处同样实现了一样的效果，但5.5比5.0简化了一些语句，实现的手段令人拍案叫绝，有一斑而观全貌，5.5确实比5.0简化不少语句，令速度加快！！！

[ 本帖最后由 sonocc 于 2007-5-18 07:18 编辑 ]

sonocc

三、尾部：
尾部蓝色线条已在1楼阐述了。该部分只有两个：Top上的细线和信息链接区。
位置见图示意：

1、Top上的细线：
I、修改方法：在templates/default中的css.htm内找

1. .footerline {
   
2. height: 6px;
   
3. border-bottom: 1px solid {BORDERCOLOR};
   
4. }

复制代码

可以修改相关数据

II、调整线条宽度：将

1. .footerline {
   
2. height: 6px;
   
3. border-bottom: 1px solid {BORDERCOLOR};
   
4. }

复制代码

改为

1. .footerline {
   
2. height: 6px;
   
3. border-bottom: 1px solid {BORDERCOLOR};
   
4. width:{MAINTABLEWIDTH};
   
5. }

复制代码

其中{MAINTABLEWIDTH}可以视需要进行调整

III、删除这条线的方法：
彻底删除可以在footer.htm内找到

1. <div class="footerline"><div><a href="#top"><img border="0" src="{IMGDIR}/footer_top.gif" alt="" /></a></div></div>

复制代码

改为

1. <div><a href="#top"><img border="0" src="{IMGDIR}/footer_top.gif" alt="" /></a></div>

复制代码

2、信息链接区：
就是top上的细线和尾部蓝色线条之间的区域。
I、该区域宽度调整：将footer.htm

1. <table cellspacing="0" cellpadding="0" border="0" width="100%" class="altbg1" style="padding: 5px 0px;">

复制代码

中的width="100%" 根据情况进行修改！
II、该区域背景色调整：将footer.htm

1. <table cellspacing="0" cellpadding="0" border="0" width="100%" class="altbg1" style="padding: 5px 0px;">

复制代码

中的class="altbg1"根据需要进行修改！或在后台调整｛altbg1｝配色等

注意：修改了css.htm后最好进行更新css缓存!!

总算写完了，不足之处敬请指正！！

[ 本帖最后由 sonocc 于 2007-5-18 08:03 编辑 ]

sonocc

还得留位

leshow

呵呵，对很多人有用吧，辛苦了

sonocc

呵呵，那么快啊！！

fu20

辛苦了，兄弟:)

cnclub

好东西啊,这类文章能多点吗？ 楼主辛苦了啊。


www.cn1310.com

weego

wdss

学习一下，谢谢楼主