Manyou诚邀开发者加盟 | 常见问题
《站长》俱乐部官方群公布 城市联络员机会多多
立即免费下载 Discuz!7.0.0 正式版
安装升级指南 | 用户手册 | 新手建站学堂
基于.net架构的Discuz!NT2.6正式版发布
Comsenz公司2009年招贤纳士,期待您的加盟
Discuz!收费服务内容及价格
7月重庆、成都、西安三地社区运营实战特训速报名
Discuz!/UCHome 专用官方虚拟主机
牧场新服一起联运:豆浆机免费带回家
基于Discuz!的免费论坛空间5D6D
康盛创想《站长》俱乐部18城市互动之旅报名ing
返回列表 回复 发帖

DISCUZ 5.5.0风格一些简单实用的修改方法

//==========================================
//---------阅读须知---------

//这篇文章是写给新手看的;
//所有的问题都是被问了N遍的;
//解决的方法都经过验证的;
//修改后要更新CSS缓存才有效果的;
//==========================================

===================
[1] 文字和图片不能在同一行显示,见下图
===================
原因:往往是修改了图片或者字体大小后产生的;

☆首页
GF-1.png
2007-6-6 05:41

解决办法:打开模板文件discuz.htm
找到
<div class="tableborder" style="width: 300px; padding: 9px; background-color: {ALTBG1}">
这里的300px改成350px或更大的数值;

☆主题列表页面
GF-2.png
2007-6-6 05:54

解决办法:打开模板文件forumdisplay.htm
找到
<div class="tableborder" style="width: 400px; padding: 9px; background-color: {ALTBG1}">
这里的400px改成450px或更大的数值;

略提一下:
如果要删除这2处的背景色,并且和周围的颜色相同,去掉background-color: {ALTBG1}即可。

===================
[2] 修改菜单透明度和IE下的阴影效果。
===================
包括导航栏菜单(上图)、论坛跳转菜单、"新帖"处的下拉菜单。
默认
GF-3.png
2007-6-6 05:41


☆修改一:去掉菜单右边和下方的阴影线(效果见下图)
GF-4.png
2007-6-6 05:41

打开include/javascript/menu.js,找到以下内容,删除即可。
if(is_ie && !is_mac) {
   menuobj.style.filter += "progid:DXImageTransform.Microsoft.shadow(direction=135,color=#CCCCCC,strength=2)";
  }
如果只想改颜色不想去掉的话,只要修改color=#CCCCCC就可以了。

☆修改二:修改透明度(效果见下图)
GF-5.png
2007-6-6 05:41

我改了一个特例,透明度为100%,也就是不透明。
打开include/javascript/menu.js,找到
"opacity=85"和"opacity = 0.85"(不止一处),分别改成"opacity=100"和"opacity = 1"

===================
[3] 几处高度的修改。
===================

☆修改一:主表格表头高度
默认风格:包括所有添加有header_bg.gif背景的那个表格行高度。

下图:板块分类所在那个框
默认
GF-6.png
2007-6-6 05:41


修改之后的效果:
GF-7.png
2007-6-6 05:41


修改方法:打开模板文件css.htm,找到
.header {}
将这里的30px改成25px或更小。

☆修改二:论坛列表和主题列表所在行的高度。
默认
GF-9.png
2007-6-6 05:41

修改后的效果
GF-8.png
2007-6-6 05:41

修改方法:打开模板文件css.htm,找到
.row {}
里面添加一行height: 50px; /*或更大的值*/

P.S.这里顺便提一下板块名称字体的修改方法。
GF-29.png
2007-6-6 09:17

板块名称样式 打开模板文件discuz.htm
找到 <span class="bold">$forum[name]</span>
改成 <span class="bold" style="font-size: 18px; color: #CC00FF;">$forum[name]</span>
后面的"(6)"的样式
找到 <span class="todayposts">$forum[todayposts])</span>
改成 <span class="todayposts" style="font-size: 18px; color: #006699;">($forum[todayposts])</span>
如果要为每个板块名称添加不同的样式,可以在后台修改。
比如<font size="+2">板块名称</font>,注意有字符的限制。


☆修改三:LOGO覆盖顶部菜单栏的问题(DISCUZ 5.0版本,非IE)

