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

goldenfaith

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

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

☆首页

2007-6-6 05:41

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

☆主题列表页面

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下的阴影效果。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
包括导航栏菜单(上图)、论坛跳转菜单、"新帖"处的下拉菜单。
默认

2007-6-6 05:41

☆修改一：去掉菜单右边和下方的阴影线(效果见下图)

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就可以了。

☆修改二：修改透明度(效果见下图)

2007-6-6 05:41

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

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

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

下图：板块分类所在那个框
默认

2007-6-6 05:41

修改之后的效果：

2007-6-6 05:41

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

☆修改二：论坛列表和主题列表所在行的高度。
默认

2007-6-6 05:41

修改后的效果

2007-6-6 05:41

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

P.S.这里顺便提一下板块名称字体的修改方法。

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版本已被修复

2007-6-6 05:43

修改后的效果

2007-6-6 05:43

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

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

goldenfaith

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
[4] 修改帖子内容的行高
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
默认

2007-6-6 05:49

修改后

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] 删掉"发帖"按钮旁边的小图片
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
默认

2007-6-6 05:49

修改后的效果

2007-6-6 05:49

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

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
[6] 个人信息栏的常见修改方法
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
☆修改一：头像向左对齐
默认

2007-6-6 05:49

修改后

2007-6-6 05:49

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

☆修改二 添加右侧分隔线
默认

2007-6-6 05:49

修改后

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%"

☆修改四 去掉头像背景色和边框
默认

2007-6-6 05:49

修改后

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图片背景不是透明的。(当然你可以将它改成透明的)

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; 这一行。

看看效果吧，是不是你想要的。

2007-6-6 05:51

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

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

goldenfaith

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
[8] 删掉主题列表左侧的表情符号
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
默认是这样的

2007-6-6 07:45

修改后

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>

☆补充一：同时删除左边的文件夹图标的方法。
效果图

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>

☆补充二：论坛板块列表如法炮制。
默认

2007-6-6 08:07

修改后

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块地方也删掉。

2007-6-6 08:26

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] 顶部菜单栏高度修改
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
默认

2007-6-7 06:00

高度改小后的效果图

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 编辑 ]

goldenfaith

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

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

luhui23

谢谢！

daxiang800

谢谢,回去修改下

老葫芦

LZ，我实在是没钱。要不一定奖励你。太棒了！！！

sunrise99

谢谢！    :)

cn8h91

不错  实用

jssq

*标记*～～～需要的时候在用．谢谢！