IT小能手 影视后期
电视民工 资深站长

DUX主题全站底部推广区修改

一个针对dux主题的美化修改教程,使用dux主题功能很强大,用的人也多,不过要想修改可就麻烦了,因为这套主题的代码编写,想要修改的话,是功能的差,因为开始设计的时候就没有考虑让用户随意修改的意图, 表示很多教程对于别的主题能用,但是到了dux主题就失效了,好啦,LonHowe Blog说说如何修改dux主题的底部样式, 就是我们全站底部推广区,这里给出修改后的美化效果。

修改前:

修改后:

修改代码:

带后台功能的修改方法:(最重要的是先把两个图片放到你的img文件夹里,图片自行设计,暂不提供,图片名称可看CSS) 1、先添加样式,在你的主题样式表中main.css找到合适的位置放入以下代码即可。

/*全站底部推广区修改*/
.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,代码如下

// 全站底部推广区修改
    $options[] = array(
        'name' => __('推广副标题', 'haoui'),
        'id' => 'footer_brand_title-1',
        'desc' => '建议20字内',
        'std' => 'LonHowe Blog lonhowe.cn',
        'type' => 'text');

找到主题根目录下文件夹modules,编辑mo_footer_brand.php文件,将以下代码全部替换上去。

<!-- 全站底部推广区修改 -->
<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) &amp;&amp; _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文件中相应的参数进行调整。

<!-- 全站底部推广区修改 -->
<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) &amp;&amp; _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>
 收藏 (0) 打赏

您可以选择一种方式打赏本站

支付宝扫一扫打赏

微信钱包扫描打赏

文章、资料来源于网络,如需转载请载明出处:LonHowe Blog » DUX主题全站底部推广区修改

分享到: 更多 (0)

评论 抢沙发

  • QQ号
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

LonHowe Blog

LinksAbout Me
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活