Discuz! 5.0模板风格系列教程－－常见问题整理

Discuz! 5.0.0在模板风格机制上作了很多调整，为了方便更多的朋友更快的了解Discuz! 5.0.0的模板，特制作了此系列教程

第一篇详见

图解Discuz!5.0模板编辑界面方案

地址如下

https://discuz.dismall.com/thread-390246-1-1.html

第二篇详见

Discuz! 5.0.0css详解

地址如下

https://discuz.dismall.com/thread-396884-1-1.html

第三篇详见

Discuz! 5.0.0模板风格常见问题整理

地址如下

https://discuz.dismall.com/thread-398040-1-1.html


5.0风格模板常见问题整理

5.0发布后，采用了新的模板机制，大家在制作新模板的时候多少会遇到些问题，
为了方便有相同或类似问题的朋友能及时的找到解决的方法，
在这里对前段时间坛子里反映的问题整理一下，可不要说我新瓶装旧酒啊:)

如果有新的问题请在论坛里发帖（最好附图），同时PM我，我会及时回复，并将问题整理到这里。

小提示：
修改完css记得更新论坛缓存，否则你所修改的css不会生效的。

或者在后台

基本设置-->论坛功能   模块中找到

缓存CSS风格:
启用这个设置可以把CSS风格缓存成文件，有效降低HTML页面文件输出

将缓存关闭，修改后就可以直接刷新页面看到修改效果了。

另外，关于css，你可以参考我的“Discuz! 5.0模板风格系列教程－－Discuz! 5.0.0css详解  和  图解Discuz!5.0模板编辑界面方案”，可以达到更好的效果。

问题列表
1、Discuz!编辑器常见问题                                                                                    2楼
2、关于title和alt标签颜色的问题                                                                           3楼
3、内表头文字和当前板块新帖数量颜色的问题                                                        4楼
4、关于header的一些问题                                                                                    5楼
5、js下拉菜单 右角边的阴影                                                                                 6楼
6、如何去掉表格发帖图标中间的空白处                                                                 7楼
7、如何修改footer中文字的大小                                                                           8楼
8、如何将帖子论坛列表中表格间隔闲显示出来                                                        9楼
9、如何更改导航栏及上下边条的宽度？                                                                10楼
10、如何让栏目标题和栏目简介在颜色上区分                                                        11楼
11、
.
.
.


此帖将不断更新～～～～～～

[ 本帖最后由 dfox 于 2006-9-13 10:20 编辑 ]

1、模板风格调整时编辑器常见问题 如图显示 如果我设置整体背景为颜色代码的话，编辑器背景就是设置的“#FFFFFF”；而如果设置的整体背景为颜色如“bg.gif”，则“#FFFFFF“就不起作用了。 在论坛根目录下/include/editor.js中定义的 第110行 editdoc.body.style.backgroundColor = '#FFFFFF'; 这里的颜色是控制所见即所得模式下编辑器输入框背景色 这个颜色可以自定义成变量，然后在后台模板风格中添加该变量，并给变量赋值就可以了。 如下： editdoc.body.style.backgroundColor = '{editdocbg}'; 在后台中新增变量editdocbg，就可以在后台定义这里的背景颜色了。 --------------------------------------------------------------------------------------------------------------------------- 以下部分是css.htm中的css定义： .editor_switcher {         position: relative;         top: 1px;         border-bottom: 1px solid {BORDERCOLOR};         background: {ALTBG1};         margin-left: 10px;         vertical-align: middle; } 这里的颜色background是控制非当前标签项背景颜色 建议将{ALTBG1}定义成颜色，以免在后台设置ALTBG1的背景图片时编辑器出现上面小图中的异样背景 .editor_switcher_highlight {         position: relative;         top: 1px;         border-bottom: 1px solid #FFFFFF;         background: #FFFFFF;         margin-left: 10px;         vertical-align: middle;         font-weight: {BOLD}; } 这里的颜色background是控制当前高亮标签项背景颜色 .editor_text {         font: {MSGFONTSIZE} {FONT};         border: 1px solid {BORDERCOLOR};         border-top: 0px;         background: #FFFFFF; } 这里的颜色background是控制Discuz!代码模式下输入区域背景颜色 .editor_text textarea {         border: 0px;         background: #FFFFFF;         overflow: auto;         padding: 4px; } 这里的颜色background是控制Discuz!代码模式下textarea背景颜色 用户可根据自己论坛的需要对上面的js和css进行调整以达到合适的页面效果

2、关于title和alt标签颜色的问题


鼠标悬停以后出来的小框如何更改样式

鼠标悬停上去会出现一个tip,这个tip的背景以及文字颜色和样式在哪里改?






