Discuz!官方免费开源建站系统

 找回密码
 立即注册
搜索

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

[复制链接]
sonocc 发表于 2007-5-18 04:14:59 | 显示全部楼层 |阅读模式
前面的话:今天(07-5-21)我用百度搜了一下该标题,发现已有网站收录,内容和我写的一样,但是作者却是别人了。请尊重我的劳动成果,要收录请写明
  1. 转自https://discuz.dismall.com  作者:SONOCC
复制代码


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

尚有本人写的另一篇教程,欢迎指教:

《Discuz顶部菜单栏的修改方法(教程)》

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

看到网上总有人询问默认风格的顶部蓝线条、尾部蓝线条和顶部菜单栏的删除或修改宽度、高度等,尾部信息链接区的宽度修改。今天给大家做一个5.50默认版本的修改教程。欢迎指正!!
一、顶部和尾部蓝条:
1、位置见图示意:
~mainborder.gif
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 编辑 ]

评分

4

查看全部评分

回复

使用道具 举报

 楼主| sonocc 发表于 2007-5-18 04:15:52 | 显示全部楼层
二、顶部菜单栏:
1、位置见图示意:
为了让大家能清楚地了解顶部菜单栏,我将颜色改了一下。

line.jpg
红色是原来的顶部蓝线条。绿色是由于改变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>语句删除即可。
~headerline.gif
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 编辑 ]

评分

1

查看全部评分

回复

使用道具 举报

 楼主| sonocc 发表于 2007-5-18 04:16:44 | 显示全部楼层
三、尾部:
尾部蓝色线条已在1楼阐述了。该部分只有两个:Top上的细线和信息链接区。
位置见图示意:
top.jpg

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 发表于 2007-5-18 04:18:02 | 显示全部楼层
还得留位
回复

使用道具 举报

leshow 发表于 2007-5-18 04:19:21 | 显示全部楼层
呵呵,对很多人有用吧,辛苦了
回复

使用道具 举报

 楼主| sonocc 发表于 2007-5-18 04:28:11 | 显示全部楼层
呵呵,那么快啊!!
回复

使用道具 举报

fu20 发表于 2007-5-18 08:04:55 | 显示全部楼层
辛苦了,兄弟:)
回复

使用道具 举报

cnclub 发表于 2007-5-19 05:03:54 | 显示全部楼层
好东西啊,这类文章能多点吗? 楼主辛苦了啊。


www.cn1310.com
回复

使用道具 举报

weego 发表于 2007-5-19 05:16:50 | 显示全部楼层
回复

使用道具 举报

wdss 发表于 2007-5-19 05:27:59 | 显示全部楼层
学习一下,谢谢楼主
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|小黑屋|Discuz! 官方站 ( 皖ICP备16010102号 )star

GMT+8, 2025-11-28 10:57 , Processed in 0.105878 second(s), 18 queries , Gzip On.

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.

快速回复 返回顶部 返回列表