一个针对dux主题的美化修改教程,使用dux主题功能很强大,用的人也多,不过要想修改可就麻烦了,因为这套主题的代码编写,想要修改的话,是功能的差,因为开始设计的时候就没有考虑让用户随意修改的意图, 表示很多教程对于别的主题能用,但是到了dux主题就失效了,好啦,LonHowe Blog说说如何修改dux主题的底部样式, 就是我们全站底部推广区,这里给出修改后的美化效果。
修改前:
修改后:
修改代码:
带后台功能的修改方法:(最重要的是先把两个图片放到你的img文件夹里,图片自行设计,暂不提供,图片名称可看CSS) 1、先添加样式,在你的主题样式表中main.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 |
/*全站底部推广区修改*/ .main-info { width: 100%; height: 320px; padding-top: 100px; background: url(../img/backgroundwall.jpg) repeat-x; } .main-info dl { width: 880px; margin: 0 auto; height: 120px; background: url(../img/blue_bg.png) repeat; } .main-info dl dt { width: 100%; padding: 12px 6px 8px 6px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 36px; color: #fff; text-align: center; font-family: "微软雅黑"; } .main-info dl dd { width: 100%; text-align: center; color: #fff; font-size: 20px; font-family: Verdana, Geneva, sans-serif; font-family: "微软雅黑"; } .main-info dl dd a { display: inline-block; height: 24px; line-height: 12px; margin-left: 9px; padding: 5px 9px; font-size: 16px; font-family: Verdana, Geneva, sans-serif; font-weight: bold; color: #fff; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; background: #E87E16; } .main-info dl dd a:hover { background: #FF7E00; } @media screen and (max-width: 650px){ .main-info { display: none; } } |
找到主题根目录下option.php打开编辑。 找到全站推广区代码,在推广标题下载添加一个推广标题,定义ID为footer_brand_title-1,代码如下
1 2 3 4 5 6 7 |
// 全站底部推广区修改 $options[] = array( 'name' => __('推广副标题', 'haoui'), 'id' => 'footer_brand_title-1', 'desc' => '建议20字内', 'std' => 'LonHowe Blog lonhowe.cn', 'type' => 'text'); |
找到主题根目录下文件夹modules,编辑mo_footer_brand.php文件,将以下代码全部替换上去。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!-- 全站底部推广区修改 --> <div class="main-info"> <div class="container"> <dl><dt><?php echo _hui('footer_brand_title') ?></dt> <dd><?php echo _hui('footer_brand_title-1') ?> <?php for ($i=1; $i <= 2; $i++) { if( _hui('footer_brand_btn_text_'.$i) && _hui('footer_brand_btn_href_'.$i) ){ echo '<a'.(_hui('footer_brand_btn_blank_'.$i)?' target="blank"':'').' class="btn btn-lg" href="'._hui('footer_brand_btn_href_'.$i).'">'._hui('footer_brand_btn_text_'.$i).'</a>'; } } ?> </dd> </dl> </div> </div> |
添加背景图片
根据个人喜好为自己的网站设计两张图片,一张命名为backgroundwall 图片格式为jpg;另一张命名为blue_bg 图片格式为png,并上传至主题目录下/img/文件夹下。具体图片文件推荐大小如下:
backgroundwall:1920x320px与blue_bg:880x120px
当然你也可以设置文件名及图片大小、格式为其他值,不过这需要你对main.css文件中相应的参数进行调整。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!-- 全站底部推广区修改 --> <div class="main-info"> <div class="container"> <dl><dt><?php echo _hui('footer_brand_title') ?></dt> <dd><?php echo _hui('footer_brand_title-1') ?> <?php for ($i=1; $i <= 2; $i++) { if( _hui('footer_brand_btn_text_'.$i) && _hui('footer_brand_btn_href_'.$i) ){ echo '<a'.(_hui('footer_brand_btn_blank_'.$i)?' target="blank"':'').' class="btn btn-lg" href="'._hui('footer_brand_btn_href_'.$i).'">'._hui('footer_brand_btn_text_'.$i).'</a>'; } } ?> </dd> </dl> </div> </div> |
微信扫描下方的二维码阅读本文
© 版权声明
文章版权归作者所有,未经允许请勿转载。
THE END
暂无评论内容