[style|GF]discuz6.0风格模板常见修改方法

// ============================================================
// 之前我写过"DISCUZ 5.5.0风格一些简单实用的修改方法"，本帖就当作是这篇文章的延续吧。
// 希望对大家修改6.0的风格有所帮助。
// 南芝恋有一片文章"6.0模板中一些大家作风格可能需要修改的地方"，其中包含的内容我就不写了。
// 5楼新添加一些菜单栏的修改方法(9月6号)
// 新添加 discuz6.0首页版主显示位置改回5.X的方法
// ============================================================

=====模版修改技巧=====

后台－基本设置－论坛功能－缓存 CSS 风格－选择"否"
这样在修改模板文件后不必再更新CSS缓存，可以直接在浏览器里按"F5"刷新看到效果，建议在本地测试的时候使用。

=====浏览器右侧滚动条(IE)=====

修改价值：☆☆☆
① 打开css.htm
在文件末尾添加(仅仅是例子)
[quote]html, body { scrollbar-face-color: #FFF; scrollbar-shadow-color: #CCC; scrollbar-highlight-color: #FFF; scrollbar-3dlight-color: #CCC; scrollbar-darkshadow-color: #FFF; scrollbar-track-color: #F6F6F6; scrollbar-arrow-color: #999; }

② 截图演示 本楼附小雨制作的CSS2样式表手册(旧版本，不容易找哦)，具体样式可参考里面的"滚动条"说明。
[/quote]

=====论坛横排(>=2)时显示自定义板块图片=====

修改价值：☆☆☆☆☆
① 添加板块图标 打开discuz.htm
找到
[quote]<th width="$cat[forumcolwidth]"{$forum[folder]}>

改成

<th width="$cat[forumcolwidth]"{$forum[folder]}>$forum[icon]

② 删除板块前面的新旧图标 打开css.htm
找到以下内容，并删除。

.forumlist th { padding-left: 55px !important; }
.forumlist tbody th { background-image: url({IMGDIR}/forum.gif); background-repeat: no-repeat; background-position: 13px 50%; }
.forumlist tbody th.new { background-image: url({IMGDIR}/forum_new.gif); }

③ 截图演示

[/quote]

=====改回5.X版本的两处图标=====

修改价值：☆☆☆
① 新帖后面的NEW图标，6.0版本改成了文字形式，现将它改回图标的样子。
打开forumdisplay.htm 找到
[quote]<a href="redirect.php?tid=$thread[tid]&goto=newpost$highlight#newpost" class="new">New</a>

改成(如果没有firstnew.gi这个图标的话自己加吧，下同)

<a href="redirect.php?tid=$thread[tid]&goto=newpost$highlight#newpost" class="new"><img src="{IMGDIR}/firstnew.gif" border="0" alt="" /></a>

② 个人信息栏右上角IP图标(有相应权限才能看到)。
打开viewthread.htm 找到

<label><a href="topicadmin.php?action=getip&fid=$fid&tid=$tid&pid=$post[pid]" id="ajax_getip_$post[count]"  title="{lang admin_getip}">IP</a></label>

改成

<label><a href="topicadmin.php?action=getip&fid=$fid&tid=$tid&pid=$post[pid]" id="ajax_getip_$post[count]"  title="{lang admin_getip}"><img src="{IMGDIR}/ip.gif" border="0" alt="" /></a></label>

③ 截图演示



[/quote]

[ 本帖最后由 goldenfaith 于 2007-10-17 08:18 编辑 ]

=====固定宽度布局=====

修改价值：☆☆☆☆
① 打开header.htm 找到
[quote]<div id="append_parent"></div><div id="ajaxwaitid"></div>

在下面添加一行

<div style="width: 950px !important; margin: 0 auto; padding: 0 10px; background: #FFF; text-align: left; overflow: hidden;"><!-- 颜色和宽度自己改 -->

② 打开footer.htm 找到

<!--{if $_DCACHE['settings']['frameon'] && in_array(CURSCRIPT, array('index', 'forumdisplay', 'viewthread')) && $_DCOOKIE['frameon'] == 'yes'}-->

在前面添加

</div>

[/quote]

=====半透明菜单=====

修改价值：☆☆☆☆
① 打开../include/javascript/menu.js
找到以下内容并删除。
[quote]if(is_ie) {
menuobj.style.filter += "progidXImageTransform.Microsoft.shadow(direction=135,color=#CCCCCC,strength=2)";
}

② 打开css.htm
方法一 找到(仅修改顶部菜单栏，其他菜单保持不变)

.headermenu_popup { width: 170px; }

改成

.headermenu_popup { width: 170px; filter: alpha(opacity=75); -moz-opacity: 0.75; opacity: 0.75; -khtml-opacity: 0.75; }

或者

方法二 找到(全部菜单，包括顶部菜单栏、新帖下拉菜单、个人信息栏菜单等)

.popupmenu_popup { text-align: left; line-height: 1.4em; padding: 10px; overflow: hidden; border: 1px solid {CATBORDER}; {PORTALBOXBGCODE}; background-repeat: repeat-x; background-position: 0 1px;  }

改成

.popupmenu_popup { text-align: left; line-height: 1.4em; padding: 10px; overflow: hidden; border: 1px solid {BORDERCOLOR}; {PORTALBOXBGCODE}; background-repeat: repeat-x; background-position: 0 1px; filter: alpha(opacity=75); -moz-opacity: 0.75; opacity: 0.75; -khtml-opacity: 0.75; }

③ 截图演示


[/quote]

=====帖子内容与个人信息栏之间的分隔线=====

修改价值：☆☆☆

① 修改特殊主题 打开css.htm
找到
[quote].mainbox td.postauthor { width: 180px; background: {ALTBG2}; padding: 5px; overflow: hidden; }

改成

.mainbox td.postauthor { width: 180px; background: {ALTBG2}; padding: 5px; overflow: hidden; border-left: 1px solid {BORDERCOLOR}; }

② 然后修改普通主题 打开 viewthread.htm
找到(有2处)

<td class="postauthor">

改成

<td class="postauthor" style="border-left: 0 ; border-right: 1px solid {BORDERCOLOR};">

③ 截图演示


[/quote]

[ 本帖最后由 goldenfaith 于 2007-10-17 08:18 编辑 ]

=====一些简单的修改=====

修改价值：☆☆☆
① 打开css.htm 找到
[quote].postauthor li { text-indent: 22px; width: 49.5%; height: 1.6em; overflow: hidden; float: left; background-position: 0 50%; background-repeat: no-repeat; }

改成

.postauthor li { text-indent: 22px; width: 49.5%; height: 1.6em; overflow: hidden; list-style: none; background-position: 0 50%; background-repeat: no-repeat; }

② 每项占据一行 效果演示
修改前

修改后
[/quote]

修改价值：☆☆
① 打开css.htm 找到
[quote].postactions { border-top: 1px solid {COMMONBOXBORDER}; background: {COMMONBOXBG}; line-height: 30px; height: 30px; padding: 0 10px; }

改成

.postactions { border-top: 0; line-height: 30px; height: 30px; padding: 0 10px; }

② 去掉背景色和上边框 普通用户在这里只能看到"TOP"。
修改前

修改后
[/quote]

修改价值：☆☆
① 打开viewthread.htm 找到
[quote]<div id="postmessage_$post[pid]" class="t_msgfont">$post[message]</div>

改成

<div id="postmessage_$post[pid]" class="t_msgfont" style="line-height: 2.5em;">$post[message]</div>

② 帖子内容行高 截图演示
修改前

修改后
[/quote]

修改价值：☆☆☆
① 打开css.htm 找到
[quote]#footer { border-top: 1px solid {BORDERCOLOR}; background: {ALTBG2}; color: {TEXT}; padding: 12px 0; }

改成

#footer { border-top: 1px solid {BORDERCOLOR}; background: {ALTBG2}; color: {TEXT}; padding: 12px 0; width: {MAINTABLEWIDTH}; }

② 页脚宽度 截图演示
修改前

修改后
[/quote]

[ 本帖最后由 goldenfaith 于 2007-10-17 08:18 编辑 ]

修改价值：☆☆☆
① 打开css.htm 找到
[quote].mainbox h1, .mainbox h3, .mainbox h6 { line-height: 31px; padding-left: 1em; {HEADERBGCODE}; background-repeat: repeat-x; background-position: 0 0; color: {HEADERTEXT}; }

改成

.mainbox h1, .mainbox h3, .mainbox h6 { line-height: 25px; padding-left: 1em; {HEADERBGCODE}; background-repeat: repeat-x; background-position: 0 0; color: {HEADERTEXT}; }

然后调整以下表头内容的上下位置，找到

.headactions { float: right; line-height: 1em; padding: 10px 10px 0 0; }

改成

.headactions { float: right; line-height: 1em; padding: 6px 10px 0 0; }

② 主表格表头高度 截图演示
修改前

修改后


③ 修改"联盟论坛"、"在线人数"等箱子的表头高，可以这样修改，css.htm找到

.box h4 { {PORTALBOXBGCODE}; background-repeat: repeat-x; background-position: 0 0; line-height: 30px; padding: 0 10px; }

修改这里的"line-height: 30px;"[/quote]

修改价值：☆☆☆
① 分别打开discuz.htm和forumdisplay.htm 找到
[quote]<div class="legend">

改成

<div class="legend" style="display: none;">

②删除以下2块箱子
首页

帖子列表页面


③ 删除帖子列表左边的文件夹图标 打开css.htm 找到

.threadlist td.folder { text-align: center; width: 30px; }

改成

.threadlist td.folder { text-align: center; width: 30px; display: none; }

forumdisplay.htm 找到

<tr><td> </td><td> </td><td colspan="4">{lang forum_normal_threads}</td></tr>

<tr><td> </td><td colspan="5">{lang forum_normal_threads}</td></tr>

奥运风格修改，其他风格不需要。
继上一步之后，找到

<td class="folder"><img src="{IMGDIR}/folder_common.gif" alt="announcement" /></td>
                    <td class="icon"> </td>
                    <th>{lang announcement}: <!--{if empty($announcement['type'])}-->

改成

<th colspan="3">{lang announcement}: <!--{if empty($announcement['type'])}-->

④ 删除帖子列表左边的表情图标 打开css.htm 找到

.threadlist td.icon { text-align: center; padding: 3px 0; width: 16px; }

改成

.threadlist td.icon { text-align: center; padding: 3px 0; width: 16px; display: none; }

⑤ 截图演示
修改前

修改后
[/quote]

[ 本帖最后由 goldenfaith 于 2007-10-17 08:19 编辑 ]

=====一些菜单栏修改的方法=====

修改价值：☆☆
① 第一处菜单栏修改 截图


② 修改一 禁止鼠标滑过时显示菜单
打开discuz.htm 找到
[quote]<a href="space.php?action=viewpro&uid=$discuz_uid" class="dropmenu" id="creditlist" >$discuz_user</a>

改成

<a href="space.php?action=viewpro&uid=$discuz_uid" class="dropmenu" id="creditlist">$discuz_user</a>

③ 修改二 更改菜单显示的内容
打开discuz.htm 找到

<ul class="popupmenu_popup" id="creditlist_menu" style="display: none">
<li>{lang credits}: $credits</li> //第一个li表示"积分"。不需要的话可以将这行删掉，下同。
<!--{loop $extcredits $id $credit}-->
<li>$credit[title]: $GLOBALS['extcredits'.$id] $credit[unit]</li>
<!--{/loop}--> //第二个li表示loop自定义积分，包括图片里显示的威望、金钱等。
</ul>

还可以添加自己想显示的东西比如UID、注册日期等，放在</ul>上面一行，类似"<li>你的内容</li>"。如果index.php里没有相应变量的话就自己添加进去。

[/quote]

修改价值：☆☆☆
顶部菜单栏的修改
① 鼠标滑过时保持背景色不变。
修改前


修改后(鼠标蓝色小箭头会调皮地往下跳)


② 打开css.htm 找到以下内容并删除。
[quote]#menu li.hover, #menu li.current { background-color: {BGCOLOR}; border: 1px solid; border-color: {CATBORDER} {CATBORDER} {BGCOLOR}; }

③ 打开css.htm 找到(下面4个不是连在一起的，要单独修改)

#menu ul { float: right; padding: 4px 10px 0; border-right: 1px solid {TABLEBG}; }
#menu li a { text-decoration: none; float: left; color: {HEADERMENUTEXT}; padding: 4px 8px 3px; background: url({IMGDIR}/menu_itemline.gif) no-repeat 0 6px; }
#menu li.hover a { padding: 3px 7px; background-image: none; }
     #menu li.current a { padding: 4px 7px 3px; background-image: none; }

改成

#menu ul { float: right; padding: 4px 10px 0; }
#menu li a { text-decoration: none; float: left; color: {HEADERMENUTEXT}; padding: 4px 7px 3px; background: url({IMGDIR}/menu_itemline.gif) no-repeat 0 6px; } //其中background内容就是分隔竖线，可选择是否去掉。
#menu li.hover a { padding: 4px 7px; background-image: none; }
     #menu li.current a { padding: 4px 7px 3px; background-image: none; }

[/quote]

修改价值：☆☆☆☆
个人信息栏的修改
① 将菜单栏里的一些用户信息拿到下面来。
效果图


② 后台－基本设置－界面与显示方式



④ 后续的修改可以将最下面的"个人空间"、"加为好友"等4项添加到菜单栏里。

[ 本帖最后由 goldenfaith 于 2007-10-17 08:19 编辑 ]

受益良多、谢谢，再请教首页
版块              主题     帖数         最后发表
如何将宽度加减、如版块 加宽          最后发表减少宽度

UP!强烈支持！

学习啦，不错。。。。。。。。。

謝謝,學習了.

:) :) :)