上图中title标签的颜色是在
根目录下/include/common.js中定义的
具体的css定义在该文件第221行
详情如下：
document.write(".cPopText { font-family: Tahoma, Verdana; background-color: #FFFFCC; border: 1px #000000 solid; font-size: 12px; padding-right: 4px; padding-left: 4px; line-height: 18px; padding-top: 2px; padding-bottom: 2px; visibility: hidden; filter: Alpha(Opacity=80)}");

详细解释如下：

.cPopText {
    font-family: Tahoma, Verdana;                     字体设置
    background-color: #FFFFCC;                        背景色设置
    border: 1px #000000 solid;                         边框宽度、颜色、式样设置
    font-size: 12px;                                         字号设置
    padding-right: 4px;                                    右边内边距
    padding-left: 4px;                                      左边内边距
    line-height: 18px;                                       行高
    padding-top: 2px;                                       上边内边距
    padding-bottom: 2px;                                 下边内边距
    visibility: hidden;                                          默认隐藏
    filter: Alpha(Opacity=80);                             透明度80％
    color:#666666;                                           文字颜色（新增加）
}

可根据上面的说明修改.cPopText这个css类，增加color即可对文字颜色进行控制，否则调用系统默认文字颜色。
另外，上面css中的各个属性也可以根据您论坛的需要进行调整。
可以将这些属性值用变量替换，方便在后台模板中进行调整。

3、内表头文字和当前板块新帖数量颜色的问题


怎么才能让各版区显示的今日贴数和内表头文字颜色不同啊


我使用了内表头文字颜色为白色，而我的栏内背景差不多白色的
所以导致各版区显示的今日贴数都看不出来了
怎么办啊
因为我栏头背景是蓝色的，所以内表头文字为白色才能对比出来啊
怎么办啊









内表头文字和当前板块新帖数量的css中所调用的颜色变量是同一个，在后台模板编辑内的

内表头文字颜色 {HEADERTEXT}

css.htm模板文件中二者所对应的css如下

内表头文字颜色对应的css是：
.header {
font: {FONTSIZE} {SMFONT} !important;
font-weight: {BOLD} !important;
font: {SMFONTSIZE} {SMFONT};
font-weight: {BOLD};
color: {HEADERTEXT};
{HEADERBGCODE};
height: 30px;
padding-left: 10px;
}
/*header内无链接文字*/


.header a {
color: {HEADERTEXT};
}
/*header内有链接文字*/

当前板块新帖数量所对应的css是：
.todayposts {
color: {HEADERTEXT};
}


如果您需要对二者颜色进行区分，可以在相应的css中（上文示例中加下划线部分）直接设置您所需要的颜色代码，
或者添加新的模板变量，
如：
.todayposts {
color: {TODAYPOSTS};
}

然后在后台中新增TODAYPOSTS变量，在变量后填入所需颜色
这样可以更方便的在后台中进行色彩的调整。

