巧用firebug 对Discuz!模板进行样式调试修改美化

大师兄 · 发表于 2017-12-16 18:16:59

亲注册登录道勤网-可以查看更多帖子内容哦！（包涵精彩图片、文字详情等）请您及时注册登录-www.daoqin.net

您需要登录才可以下载或查看，没有账号？立即注册

x

discuz! 模板的教程之前已经写过很多了，Discuz模板问题我经常都会说推荐大家使用火狐的firebug来看看，很多同学在修改一些文件或者模板的时候都不会找问题，看完今天的内容你应该会一些简单的使用了。
首先，推荐大家查看：火狐浏览器firebug的使用视频教程，DiscuzX2.5模板全局样式表 - common.css 注释和模板缓存、CSS继承规范和CSS缓存机制这3篇教程。
然后，我们再来认识下Discuz!的样式存放的规律。样式文件存放在 tempate/default/common目录下common.css是共用的样式文件，几乎每个页面都需要用到其中的样式， module.css 是每个模块中要用到样式文件，下面我们来查看module.css样式文件中的样式分类规律，module.css样式，中添加有详细的注释，通过注释将样式分类。如：

/** misc::invite,group,forum::viewthread,portal::view,home::space **/
/* .usl -> 用于类似群组中邀请好友中的好友列表 by Pony */
.usl { overflow: scroll; overflow-x: hidden; padding: 5px; width: 580px; height: 280px; }
.usl2 { width: auto; border: dashed {WRAPBORDERCOLOR}; border-width: 0 1px 1px; }
.usl li { overflow: hidden; float: left; margin: 3px; width: 134px; height: 64px; }
.usl a { display: block; padding: 4px; border: 1px solid {WRAPBG}; }
.usl a:hover { text-decoration: none; border: 1px solid; border-color: #DDD #999 #999 #DDD; background: {COMMONBG}; }
.usl .avt { float: left; margin-right: 5px; width: 52px; height: 52px; border: 1px solid {COMMONBORDER}; background-color: {WRAPBG}; background-position: 2px 2px; background-repeat: no-repeat; zoom: 1; }
.usl .d { float: left; width: 65px; height: 54px; overflow: hidden; word-wrap: break-word; }
.usl li.a a, .usl li.a a:hover { border-color: #F90; background-color: #FFF1E1; }
.usl li.a .avt span { display: block; margin-left: 2px; width: 50px; height: 50px; background: url({IMGDIR}/mark.png) no-repeat left bottom; }
.usd { padding: 5px 10px 0; border: solid {WRAPBORDERCOLOR}; border-width: 1px 0; background-color: {COMMONBG}; }
.usd2 { border-width: 1px; border-style: dashed; }
.usd li { float: left; margin-right: 1%; width: 48%; }
/** end **/

复制代码

仔细查看，注释开始处 /** misc::invite,group,forum::viewthread,portal::view,home::space **/，这表示这些样式将邀请、群组、帖子内容页、文章内容页、个人空间中通过。Discuz! 的使用样式不是直接使用的template/default/common下的样式文件，而是读取的缓存文件（通过将样式文件进行解析），在这里不对样式解析函数进行介绍，有兴趣的可以阅读 source/function/cache/cache_style.php 中的代码。解析之后的样式文件是存在在 data/cache目录下。

firebug 与 Discuz! 相结合

现在，我们来了解firebug 中样式的特征，

巧用firebug 对Discuz!模板进行样式调试修改美化

当将鼠标放在样式的加载路径上会弹出样式的详细地址，从第二张图中我们能够得到结论，这里的样式是来自于common/common.css目录，从第一张图中我们能够得知样式是来自于 module.css 中并且在分类的时候应该有forum::viewthread

先在firebug的样式框中，对样式进行调试满足要之后，我们到 template/default/common 目录下找到中firebug样式得知的样式文件，搜索关键字，更改完样式文件之后。最后，到后台更新一次缓存。

道勤主机提供365天*24小时全年全天无休、实时在线、零等待的售后技术支持。竭力为您免费处理您在使用道勤主机过程中所遇到的一切问题! 如果您是道勤主机用户，那么您可以通过QQ【792472177】、售后QQ【59133755】、旺旺【诠释意念】、微信：q792472177免费电话、后台提交工单这些方式联系道勤主机客服！如果您不是我们的客户也没问题，点击页面最右边的企业QQ在线咨询图标联系我们并购买后，我们为您免费进行无缝搬家服务，让您享受网站零访问延迟的迁移到道勤主机的服务！