全百科精品资源分享
免费优质资源下载平台

【网络版】如何修改美化DUX主题全站底部推广区

播放按钮
全百科网免费发布推广信息
文章目录

一直不是不是很喜欢UX主题默认的全站底部推广区样式,感觉有点丑,和网站也不是很搭配,最近全百科网从网上查找了不少资料,给DUX主题全站底部推广区美化了下,有想要修改DUX主题底部推广区的朋友可以参考下,此次分享为网络收集版样式,下次分享全百科网的样式。

这次对于主题文件的修改主要集中在三个部分:main.css、options.php、mo_footer_brand.php,大家在文件修改前先做好文件的备份与保存。

修改前

【网络版】如何修改美化DUX主题全站底部推广区

修改后

【网络版】如何修改美化DUX主题全站底部推广区

修改方法

带后台功能的修改方法:

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;
}
}

2、找到主题根目录下option.php打开编辑。

找到全站推广区代码,在推广标题下载添加一个推广标题,定义ID为footer_brand_title-1,代码如下:

$options[] = array(
'name' => __('推广标题', 'haoui'),
'id' => 'footer_brand_title-1',
'desc' => '建议20字内',
'std' => '全百科网www.quanbaike.com',
'type' => 'text');
// 全站底部推广区修改
    $options[] = array(
        'name' => __('推广副标题', 'haoui'),
        'id' => 'footer_brand_title-1',
        'desc' => '建议20字内',
        'std' => '全百科网 精品免费资源下载',
        'type' => 'text');

3、找到主题根目录下文件夹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,并上传至主题目录下/img/文件夹下。具体图片文件推荐大小如下:

backgroundwall:1920x320pxblue_bg:880x120px

当然你也可以设置文件名及图片大小、格式为其他值,不过这需要你对main.css文件中相应的参数进行调整。

图片下载

下载地址:https://sn9.us/file/3494484-403557941

PS:请大家修改前先做好相对应的文件备份,还有上面的推广语大家可以自定义哈。

Free Download WordPress Themes
Premium WordPress Themes Download
Download Nulled WordPress Themes
Download Premium WordPress Themes Free
download udemy paid course for free
download samsung firmware
Download Premium WordPress Themes Free
udemy course download free

搜一下 获取更多

本文由全百科网分享提供,分享更多精品资源,帮助你我共同成长。

赞(0)
全百科网 » 【网络版】如何修改美化DUX主题全站底部推广区
本站内容均来自网络收集,转载内容不代表本网站的观点及意见,仅供用户参考和借鉴。如对稿件内容及版权问题有疑议,请及时联系全百科官方邮箱: smtsg@foxmail.com

评论 抢沙发

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