爱秀代码 » Sclub模板修改与美化 » 首页添加自定义板块

icode 发表于 2018-11-13 21:28

首页添加自定义板块

如图：
[attach]652[/attach]

预览地址
[url]http://icode.258club.com/index.php?styleid=16[/url]

安装方法：
1、打开discuz模板找到[code]<!--{if $_DCACHE['forumlinks'][0] || $_DCACHE['forumlinks'][1] || $_DCACHE['forumlinks'][2]}-->[/code]在上边加[code]<div id="wj-tb" class="wj-chat">
<ul>
<li id="wj-tbm_1" onmouseover="x:HoverLiz(1);" class="wj-tlb-hover1">AAAAA</li>
<li id="wj-tbm_2" onmouseover="x:HoverLiz(2);" class="wj-tlb-normal1">BBBBB</li>
<li id="wj-tbm_3" onmouseover="x:HoverLiz(3);" class="wj-tlb-normal1">CCCCC</li>
</ul>
</div>

<div style="height: 380px;border: solid #DDDDDD;border-width: 1px;border-top: none;background: #fff;border-radius: 5px;margin-bottom: 20px;">
<div class="wj-tlb-dism" id="wj-tbcm_01">
<ul style="padding-top: 24px;margin-left: 11px;">
{eval request('主题列表_573');}
</ul>
</div>

<div class="wj-tlb-undism" id="wj-tbcm_02">
<ul style="padding-top: 24px;margin-left: 11px;">
{eval request('主题列表_573_aA4');}
</ul>
</div>

<div class="wj-tlb-undism" id="wj-tbcm_03">
<ul style="padding-top: 24px;margin-left: 11px;">
{eval request('主题列表_573_mIK');}
</ul>
</div>
</div>

<script>
function g(o) {
    return document.getElementById(o);
}
function HoverLiz(n) {
    for(var i=1;i<=3;i++) {
        g('wj-tbm_'+i).className='wj-tlb-normal1';
        g('wj-tbcm_0'+i).className='wj-tlb-undism';
    }
    g('wj-tbcm_0'+n).className='wj-tlb-dism';
    g('wj-tbm_'+n).className='wj-tlb-hover1';
}
</script>[/code]2、在css_append加[code].wj-chat {
background: #fff;
    line-height: 45px;
    margin-bottom: 20px;
    font-size: 16px;
    border-radius: 5px;
    background-color: #ecf2f4;
    overflow: hidden;
}
.wj-chat ul {
height: 32px;
padding-left: 5px;
line-height: 30px;
}
.wj-chat li {
float: left;
text-align: center;
width: 150px;
}
.wj-tlb-hover1 {
background: #FFF;
font-weight: 700;
color: #333;
display: block;
margin-top: 2px;
}
.wj-tlb-normal1 {
display: block;
}
.wj-tlb-dism { display: block; }
.wj-tlb-undism { display: none; }
ul,li { list-style: none; }


.wj-tlb-dism li {
float: left;
white-space: nowrap;
margin: 0 10px 10px 0;
text-overflow: ellipsis;
padding: 10px;
border: solid #DDDDDD;
border-width: 1px;
background-color: #F8F8F8;
text-align: center;
overflow: hidden;
}[/code]3、解压下面文件后在后台数据调用导入
[attach]653[/attach]

梅子 发表于 2018-11-13 23:11

懵逼.jpg

麻城生活网 发表于 2018-11-14 07:53

楼主发帖辛苦了，谢谢楼主的分享！

天使小小 发表于 2018-11-14 09:30

楼主发帖辛苦了，谢谢楼主的分享！

波斯佳人 发表于 2018-11-15 10:02

这个效果简直不要太赞，

icode 发表于 2020-2-11 11:48

@邹城老王@云惠果果@雨@开心@未知@眼神黯淡@未来未来呀@王现鹏@恒小杰@啊哈哈@張飛@三国人物@小豪@黑凤梨@打印机@跟上脚步@长度长度@初学者@小安@刘阳田甜@奇橙@喵喵娘@阿方方@閻羅@雷锋游戏@路途@啊哈雷@北京大新@规定@今天今天@上磜@我来了@翔子@起什么名字@夜影夜空@米酷@琪乐@众望所归@叉先生@皓皓兒@哥哥@李可可@李建军@我爱建站@一个名字@中文注册@读书郎@琼斯博士@竞技鱼@邢若櫻@测试账号五@天使小小@零九三零@无界@Yenifer@老闆@少女@howqun@芙蓉姐姐@麻城生活网@梅子@無名@icode

李奥 发表于 2023-10-14 12:56

:loveliness:看起来不错

查看完整版本: 首页添加自定义板块