IT博客汇 | Discuz 首页 DIY 自定义板块列表样式

Discuz 首页 DIY 自定义板块列表样式

Forece发表于 2015-12-04 01:42:48

经常看到有的 Discuz 模板在 Portal 首页做出论坛板块列表的样式。但是之前一直没研究怎么实现的。今天 Forece 随便研究了一下。用 DIY 实现了这个原理。其实还是思路问题。用Discuz自带的DIY和CSS就可以搞定了。

首先看下效果图：

具体步骤：
1、首先你需要一个diy框架，具体怎么弄我就不说了，自己用默认自带的或者自定义的都可以。

2、添加模块（论坛类-板块模块）
里边属性自己随意设置，上级板块选择全部板块，模块标题写上板块地图之类的名称，然后模板要自定义，代码如下：

1
2
3
4
5
6
7
8
9

<div class="module cl xl xl1">
[loop]
<dl class="cl">
<i class="xuh">{currentorder}</i>
<dt><em class="y">今日新帖（<i class="ntext">{todayposts}</i>）</em><a href="{url}" title="{title}" target="_blank">{title}</a></dt>
<dd>{summary}</dd>
</dl>
[/loop]
</div>

3、模块样式
里边有个指定class，填写portal_content

4、在模板css里边加上我们自定义的CSS，一般在论坛根目录下\template\xxx\common\extend_common.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

.portal_content .title {
height:40px;
line-height:40px;
border-bottom:1px solid #ed8163;
padding:0px;
}

.portal_content .titletext {
font-size:18px;
font-family:Microsoft Yahei;
font-weight:700;
}

.portal_content dl {
float:left;
width:255px;
padding:6px 8px;
background:#F7F7F7;
border:1px solid #DCDCDC;
margin:13px 12px 0px 0px;
position:relative;
}

.portal_content .xuh {
position:absolute;
top:-1px;
left:-1px;
display:block;
width:32px;
height:32px;
line-height:32px;
text-align:center;
background:#DCDCDC;
border-radius:5px 0 5px 0;
font-size:18px;
color:#fff;
font-style:normal;
}

.portal_content dt em {
font-size:12px;
color:#949599;
}

.portal_content dt a {
font-size:16px;
color:#4c4c4c;
}

.portal_content dt {
font-weight:500;
height:24px;
line-height:24px;
overflow:hidden;
margin-left:38px;
}

.portal_content dd {
font-size:12px;
color:#949599;
height:30px;
line-height:30px;
overflow:hidden;
margin-bottom:0px;
}

.portal_content a:hover{ color:#DF3237;}
.portal_content dl:hover a{ color:#df3237;}
.portal_content dl:hover{ border:1px solid #F5696D}
.portal_content dl:hover .xuh{ background:#F5696D;}

5、再把框架里边的标题、边框都删掉就可以了。刷新缓存。漂亮炫酷的DIY板块列表就制作完成了。