4、关于header的一些问题 header修改 header.htm中可调整性非常大，只要保证logo，广告和登陆信息菜单行这三个部分的逻辑判断正确，可以修改成你所需要的任何形式 官方模板只是表现形式的一种，你完全可以不受这种限制，去制作自己的header.htm。 在header.htm文件中代码如下： <div style="width: 100%; height: 78px; text-align: left;"> <!--{if !empty($advlist['headerbanner'])}--><div class="right"><br>$advlist[headerbanner]</div><!--{/if}--> <a href="$indexname">{BOARDLOGO}</a> </div> 修改 <div style="width:100%;height:78px;text-align:left;"> 可以根据你的需要自定义这个div的高度、宽度、背景（颜色或图片） 如： <div style="width:100%;height:78px;text-align:left;background:#000000;">                 －－－背景色 <div style="width:100%;height:78px;text-align:left;background:url(headerbg.gif)">       －－－背景图片 也可以给这个div定义一个css，在css.htm中增加，同时将这个css的各个值定义成变量，可以通过后台的模板风格方便修改 如： 在header.htm中：        <div class="headerbg"> 在css.htm中：        定义一个新的css       .herderbg{            width:{herderbgw};            height:{herderbgh};            background:{herderbgbg};         } 然后在后台的模板风格中增加这3个变量，并给变量赋值就可以了（变量尽可能重复利用，推荐调用风格中已定义的） ----------------------------------------------------------------------------------------------------------                             在header.htm文件中 找到下面这段代码 <div class="headerline" style="height: 6px"></div> <div class="headermenu"> <div class="maintable"> <div class="right" id="menu"> <!--{if $discuz_uid}-->         <span class="bold"><a href="viewpro.php?uid=$discuz_uid">$discuz_userss</a>: </span> <a href="$link_logout">{lang logout}</a>         <!--{if $maxpmnum}-->| <a href="pm.php" target="_blank">{lang pm}</a> <!--{/if}--> <!--{else}-->         <span class="bold">{lang guest}:  </span><a href="$link_register">{lang register}</a>         | <a href="$link_login">{lang login}</a> <!--{/if}--> <!--{if $memliststatus}-->| <a href="member.php?action=list">{lang memberlist}</a> <!--{/if}--> <!--{if $allowsearch || $qihoo_status}-->| <a href="search.php">{lang search}</a> <!--{/if}--> <!--{loop $plugins['links'] $plugin}-->         <!--{loop $plugin $module}-->              <!--{if !$module['adminid'] || ($module['adminid'] && $adminid > 0 && $module['adminid'] >= $adminid)}-->| $module[url] <!--{/if}-->         <!--{/loop}--> <!--{/loop}--> <!--{if $discuz_uid}-->|         <!--{if $jsmenu[4]}--><span id="my"><a href="my.php">{lang my}</a><script type="text/javascript">menuregister(false, "my")</script></span><!--{else}--><a href="my.php?item=threads">{lang show_mytopics}</a> | <a href="member.php?action=grouppermission">{lang my_permissions}</a><!--{/if}-->         <!--{if $jsmenu[2]}-->| <span id="memcp"><a href="memcp.php">{lang memcp}</a><script type="text/javascript">menuregister(false, "memcp")</script></span><!--{else}-->| <a href="memcp.php">{lang memcp}</a><!--{/if}--> <!--{/if}--> <!--{if $allowviewstats}-->| <!--{if $jsmenu[3]}--><span id="stats"><a href="stats.php">{lang statistics}</a><script type="text/javascript">menuregister(false, "stats")</script></span><!--{else}--><a href="stats.php">{lang statistics}</a><!--{/if}--><!--{/if}--> <!--{if $discuz_uid && in_array($adminid, array(1, 2, 3))}-->| <a href="admincp.php" target="_blank">{lang admincp}</a> <!--{/if}--> | <a href="faq.php">{lang faq}</a> </div></div></div> <div class="headerline" style="height: 6px"></div> 复制代码 在代码的头和尾分别增加如下代码即可 头： <div class="maintable"> <div style="width: {TABLEWIDTH}"> 尾： </div></div> 这样就可以使你需要修改的部分很下面的帖子列表宽度随后台设置值同时发生变化 ---------------------------------------------------------------------------------------------------------------------------------- 请问{HEADERMENUBGCODE}的替换代码在哪个文件里？ RT，我想把{HEADERMENUBGCODE}里的background-image: url("../../images/wow/index_10.jpg"); 改成：background-image: url("../../images/wow/index_10.jpg") no-repeat; 要改哪个文件？ css.htm文件中 .headermenu { {HEADERMENUBGCODE}; height: 30px; } 修改为 .headermenu { {HEADERMENUBGCODE} no-repeat; height: 30px; } 即可 但这样修改只适用于背景图方式，会对使用背景色的时候会产生影响，建议在后台定义新的css变量，然后在css.htm中用此方法替换。 -------------------------------------------------------------------------------------------------- 请看此图，如何移动一下位置？ 就是把这行菜单按钮：注册，游客，登记等 移动到图的下面，在图中右下角影响图的完整性。 模板目录中 header.htm文件里找到下面这段代码 放到你想放的位置就可以了 <div class="right" id="menu"> <!--{if $discuz_uid}-->         <span class="bold"><a href="viewpro.php?uid=$discuz_uid">$discuz_userss</a>: </span> <a href="$link_logout">{lang logout}</a>         <!--{if $maxpmnum}-->| <a href="pm.php" target="_blank">{lang pm}</a> <!--{/if}--> <!--{else}-->         <span class="bold">{lang guest}:  </span><a href="$link_register">{lang register}</a>         | <a href="$link_login">{lang login}</a> <!--{/if}--> <!--{if $memliststatus}-->| <a href="member.php?action=list">{lang memberlist}</a> <!--{/if}--> <!--{if $allowsearch || $qihoo_status}-->| <a href="search.php">{lang search}</a> <!--{/if}--> <!--{loop $plugins['links'] $plugin}-->         <!--{loop $plugin $module}-->              <!--{if !$module['adminid'] || ($module['adminid'] && $adminid > 0 && $module['adminid'] >= $adminid)}-->| $module[url] <!--{/if}-->         <!--{/loop}--> <!--{/loop}--> <!--{if $discuz_uid}-->|         <!--{if $jsmenu[4]}--><span id="my"><a href="my.php">{lang my}</a><script type="text/javascript">menuregister(false, "my")</script></span><!--{else}--><a href="my.php?item=threads">{lang show_mytopics}</a> | <a href="member.php?action=grouppermission">{lang my_permissions}</a><!--{/if}-->         <!--{if $jsmenu[2]}-->| <span id="memcp"><a href="memcp.php">{lang memcp}</a><script type="text/javascript">menuregister(false, "memcp")</script></span><!--{else}-->| <a href="memcp.php">{lang memcp}</a><!--{/if}--> <!--{/if}--> <!--{if $allowviewstats}-->| <!--{if $jsmenu[3]}--><span id="stats"><a href="stats.php">{lang statistics}</a><script type="text/javascript">menuregister(false, "stats")</script></span><!--{else}--><a href="stats.php">{lang statistics}</a><!--{/if}--><!--{/if}--> <!--{if $discuz_uid && in_array($adminid, array(1, 2, 3))}-->| <a href="admincp.php" target="_blank">{lang admincp}</a> <!--{/if}--> | <a href="faq.php">{lang faq}</a> </div> 复制代码

