[转]大前端主题DUX添加主题themebetter首页顶部样式

这里正对dux主题做一个小的首页修改，添加一个banner，在附加几个功能选项，这里的样式是仿造themebetter主题首页顶部的样式，

用过dux的都知道是wordpress的dux主题是themebetter制作开发的，虽然dux非常强大美观，但是首页还是没有和themebetter主题一样的功能样式，感觉themebetter的顶部banner样式非常好看实用，

于是这里根据美化和效果，我们来对dux进行修改，添加一个和themebetter一样的多功能顶部banner。

教程代码

首先将以下代码添加你合适的位置，无作为建议添加主题根目录下header.php最下端，当然自己喜欢那里就选那里都是一样的：

<div class="focusbanner" style="background-image:url(http://themebetter.com/static/bg/bg_04.jpg)">
 <div class="container"> <a href="javascript:;" class="signin-loader"><p class="btn btn-primary">登录 NPIE</p></a> <a href="javascript:;" class="signup-loader"><p class="btn btn-whrite">我要注册</p></a> </div>
</div>
 
<div class="container">
 <ul class="eboxx">
 <li class="eboxx-i eboxx-01">
 <h4>个性化主题</h4>
 <p>扁平化、简洁白色、多设备支持、多功能配置</p>
 <a class="btn btn-sm btn-primary" target="_blank" rel="nofollow" href="http://www.habotalk.com/">专题</a>
 <a class="btn btn-sm btn-default" target="_blank" rel="nofollow" href="http://www.habotalk.com/">查看演示</a>
 </li>
 <li class="eboxx-i eboxx-02">
 <h4>个性化主题</h4>
 <p>扁平化、简洁风格，适用于图片展示站点和个人博客</p>
 <a class="btn btn-sm btn-primary" target="_blank" rel="nofollow" href="http://www.habotalk.com/">专题</a>
 <a class="btn btn-sm btn-default" target="_blank" rel="nofollow" href="http://www.habotalk.com/">查看演示</a>
 </li>
 <li class="eboxx-i eboxx-03">
 <h4>简洁主题</h4>
 <p>大气设计，适用于企业站、行业垂直站、团队站及个人博客</p>
 <a class="btn btn-sm btn-primary" target="_blank" rel="nofollow" href="http://www.habotalk.com/">专题</a>
 <a class="btn btn-sm btn-default" target="_blank" rel="nofollow" href="http://www.habotalk.com/">查看演示</a>
 </li>
 <li class="eboxx-i eboxx-04">
 <h4>清爽主题</h4>
 <p>简洁2栏，适用于个人站点及团队博客</p>
 <a class="btn btn-sm btn-primary" target="_blank" rel="nofollow" href="http://www.habotalk.com/">专题</a>
 </li>
 <li class="eboxx-i eboxx-100">
 <h4>WordPress主题定制</h4>
 <p>完全按照您的需求量身打造，此项服务需要排期，具体请联系我们</p>
 <a class="btn btn-sm btn-danger" target="_blank" rel="nofollow" href="http://www.habotalk.com/">联系我们</a>
 </li>
 </ul>
</div>

添加CSS

注：DUX主题如果单纯添加ebox样式的话会和大前端dux主题小工具主题推荐和前段开发的样式冲突，所以这里为了不产生冲突无阻我重新定义了一个样式eboxx：

/* focusbanner habotalk.com================================================================================ */
.focusbanner {
text-align: center;
margin-bottom: 20px;
height: 200px;
background-repeat: no-repeat;
background-position: 50% 50%;
}
.focusbanner .container {
padding-top: 88px;
padding-right: 60px;
text-align: right;
}
.focusbanner .btn {
margin-left: 10px;
}
/* btn habotalk.com======================================================================================== */
.btn {
display: inline-block;
padding: 6px 15px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 2px;
}
.btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.btn:hover, .btn:focus, .btn.focus {
color: #333;
text-decoration: none;
}
.btn:active, .btn.active {
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
.btn.disabled, .btn[disabled], fieldset[disabled] .btn {
cursor: not-allowed;
filter: alpha(opacity=65);
-webkit-box-shadow: none;
box-shadow: none;
opacity: .65;
}
a.btn.disabled, fieldset[disabled] a.btn {
pointer-events: none;
}
.btn-default {
color: #555;
background-color: #fff;
border-color: #d6d6d6;
}
.btn-default:hover, .btn-default:focus, .btn-default:active {
color: #333;
background-color: #e6e6e6;
border-color: #bbb;
}
.btn-primary {
color: #fff;
background-color: #00AAEE;
border-color: #00AAEE;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
color: #fff;
background-color: #00A1EC;
border-color: #00A1EC;
}
.btn-success {
color: #fff;
background-color: #50CD7C;
border-color: #50CD7C;
}
.btn-success:hover, .btn-success:focus, .btn-success:active {
color: #fff;
background-color: #3CC76D;
border-color: #3CC76D;
}
.btn-danger {
color: #fff;
background-color: #FF8966;
border-color: #FF8966;
}
.btn-danger:hover, .btn-danger:focus, .btn-danger:active {
color: #fff;
background-color: #FF6F44;
border-color: #FF6F44;
}
.btn-whrite {
color: #555;
background-color: #fff;
border-color: #fff;
}
.btn-whrite:hover, .btn-whrite:focus, .btn-whrite:active {
color: #333;
background-color: #fff;
border-color: #fff;
}
.btn-xs {
padding: 2px 6px;
font-size: 12px;
}
.btn-sm {
padding: 4px 12px;
}
.btn-lg {
font-size: 20px;
border-radius: 4px;
padding: 10px 25px;
}
.btn-block {
width: 100%;
}
/* ebox habotalk.com======================================================================================= */
.eboxx {
overflow: hidden;
font-size: 12px;
text-align: center;
background-color: #fff;
margin-bottom: 20px;
}
.eboxx h4 {
font-size: 14px;
color: #444;
margin: 10px 0;
}
.eboxx-i {
position: relative;
float: left;
width: 20%;
padding: 20px;
background-color: #fff;
color: #777;
}
.eboxx-01, .eboxx-02, .eboxx-03, .eboxx-04 {
border-right: 2px solid #eee;
}
.eboxx-i:hover {background-color: #F9F9F9;}
.eboxx-i p {height: 36px;overflow: hidden;color: #bbb;}
@media (max-width: 1024px) {
.eboxx .btn-default {display: none;}
.eboxx h4 {height: 20px;overflow: hidden;}
}
@media (max-width: 860px) {
.eboxx .eboxx-100 {display: none;}
.eboxx-i {width: 25%;}
.eboxx-04 {border-right: none;}
}
@media (max-width: 640px) {
.eboxx-i {width: 50%;}
.eboxx-01 {border-bottom: 2px solid #eee;}
.eboxx-02 {border-right: none;border-bottom: 2px solid #eee;}
}
@media (max-width: 480px) {
.eboxx-i {padding: 10px 15px 15px;}
.eboxx h4 {margin-bottom: 0;}
.eboxx-i p {margin: 5px 0}
}

到这里就完全添加完毕了，大家可以打开自己的首页进行刷新查看了。

笔者这里写放在自己的首页的模板文件里面，就是直接放在header后面。

原文链接：https://www.wuzuowei.net/6422.html

未经允许不得转载：哈勃私语 » [转]大前端主题DUX添加主题themebetter首页顶部样式