这个问题在DISCUZ 5.5版本已被修复
GF-10.png
2007-6-6 05:43


修改后的效果
GF-11.png
2007-6-6 05:43


修改方法:打开模板文件header.htm,找到
<div style="width: 100%; height: 78px; text-align: left;">
这里的78px改成和LOGO图片相同或更大的高度尺寸。

[ 本帖最后由 goldenfaith 于 2007-6-9 17:05 编辑 ]
2

评分次数

  • 998w

  • CS1.3

===================
[4] 修改帖子内容的行高

===================
默认
GF-20.png
2007-6-6 05:49


修改后
GF-21.png
2007-6-6 05:49


☆修改方法
打开模板文件viewthread.htm
找到 <div id="message$post[pid]" class="t_msgfont">$post[message]</div>
改成 <div id="message$post[pid]" class="t_msgfont" style="line-height: 2.0em">$post[message]</div>
这里的2.0em表示行高为字体高度的2倍,可自行调整。

===================
[5] 删掉"发帖"按钮旁边的小图片
===================
默认
GF-12.png
2007-6-6 05:49


修改后的效果
GF-13.png
2007-6-6 05:49


☆修改方法
打开模板文件forumdisplay.htm和viewthread.htm,找到
<a href="###"><img src="{IMGDIR}/newspecial.gif" border="0" alt="" /></a>
每个文件各有2处,删除即可。

===================
[6] 个人信息栏的常见修改方法
===================
☆修改一:头像向左对齐
默认
GF-14.png
2007-6-6 05:49


修改后
GF-15.png
2007-6-6 05:49


修改方法:打开模板文件viewthread.htm
找到 <td align="center">$post[avatar]</td>
改成 <td align="left">$post[avatar]</td>

☆修改二 添加右侧分隔线
默认
GF-16.png
2007-6-6 05:49


修改后
GF-17.png
2007-6-6 05:49


修改方法:打开模板文件css.htm
找到t_user {}  里面添加一行
border-right: 1px solid {BGBORDER}; /*{BGBORDER}可改成其他颜色*/

☆修改三 修改个人信息栏的宽度
打开模板文件viewthread.htm,找到
width="18%"和width="82%"
18%是个人信息栏的宽度,82%是右边帖子内容的宽度。只要保证这2个值加起来等于100%就OK了。
比如改成width="20%"和width="80%"

☆修改四 去掉头像背景色和边框
默认
GF-18.png
2007-6-6 05:49


修改后
GF-19.png
2007-6-6 05:49


修改方法:打开模板文件css.htm
找到.avatar {}和.avatar img {},
将它们注释掉。前面加"/*",后面加"*/",方便改回来。
/*.avatar {
border: 1px solid {CATBORDER};
{CATBGCODE};
padding: 3px;
}
.avatar img {
background: {BGCOLOR};
}*/

===================
[7] 如果背景色不是白色。。。
===================

☆LOGO区背景修改
我在后台修改了背景色为#CCCCCC,头部就变成这样了,是不是觉得很丑呢 :-)
因为LOGO图片背景不是透明的。(当然你可以将它改成透明的)
GF-22.png
2007-6-6 05:51