[ 本帖最后由 dfox 于 2006-9-12 13:45 编辑 ]

5、如何更改右边滚动栏的颜色
如何更改右边滚动栏的颜色

修改css.htm中红字部分

body {

    margin: 0px;

    scrollbar-base-color: {ALTBG1};

    scrollbar-arrow-color: {BORDERCOLOR};

    font: {FONTSIZE} {FONT};

    {BGCODE};

}


关于滚动调更详细的调整如下：

1. body {SCROLLBAR-FACE-COLOR:#3333FF;(立体滚动条凸出部分的颜色)
   
2. SCROLLBAR-HIGHLIGHT-COLOR:#505050;(滚动条空白部分的颜色)
   
3. SCROLLBAR-SHADOW-COLOR:#fc2400;(立体滚动条阴影的颜色)
   
4. SCROLLBAR-ARROW-COLOR:#666666;(上下按钮上三角箭头的颜色)
   
5. SCROLLBAR-BASE-COLOR:#333333; (滚动条的基本颜色)
   
6. SCROLLBAR-DARK-SHADOW-COLOR:#b4fc48} (立体滚动条强阴影的颜色)

复制代码

后面的16位颜色值你可以随意更改，括号内是解释说明，在输入时请不要插入。

6、js下拉菜单 右角边的阴影  
这个下拉菜单 右角边的阴影 怎么改？？？？

图片附件: 未标题-3.gif (2006-9-10 23:02, 3.99 K)




在/include/目录下

menu.js中找到126行

1. this.menuobj.style.filter += "progidXImageTransform.Microsoft.shadow(direction=135,color=#CCCCCC,strength=2)";

复制代码

修改这里的color就可以了

137行

1. tds.style.filter += "progidXImageTransform.Microsoft.Alpha(opacity=85,finishOpacity=100,style=0)";

复制代码

opacity=85,这里可以调整透明度

7、如何去掉表格发帖图标中间的空白处
  
如何去掉中间的空白处呢？


如何去掉中间的空白处呢？我已经去掉了发帖图标！


修改模板文件中的forumdisplay.htm，去掉发帖图标那个td,

<td class="f_icon">$thread['icon']</td>

同时上面二级表头里 相对应的td也要删掉，
还要记得修改css.htm把这里对各个td宽度定义的百分比，
调整到合适的宽度就可以了

8、如何修改footer中文字的大小

怎么把下面的字体改大点



在模板文件footer.htm中找到

1. <td style="font-size: 11px">
   
2. Powered by <a href="https://discuz.dismall.com" target="_blank" style="color: blue"><b>Discuz!</b></a> <b style="color:#68d300">$version</b><!--{if $boardlicensed}--><a href="http://www.discuz.com/index.php?action=certificate&host=$_SERVER[HTTP_HOST]" target="_blank">Licensed</a><!--{/if}-->
   
3. &copy; 2001-2006 <a href="http://www.comsenz.com" target="_blank">Comsenz Inc.</a>
   
4. {eval updatesession();}
   
5. <!--{if debuginfo()}-->
   
6. <br>Processed in $debuginfo[time] second(s), $debuginfo[queries] queries<!--{if $gzipcompress}-->, Gzip enabled<!--{/if}-->
   
7. <!--{/if}-->
   
8. </td>

复制代码

修改这里的
<td style="font-size: 11px">
改成你自己需要的文字大小就可以了

如何把边框线显示出来？
9、如何将帖子论坛列表中表格间隔闲显示出来

就是“原图”里面需要把“修改图”的边框线显示出来 怎么修改呢？:)



图片附件: 原图.jpg (2006-9-6 11:42, 50.61 K)



图片附件: 修改图.jpg (2006-9-6 11:42, 46.09 K)




修改css.htm中的
.row td {
        padding: {TABLESPACE}px;
        border-bottom: 1px solid {BGBORDER};
}
.row1 td {
        padding: {TABLESPACE}px;
        border-bottom: 1px solid {BGBORDER};
}

每个class里增加

border-left:1px solid {BGBORDER};

同时将每个调用该class的行的第一个td增加一个

style="border-left:none"

就可以避免左侧多一条边线的问题
相对修改的模板文件较多，我就不一一罗列了，自己努力一下