[Discuz7.2模板教程] 首页各项修改方法集合!

一楼：LOGO的修改

二楼：导航条的修改!

三楼：当前位置的修改

四楼：发帖/回复按钮的修改介绍

五楼：首页顶部登陆状态提示信息!

六楼：版块分区名的修改!

七楼：首页版块列表的修改!

LOGO的修改:
版权:cr180 QQ:250997329 未经过本人同意任何人任何网站不得转载!
文件:header.htm

查找:<a href="$indexname" title="$bbname">{BOARDLOGO}</a>

$indexname  读取论坛后台-全局-站点设置里的[首页文件名] 默认为:index.php

$bbname  读取论坛后台-全局-站点设置里的[论坛名称]


{BOARDLOGO} 读取论坛后台-界面-风格管理中的logo  这里可以填写绝对地址




如果只填写logo.gif,则调用基础图片目录 {IMGDIR}中的logo.gif

基础图片目录 {IMGDIR}可以在后台进行调整!为空则默认读取 images/default

                       导航条的修改!
                    
修改文件:css_common.htm
修改代码后需要在界面风格里面更新缓存才能看见效果]
版权:cr180 QQ:250997329 未经过本人同意任何人任何网站不得转载!

效果一: 调整导航按钮到左边的修改:

打开:css_common.htm  

查找: #menu { position: absolute; right: 0; bottom: 0; _bottom: -2px; height: 26px; }

修改成:#menu { position: absolute; left: 0; bottom: 0; _bottom: -2px; height: 26px; }

效果二:调整导航按钮到个人信息下方的修改:

打开:css_common.htm  

查找: #menu { position: absolute; right: 0; bottom: 0; _bottom: -2px; height: 26px; }

修改成:#menu {height: 26px; float:right}

                当前位置的修改
                                   
修改文件:css_common.htm
修改代码后需要在界面风格里面更新缓存才能看见效果
版权:cr180 QQ:250997329 未经过本人同意任何人任何网站不得转载!

效果一:     
黄色背景,灰色边框,蓝色文字

打开:css_common.htm  

查找: #nav { margin: -8px auto 0; background: url({IMGDIR}/icon_nav.gif) no-repeat 0 50%; text-align: left; text-indent: 25px; line-height: 3em; }
#nav, #nav a { color: {MENUHOVERTEXT}; }

修改成:#nav { color:#36c; background:#fffecf; padding:0; margin-bottom:10px; border:#ccc 1px solid; text-align: left;text-indent: 25px;}
#nav a{ color:#36c;}


如果需要小图标,则使用下面的修改方法:
修改成:#nav { color:#36c; background:url({IMGDIR}/icon_nav.gif) no-repeat 0 50% #fffecf; padding:0; margin-bottom:10px; border:#ccc 1px solid; text-align: left;text-indent: 25px;}
#nav a{ color:#36c;}

修改代码介绍:

color:#36c;  文字颜色为蓝色(此颜色代码为简写,和#3366cc一样)

background:#fffecf;    背景为黄色

background:url({IMGDIR}/icon_nav.gif) no-repeat 0 50% #fffecf;
依次解释为:背景调用icon_nav.gif图片   不平铺(唯一)  纵向居中 叠加黄色

border:#ccc 1px solid; 边框颜色为灰色 宽度一个像素 实线!

text-align: left;  文字居左显示

text-indent: 25px; 文字缩进2个汉字

　
　
　
　
　

发帖/回复按钮的修改介绍 文件:css_script.htm
注意:修改这个文件以后需要更新缓存!!!不是更新css缓存!
版权:cr180 QQ:250997329 未经过本人同意任何人任何网站不得转载!

　
　

.postbtn, .replybtn { width: 67px; height: 30px; background: url({IMGDIR}/newtopic.gif) no-repeat 0 0; font-size: 14px; font-weight: 700; line-height: 28px; *line-height: 32px; text-align: center; overflow: hidden; }

以上代码介绍:
.postbtn, .replybtn  发帖和回复按钮共同属性
width: 67px; 宽度67像素
height: 30px; 高度30像素
background: url({IMGDIR}/newtopic.gif) no-repeat 0 0; 背景图片为newtopic.gif  不平铺
font-size: 14px;   字体大小14像素
font-weight: 700; 加粗  
line-height: 28px;  高度为28像素纵向居中
*line-height: 32px; 在IE6下面为32像素纵向居中

  .replybtn { background-image: url({IMGDIR}/reply.gif); }

回复按钮背景为reply.gif

