欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > cms使用教程 > discuz使用教程 >

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

发布时间:2019-03-11  编辑:杨雨个人博客网站   点击:   

一、顶部和尾部蓝条:

1、位置见图示意:

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

以下为引用的内容:
.mainborder {
clear: both;
height: 8px;
font-size: 0px;
line-height: 0px;
padding: 0px;
background-color: {MAINBORDER};
  }
 

I、修改线条的高度(也就是厚度):修改height: 8px值;

II、修改线条颜色:background-color: {MAINBORDER};如果想不显示有色线条则可用页面背景色{bgcode}取代;

III、调整线条宽度:将

以下为引用的内容:
.mainborder {
clear: both;
height: 8px;
font-size: 0px;
line-height: 0px;
padding: 0px;
background-color: {MAINBORDER};
  }
 

改为

以下为引用的内容:
.mainborder {
clear: both;
height: 8px;
font-size: 0px;
line-height: 0px;
padding: 0px;
background-color: {MAINBORDER};
width:{MAINTABLEWIDTH};
}
 

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

3、删除这条蓝线的方法:

通过II修改线条颜色的方法,是可以将此线条看不出显示,但显示会留下一个空白。彻底删除可以在header.htm内找到

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

将其删除。

二、顶部菜单栏:

1、位置见图示意:

为了让大家能清楚地了解顶部菜单栏,我将颜色改了一下。

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

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

以下为引用的内容:
.mainheader {
background-color: {ALTBG1};
padding: 6px 0px;
}
 

I、修改三条绿色线的颜色: background-color: {ALTBG1};绿色我是用了默认风格的{CALENDARTODAY}取代了{ALTBG1};

II、将padding: 6px 0px改成padding: 0px 0px;或取消这句话,将使顶部和底部的绿色线条消失,如要使中间的绿色线条消失,则找Css.htm中的

以下为引用的内容:
.menu {
{HEADERMENUBGCODE};
height: 30px;
margin-top: 6px;
}
 

删除margin-top: 6px;即可

III、调整这个区域的宽度:将

以下为引用的内容:
.mainheader {
background-color: {ALTBG1};
padding: 6px 0px;
}
 

改为

以下为引用的内容:
.mainheader {
background-color: {ALTBG1};
padding: 6px 0px;
width:{MAINTABLEWIDTH};
}
 

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

3、删除这三条绿色线的方法:

通过II修改线条颜色的方法,是可以将其线条看不出显示。但还可以有另外的方法彻底删除。可以在header.htm内找到

<div class="mainheader">

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

以下为引用的内容:
.logo {
{BGCODE};
}
 

以下为引用的内容:
.menu {
{HEADERMENUBGCODE};
height: 30px;
margin-top: 6px;
}
 

分别加上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中的

以下为引用的内容:
.mainheader {
background-color: {CALENDARTODAY};
padding: 6px 0px;
}
 

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

以下为引用的内容:
.menu {
{HEADERMENUBGCODE};
height: 30px;
margin-top: 6px;
}
 

实现的,也是自然通过顶部外边距6px,导致出现露出6px背景色的线条。

看上去是三个线条,但严格意义上讲它不是线条,只是露出的背景色而已。因此前面说的将“padding: 6px 0px改成padding: 0px 0px;或取消这句话,将使顶部和底部的绿色线条消失”,而没有敢说是删除,大家也就理解了吧!

因此,可以看出来,该处同样实现了一样的效果,但5.5比5.0简化了一些语句,实现的手段令人拍案叫绝,有一斑而观全貌,5.5确实比5.0简化不少语句,令速度加快!

三、尾部:

尾部蓝色线条已在1楼阐述了。该部分只有两个:Top上的细线和信息链接区。

位置见图示意:

1、Top上的细线:

I、修改方法:在templates/default中的Css.htm内找

以下为引用的内容:
.footerline {
height: 6px;
border-bottom: 1px solid {BORDERCOLOR};
}
 

可以修改相关数据

II、调整线条宽度:将

以下为引用的内容:
.footerline {
height: 6px;
border-bottom: 1px solid {BORDERCOLOR};
}
 

改为

以下为引用的内容:
.footerline {
height: 6px;
border-bottom: 1px solid {BORDERCOLOR};
width:{MAINTABLEWIDTH};
}
 

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

III、删除这条线的方法:

彻底删除可以在footer.htm内找到

<div class="footerline"><div><a href="#top"><img border="0" src=http://www.chinaz.com/prime/2007/0801/"{IMGDIR}/footer_top.gif" alt="" /></a></div></div>

改为

<div><a href="#top"><img border="0" src=http://www.chinaz.com/prime/2007/0801/"{IMGDIR}/footer_top.gif" alt="" /></a></div>

2、信息链接区:

就是top上的细线和尾部蓝色线条之间的区域。

I、该区域宽度调整:将footer.htm

<table cellspacing="0" cellpadding="0" border="0" width="100%" class="altbg1" style="padding: 5px 0px;">
中的width="100%" 根据情况进行修改!

II、该区域背景色调整:将footer.htm

<table cellspacing="0" cellpadding="0" border="0" width="100%" class="altbg1" style="padding: 5px 0px;">
中的class="altbg1"根据需要进行修改!或在后台调整{altbg1}配色等

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

本文地址:http://itbyc.com/cms/discuz/19107.html
转载请注明出处。
分享是一种快乐,也是一种美德:

上一篇:乌云曝Discuz!持久性漏洞

下一篇:没有了

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1