一 将LOGO两边的背景颜色改成白色。
打开模板文件css.htm
找到 .logo {{BGCODE};}
改成 .logo {background-color: #FFFFFF;}

二 删除3条醒目的衬线。
打开模板文件css.htm
找到.mainheader {} 里面的 padding: 6px 0; 改成 padding: 0;
找到 .menu {} 删除里面的 margin-top: 6px; 这一行。

看看效果吧,是不是你想要的。
GF-23.png
2007-6-6 05:51


至于顶栏蓝色那一行,可以修改css.htm内的.mainborder {}
将里面的height: 8px; 改成 height: 0px;就可以删掉了。

[ 本帖最后由 goldenfaith 于 2007-6-8 15:07 编辑 ]
===================
[8] 删掉主题列表左侧的表情符号

===================
默认是这样的
GF-24.png
2007-6-6 07:45

修改后
GF-25.png
2007-6-6 07:45


修改方法:打开模板文件forumdisplay.htm
找到
<td class="f_folder"><a href="viewthread.php?tid=$thread[tid]" target="_blank"><img src="{IMGDIR}/$thread[folder]" border="0" alt="" /></a></td>
<td class="f_icon">$thread['icon']</td>
修改成
<td class="f_folder" colspan="2"><a href="viewthread.php?tid=$thread[tid]" target="_blank"><img src="{IMGDIR}/$thread[folder]" border="0" alt="" /></a></td>

☆补充一:同时删除左边的文件夹图标的方法。
效果图
GF-26.png
2007-6-6 07:48


修改方法:打开模板文件forumdisplay.htm
找到
<td class="f_folder"><a href="viewthread.php?tid=$thread[tid]" target="_blank"><img src="{IMGDIR}/$thread[folder]" border="0" alt="" /></a></td>
<td class="f_icon">$thread['icon']</td>
<td class="f_title">
修改成
<td class="f_title" colspan="3">
这样修改后,"论坛主题"这4个字会跑到中间去,改回到左边的办法:
找到
<td></td><td colspan="6">{lang forum_normal_threads}</td>
改成
<td></td><td colspan="2">{lang forum_normal_threads}</td><td colspan="4"></td>

☆补充二:论坛板块列表如法炮制。
默认
GF-28.png
2007-6-6 08:07


修改后
GF-27.png
2007-6-6 08:09


修改方法:打开模板文件discuz.htm
找到
<td align="center">$forum[folder]</td>
<td align="left" class="subject">
改成
<td align="left" class="subject" colspan="2">

经过以上折腾之后,你一定想把这2块地方也删掉。
GF-1.png
2007-6-6 08:26

GF-2.png
2007-6-6 08:26


第一张图 打开模板文件 discuz.htm
找到以下内容,删除即可。
<div class="tableborder" style="width: 300px; padding: 9px; background-color: {ALTBG1}"><span class="smalltxt">
<img src="{IMGDIR}/red_forum.gif" class="absmiddle" alt="" />  {lang forum_newposts}            
<img src="{IMGDIR}/forum.gif" class="absmiddle" alt="" />  {lang forum_nonewpost}</span></div>

第二张图 打开模板文件 forumdisplay.htm
找到以下内容,删除即可。
<br><br>
<div class="tableborder" style="width: 400px; padding: 9px; background-color: {ALTBG1}"><span class="smalltxt">
<img src="{IMGDIR}/red_folder.gif" class="absmiddle" alt="" />  {lang thread_newposts}      
<img src="{IMGDIR}/folder.gif" class="absmiddle" alt="" />  {lang thread_nonewpost}      
<img src="{IMGDIR}/hot_red_folder.gif" class="absmiddle" alt="" />  {lang thread_more_replies}      
<img src="{IMGDIR}/lock_folder.gif" class="absmiddle" alt="" />  {lang thread_closed}
</span></div>

===================
[9] 顶部菜单栏高度修改

===================
默认
GF-2.png
2007-6-7 06:00


高度改小后的效果图
GF-1.png
2007-6-7 05:57

☆修改方法:打开模版文件css.htm
找到 .menu {} 修改里面的height: 30px
30px就是这里的高度,可改成你想要的数值,比如40px或20px

还有一步不要遗漏,就是修改字体的位置,不然字体会望下跑(高度减少时),往上跑(高度增加时)
打开模版文件css.htm 找到
.menu div, .menu div a {
color: {HEADERMENUTEXT};
padding-top: 7px !important;
padding-top: 6px; /*IE*/
}
调整2个padding-top的数值,比如改成10px/9px或者4px/3px等。

[ 本帖最后由 goldenfaith 于 2007-6-8 15:08 编辑 ]
3

评分次数

  • zgyfj008

  • gj315

  • 月无痕

                            Q&A
-------------------------------------------------------------------
☆47楼

添加5.5版本的表格竖线
☆49楼
去掉联盟论坛、在线用户等左边的图标。

[ 本帖最后由 goldenfaith 于 2007-6-8 15:08 编辑 ]
谢谢!
谢谢,回去修改下
LZ,我实在是没钱。要不一定奖励你。太棒了!!!
谢谢!    :)
不错  实用
*标记*~~~需要的时候在用.谢谢!
返回列表