这里的回复按钮代码为什么只指定背景,而没有高度宽度之类的呢?
答:因为在上面的[发帖和回复按钮共同属性]代码中回复按钮已经有这些属性了,所以只需要重新申明背景调用reply.gif即可

  .postbtn a, .replybtn a { display: block; padding-left: 5px; color: #FFF; letter-spacing: 5px; }
同学们只需要明白:按钮中的文字颜色为白色,如果好奇另外的 可以去百度下

  .postbtn a:hover, .replybtn a:hover { text-decoration: none; }
鼠标经过按钮,文字连接没有下划线

综合以上解释,我们就可以进行修改了下面写一个简单例子:

1. 
   
2. .postbtn, .replybtn { width:100px; height: 30px; background:#000; font-size: 14px; font-weight: 700; line-height: 28px; *line-height: 32px; text-align: center; overflow: hidden; }
   
3. .replybtn { background-image: url({IMGDIR}/reply.gif); }
   
4. .postbtn a, .replybtn a { display: block; padding-left: 5px; color: #FFF; letter-spacing: 5px; }
   
5. .postbtn a:hover, .replybtn a:hover { text-decoration: none; }
   

复制代码

至于[发帖]类似这个的文字在哪里修改呢?
答:
打开templates/default/templates.lang.php (注意:默认模板内的变量文字都可以在这个文件里面修改!)

查找:
'reply' => '回复',
'send_posts' => '发帖',

修改文字内容即可

首页顶部登陆状态提示信息!


index_header.htm

<!--{if !$discuz_uid}-->
{lang home_welcome_guest}
<!--{else}-->
{lang home_welcome} {$discuz_userss}, <!--{if $lastvisit}-->{lang home_lastvisit} {$lastvisit}, <!--{/if}--><a href="my.php?item=threads" class="lightlink" target="_blank">{lang my_posts}</a>, <a href="search.php?srchfrom=$newthreads&searchsubmit=yes" class="lightlink">{lang show_newthreads}</a>, <a href="member.php?action=markread" id="ajax_markread" class="lightlink">{lang mark_read}</a>
<!--{/if}-->

以上代码解释:
版权:cr180 QQ:250997329 未经过本人同意任何人任何网站不得转载!
未登录时显示红色代码
登陆后显示蓝色代码

这里需要注意的是:{lang home_welcome_guest}
这一句调用出来的内容在templates.lang.php文件里面修改
查找:'home_welcome_guest' 修改'home_welcome_guest'里面的内容即可

版块分区名的修改!

修改文件:discuz.htm
另外还涉及列表页面子板块显示文件:forumdisplay_subforum.htm

版权:cr180 QQ:250997329 未经过本人同意任何人任何网站不得转载!

效果一:


样式修改:

打开:css_common.htm

查找:  .content .list h3 { padding-left: 6px; color: {MIDTEXT}; line-height: 35px; }

替换成:  .content .list h3 { padding-left: 6px; color: #fff;height: 31px;  line-height: 31px; background:url({IMGDIR}/navbg.gif); }
            .list h3 a,.list h3 em,#online h3 { color:#fff}

代码解释:
左内边距离6像素
颜色为后台界面风格里的[链接文字色]
行高35像素
--------------------------------------
修改后的代码解释:
左内边距离6像素
颜色:白色
高度:31像素    行高:31像素  

背景调用后台界面风格里的[界面基础图片目录 {IMGDIR}:]navbg.gif

文字链接:白色

这样修改右边的版块隐藏按钮会没有背景,
解决方法:https://discuz.dismall.com/viewthread.php?tid=1496364&page=2&extra=#pid12621871

首页版块列表的修改!



涉及修改文件: css_common.htm discuz.htm
另外还涉及列表页面子板块显示文件:forumdisplay_subforum.htm

去掉新老贴图标

修改文件: css_common.htm

查找:
.list th { background: url({IMGDIR}/forum.gif) 5px 10px no-repeat; padding-left: 45px !important; }

.list th.new { background-image: url({IMGDIR}/forum_new.gif); }

修改成:
/*.list th { background: url({IMGDIR}/forum.gif) 5px 10px no-repeat; padding-left: 45px !important; }*/
/*.list th.new { background-image: url({IMGDIR}/forum_new.gif); }*/


这里为什么要加注释代码而不直接删除这两句呢?

答:方便日后恢复,如果以后又突然想要恢复过来,直接去了/*  */ 这两个注释代码就可以了

文字大小颜色调整

横排美化

版权:cr180 QQ:250997329 未经过本人同意任何人任何网站不得转载!

占楼更新占楼更新占楼更新占楼更新

占楼更新占楼更新占楼更新占楼更新占楼更新