DUX全站底部推广区修改

DUX主题默许的全站底部推行区是深灰色的，而且上面除了一行推行文字及两个可选择能否启用的按钮外就没有什么特别的装饰了，不断觉的这默许的推行区丑丑的不合适本人网站作风，最近从网上查找了不少材料终于将它给提换了，又想要修正DUX主题底部推行区的同窗能够看一下，当然假如你有什么更好的修正办法也能够底部留言通知我，我们一块儿折腾。下图是修正完成后的推行区款式，大家能够先看下喜不喜欢。

更改前DUX底部推行区

更改后DUX底部推行区

这次关于主题文件的修正主要集中在三个局部：main.css、options.php、mo_footer_brand.php，大家在文件修正前先做好文件的备份与保管。

main.css文件修正

首先是对main.css文件的修正，在dux/css/目录下找到main.css文件运用FTP工具下载下来，然后运用Notepad++停止编辑，在文件的最后添加如下款式：

/*全站底部推行区修正*/
.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;
    }
}

options.php文件修正

在dux文件夹下找到options.php文件，这个文件主要是提供后台控制选项的，我们需求在该文件下为推行区添加一个推行副标题，找到“全站底部推行区”代码段，然后在“推行标题”代码下方再添加一个“推行副标题”代码，详细代码如下：

// 全站底部推行区修正
$options[] = array(
    'name' => __('推行副标题', 'haoui'),
    'id' => 'footer_brand_title-1',
    'desc' => '倡议20字内',
    'std' => '蝈蝈要安静——一个不学无术的伪程序员！',
    'type' => 'text'
);

mo_footer_brand.php文件修正

在主题的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) && _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，并上传至dux/img/文件夹下。详细图片文件引荐大小如下：

backgroundwall：1920x320px

blue_bg：880x120px

当然你也能够设置文件名及图片大小、格式为其他值，不过这需求你对main.css文件中相应的参数停止调整。

感谢您的来访，获取更多精彩文章请收藏本站。