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

[复制链接]
ARCHY明星会员实名认证 发表于 2012-11-9 10:43:14 [安装使用] 显示全部楼层 |阅读模式 上一主题 下一主题
discuz使用视频教程

马上注册,一起探讨正确快速的建站方法

您需要 登录 才可以下载或查看,没有帐号?快速注册

x
discuz! 模板的教程之前已经写过很多了,Discuz模板问题我经常都会说推荐大家使用火狐的firebug来看看,很多同学在修改一些文件或者模板的时候都不会找问题,看完今天的内容你应该会一些简单的使用了。

首先,推荐大家查看:火狐浏览器firebug的使用视频教程DiscuzX2.5模板全局样式表 - common.css 注释模板缓存、CSS继承规范和CSS缓存机制这3篇教程。

然后,我们再来认识下Discuz!的样式存放的规律。  样式文件存放在 tempate/default/common目录下common.css是共用的样式文件,几乎每个页面都需要用到其中的样式, module.css 是每个模块中要用到样式文件,下面我们来查看module.css样式文件中的样式分类规律,module.css样式,中添加有详细的注释,通过注释将样式分类。如:
  1. /** misc::invite,group,forum::viewthread,portal::view,home::space **/
  2.         /* .usl -> 用于类似群组中邀请好友中的好友列表 by Pony */
  3.                 .usl { overflow: scroll; overflow-x: hidden; padding: 5px; width: 580px; height: 280px; }
  4.                 .usl2 { width: auto; border: dashed {WRAPBORDERCOLOR}; border-width: 0 1px 1px; }
  5.                         .usl li { overflow: hidden; float: left; margin: 3px; width: 134px; height: 64px; }
  6.                         .usl a { display: block; padding: 4px; border: 1px solid {WRAPBG}; }
  7.                                 .usl a:hover { text-decoration: none; border: 1px solid; border-color: #DDD #999 #999 #DDD; background: {COMMONBG}; }
  8.                         .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; }
  9.                         .usl .d { float: left; width: 65px; height: 54px; overflow: hidden; word-wrap: break-word; }
  10.                         .usl li.a a, .usl li.a a:hover { border-color: #F90; background-color: #FFF1E1; }
  11.                         .usl li.a .avt span { display: block; margin-left: 2px; width: 50px; height: 50px; background: url({IMGDIR}/mark.png) no-repeat left bottom; }
  12.                 .usd { padding: 5px 10px 0; border: solid {WRAPBORDERCOLOR}; border-width: 1px 0; background-color: {COMMONBG}; }
  13.                 .usd2 { border-width: 1px; border-style: dashed; }
  14.                         .usd li { float: left; margin-right: 1%; width: 48%; }
  15. /** 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查看CSS路径

用firebug查看CSS路径

用firebug查看html代码

用firebug查看html代码


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

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




上一篇:Discuz! 邮件发送失败排查思路
下一篇:升级后DISCUZ!X2.5后台显示有待处理事项,点击后没有显示处理的问题临时解决方案

大神点评22

lalie888 发表于 2012-11-9 15:58:53 [安装使用] 显示全部楼层
确实不错,感谢楼主
爱实翡咚 发表于 2012-11-9 15:58:53 [安装使用] 显示全部楼层
长时间没来看了 ~~  
gunacus 发表于 2012-11-9 15:58:53 [安装使用] 显示全部楼层
很好!很强大!  
 发表于 2012-11-9 22:38:01
不错的方法
 发表于 2012-11-26 16:51:38
哈,很好,收下了
天天加分 发表于 2012-11-30 17:11:17 [安装使用] 显示全部楼层
确实很不错的啊,学习了
好玩的手机游戏http://www.88130.cn
非一般感觉明星会员实名认证 发表于 2012-12-7 10:15:04 [安装使用] 显示全部楼层
  学习啦
神马都是浮云... ...
幸福一家子 发表于 2012-12-18 14:44:13 [安装使用] 显示全部楼层
是站长朋友不可缺少的调试工具,也是新手的最好的工具
大地明灯 发表于 2013-1-17 19:30:11 [安装使用] 显示全部楼层
希望持续更新,谢谢!!
维拉贝 发表于 2013-1-17 20:31:59 [安装使用] 显示全部楼层
太复杂了,
不过还是学习了
拒绝裸奔的鱼 发表于 2013-3-1 09:32:55 [安装使用] 显示全部楼层
还是没学会模板的制作
空、宁 发表于 2013-3-26 17:15:27 [安装使用] 显示全部楼层
鼎志服饰 发表于 2013-3-29 09:55:47 [安装使用] 显示全部楼层
说些什么呢
可可乐乐 发表于 2013-3-30 19:51:50 [安装使用] 显示全部楼层
学习了。
您需要登录后才可以回帖 登录 | 快速注册

本版积分规则

快速回复 返回顶部 返回列表