字体: 小 中 大  

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

goldenfaith 发表于: 2007-9-05 07:39 来源: SupeSite/X-Space官方站

最新回复

goldenfaith at 2007-9-05 07:39:42

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

QUOTE:

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

在下面添加一行

QUOTE:

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

② 打开footer.htm 找到

QUOTE:

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

在前面添加

QUOTE:

</div>

[/quote]

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

QUOTE:

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

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

QUOTE:

.headermenu_popup { width: 170px; }

改成

QUOTE:

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

或者

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

QUOTE:

.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;  }

改成

QUOTE:

.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; }

③ 截图演示

111.png

333.png

[/quote]

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

QUOTE:

修改价值：☆☆☆

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

改成

QUOTE:

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

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

QUOTE:

<td class="postauthor">

改成

QUOTE:

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

③ 截图演示

555.png

666.png

[/quote]

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

goldenfaith at 2007-9-05 07:40:06

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

QUOTE:

修改价值：☆☆☆
① 打开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; }

改成

QUOTE:

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

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

1001.png

修改后

1000.png

[/quote]

QUOTE:

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

改成

QUOTE:

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

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

2000.png

修改后

2001.png

[/quote]

QUOTE:

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

改成

QUOTE:

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

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

3001.png

修改后

3000.png

[/quote]

QUOTE:

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

改成

QUOTE:

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

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

4000.png

修改后

4001.png

[/quote]

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

goldenfaith at 2007-9-05 07:40:30

QUOTE:

修改价值：☆☆☆
① 打开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}; }

改成

QUOTE:

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

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

QUOTE:

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

改成

QUOTE:

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

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

5001.png

修改后

5000.png

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

QUOTE:

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

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

QUOTE:

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

改成

QUOTE:

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

②删除以下2块箱子
首页

7000.png

帖子列表页面

7001.png

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

QUOTE:

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

改成

QUOTE:

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

forumdisplay.htm 找到

QUOTE:

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

QUOTE:

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

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

QUOTE:

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

改成

QUOTE:

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

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

QUOTE:

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

改成

QUOTE:

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

⑤ 截图演示
修改前

8000.png

修改后

8001.png

[/quote]

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

goldenfaith at 2007-9-05 07:41:16

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

QUOTE:

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

111.png

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

改成

QUOTE:

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

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

QUOTE:

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

QUOTE:

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

[/quote]

QUOTE:

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

222.png

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

333.png

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

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

QUOTE:

#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; }

改成

QUOTE:

#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]

QUOTE:

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

555.png

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

111.png

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

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

3481 at 2007-9-05 08:06:03

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

老葫芦 at 2007-9-05 08:07:17

UP!强烈支持！

快乐小虾米 at 2007-9-05 08:10:45

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

abc123456abc at 2007-9-05 08:29:33

謝謝,學習了.

ocean57 at 2007-9-05 08:36:16

愛君如夢 at 2007-9-05 10:49:08

支持

潘东升 at 2007-9-05 11:25:20

好帖

数学菜菜 at 2007-9-05 11:33:33

如何将dz6.0的首页版主显示搞成和dz5.5一样啊？？请高手给出详细方法，万分感谢！
本论坛有很多人问过，我看过那些帖子，都不行的，都没有给出切实可行的方法。

goldenfaith at 2007-9-05 11:43:41

QUOTE:

原帖由 数学菜菜 于 2007-9-5 11:33 发表
如何将dz6.0的首页版主显示搞成和dz5.5一样啊？？请高手给出详细方法，万分感谢！
本论坛有很多人问过，我看过那些帖子，都不行的，都没有给出切实可行的方法。

看1楼南芝恋的帖子连接。里面有详细介绍的。

愛君如夢 at 2007-9-05 22:29:22

顶

淺藍色的吻 at 2007-9-05 23:04:26

王二麻 at 2007-9-05 23:44:27

非常感谢楼主！！！希望出一个完整的更多的修改教程！！！

王二麻 at 2007-9-05 23:51:04

楼主可以仿一下DVBBS ASP风格吗？

ご壞壞〆瀦ㄣ at 2007-9-05 23:56:04

yilixiati at 2007-9-06 00:38:37

晕 我是初学 太复杂了

jesisidabuliu at 2007-9-06 01:56:05

很好很好。。。 谢谢