discuz论坛模块模板的修改

<div class="module cl xlxl1"><ul>[loop]<li><em style="float:right; padding-right:10px;">{dateline}</em><label><a href="{forumurl}"{target}style="color:#ff6600">[{forumname}]</a></label> <a href="{url}" title="{title}"{target}>{title}</a></li>[/loop]</ul></div>

这个相对比较简单，只要你懂DIY那应该就没有问题，而我们最终的结果则如图中所示：

2

想要直观的看到效果最好在后台添加两条以上信息，这样方便前台调用的时候能看到效果，当然调用的只是比较热点的信息的，那后台添加的信息还要置顶和加精华（首先声明幻灯调用的是论坛新闻）

3

首先是在网站首页点击右上角DIY-----选择高级，然后进入以后首先就是在想要加幻灯的位置加一个框（期初要做好模块的规划）：点击左上角框架选择一个想要的样式直接鼠标点击，不要放开拖到下方想要放的位置（记得把加的框架标题删掉：幻灯不需要标题）

4

添加完框架以后就是添加模块了，点击左上角框架后的模块：模块----论坛类---帖子模块，直接点击不要放开拖拽到想要的位置框架里，后面再弹出的窗口里添加信息这些截图里都有，并且图标指示的都是必须要填写的，这样才能更好的显示，而具体信息还是根据你自己的来填写（最后弹出的框什么都不要填）

5

当第四步做完以后就完成了，而想要的效果也就显示出来了，虽然是系统默认带的，但是本人感觉还可以。如果你要是不满意，那就继续跟着往下看吧！

END

自定义Discuz首页幻灯

这个相对来说比第一种麻烦了点，但是相对的效果则可以自己控制。而其中的原理就是自己定义要显示的样式（也就是上方第四步里的第三张图那个显示样式）而这个需要在后台里添加：

记得期初建立的就是门户网站，所以需要加幻灯。首先打开后台点击登录，选择门户-----模块模板---添加（当然你也可以编辑系统自带的），下一步就是选择，这个没有什么具体要求，可以选择一个提交就行了

这一步就开始更改源码了，这个就需要懂得源码，不然你只能复制粘贴别人写好的：

<div class="bignews slidebox " > <!--幻灯片开始-->

<div class="slideshow">[loop]<a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}"/></a>[/loop]</div><!--展示--> 

<div class="btns slidebar"> 

[loop1] 

<em>{currentorder}</em> 

[/loop1] 

</div> <!--幻灯片控制展示-->

</div> <!--幻灯片结束-->

<script type="text/javascript">

runslideshow(); 

</script>

最后就是保存一下就完成了。

上面完成后就可以添加了，而步骤跟第一种一样就是在选择显示样式的时候选择自己做的那个就Ok了！（这里提一点，后台添加的时候一定要记住添加到那个模块分类里面了，然后再前台选择模块分类的时候才能找到）

如果想在默认模板上简单的修改、附加扩展css，只需要在你对应的模板套系下手动添加一个对应的扩展css文件就可以了，例如你想修改或者添加commoncss中的代码，只需要在自己创建的模板套系目录的对应位置：common文件夹下新建一个extend_commoncss文件，然后将自己要修改或者扩展的css代码。将在生成缓存css时，自动追加到默认模板的css文件tmplate/default/common/commoncss解析成你当前的模板id缓存文件。

CSS 继承规范：

Discuz! X系列产品中 CSS 文件会在缓存时按照以下顺序进行合并：

template/default/css 文件。

当默认模板是非默认模板时，template/模板目录/extend_css 文件 或 template/模板目录/css。

当某插件启用时，source/plugin/插件目录/template/extend_css 文件。

因此非默认模板目录中的 CSS 属性将继承默认模板中的 CSS 属性，插件目录中的 CSS 文件将继承前二者的 CSS 属性。

CSS 自身的集成顺序为：当 CSS 属性名称相同时，CSS 文件中，写在后面的替换前面的代码。

CSS书写规范：

属性写在一行内，属性之间、属性名和值之间以及属性与“{}”之间须有空格，例如：class { width: 400px; height: 300px; } 。

属性的书写顺序：

位置：position,left,right,float

盒模型属性：display,margin,padding,width,height

边框与背景：border,background

段落与文本：line-height,text-indent,font,color,text-decoration,

其他属性：overflow,cursor,visibility,

针对特殊浏览器的属性，应写在标准属性之前，例如：-webkit-box-shadow:; -moz-box-shadow:; box-shaow:;

按照元素模型由外及内，由整体到细节书写，大致分为五组：

谨慎添加新的选择符规则，尤其不可滥用 id，尽可能继承和复用已有样式

选择符、属性、值均用小写（格式的颜色值除外），缩写的选择符名称须说明缩写前的全称，例如 cl -> Clearfix

勿使用冗余低效的 CSS 写法，例如：ul li a span { }

慎用 !important

建议使用在 class/id 名称中的词语

表示状态：a->active

表示结构：h->header,c->content,f->footer

表示区域：mn->main,sd->side,nv-navigation,mu->menu

表示样式：l-list,tab,p_pop

常用css实例：

兼容IE浏览器css hack

所有 IE浏览器适用：

ie_all foo { }

IE6 专用：

ie6 foo { }

IE7 专用：

ie7 foo { }

IE8 专用：

ie8 foo { }

浮动样式及浮动元素父元素高度自适应样式代码：

z/y 浮动 left/right z { float: left; } y { float: right; }

cl:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } cl { zoom: 1; }

大标题字体：

wx, ph { font-family: "Microsoft YaHei", "Hiragino Sans GB", STHeiti, Tahoma, SimHei, sans-serif; font-weight: 100; }

外边距样式：

mtn { margin-top: 5px !important; }

mbn { margin-bottom: 5px !important; }

mtm { margin-top: 10px !important; }

mbm { margin-bottom: 10px !important; }

mtw { margin-top: 20px !important; }

mbw { margin-bottom: 20px !important; }

文字字体大小：

xs0 { font-family: {SMFONT}; font-size: {SMFONTSIZE}; -webkit-text-size-adjust: none; }

xs1 { font-size: 12px !important; }

xs2 { font-size: 14px !important; }

xs3 { font-size: 16px !important; }

内边距样式：

ptn { padding-top: 5px !important; }

pbn { padding-bottom: 5px !important; }

ptm { padding-top: 10px !important; }

pbm { padding-bottom: 10px !important; }

ptw { padding-top: 20px !important; }

pbw { padding-bottom: 20px !important; }

modulecss文件架构解析（此文件必须按照格式编写）：

/ group::index /

/ 群组 index 模块使用的CSS /

/ end /

/ group::index,forum::index /

/ 群组 index 和 论坛 index 模块使用的CSS /

/ end /

/ forum /

/ 论坛 所有模块使用的CSS /

/ end /

实现模块化css分部加载！格式固定多个模块用”，“隔开例如：

/ misc::invite,group,forum::viewthread,portal::view,home::space /

这个文件的分部加载是对应程序地址例如：forumphpmod=forumdisplay，应当按照CURSCRIPT::$mod格式写即：forum::forumdisplay。