DUX添加主题themebetter首页顶部样式

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

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

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

DUX添加主题themebetter首页顶部样式

教程代码

首先将以下代码添加你合适的位置,无作为建议添加主题根目录下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>DUX主题</h4>
 <p>扁平化、简洁白色、多设备支持、多功能配置</p>
 <a class="btn btn-sm btn-primary" target="_blank" rel="nofollow" href="http://www.wuzuowei.net/link?url=aHR0cDovL3RoZW1lYmV0dGVyLmNvbS90aGVtZS9kdXg=">专题</a>
 <a class="btn btn-sm btn-default" target="_blank" rel="nofollow" href="http://www.wuzuowei.net/link?url=aHR0cDovL3RoZW1lYmV0dGVyLmNvbS9wcmV2aWV3L2R1eA==">查看演示</a>
 </li>
 <li class="eboxx-i eboxx-02">
 <h4>XIU主题</h4>
 <p>扁平化、简洁风格,适用于图片展示站点和个人博客</p>
 <a class="btn btn-sm btn-primary" target="_blank" rel="nofollow" href="http://www.wuzuowei.net/link?url=aHR0cDovL3RoZW1lYmV0dGVyLmNvbS90aGVtZS94aXU=">专题</a>
 <a class="btn btn-sm btn-default" target="_blank" rel="nofollow" href="http://www.wuzuowei.net/link?url=aHR0cDovL3RoZW1lYmV0dGVyLmNvbS9wcmV2aWV3L3hpdQ==">查看演示</a>
 </li>
 <li class="eboxx-i eboxx-03">
 <h4>D8主题</h4>
 <p>大气设计,适用于企业站、行业垂直站、团队站及个人博客</p>
 <a class="btn btn-sm btn-primary" target="_blank" rel="nofollow" href="http://www.wuzuowei.net/link?url=aHR0cDovL3RoZW1lYmV0dGVyLmNvbS90aGVtZS9kOA==">专题</a>
 <a class="btn btn-sm btn-default" target="_blank" rel="nofollow" href="http://www.wuzuowei.net/link?url=aHR0cDovL3RoZW1lYmV0dGVyLmNvbS9wcmV2aWV3L2Q4">查看演示</a>
 </li>
 <li class="eboxx-i eboxx-04">
 <h4>D-Simple主题</h4>
 <p>简洁2栏,适用于个人站点及团队博客</p>
 <a class="btn btn-sm btn-primary" target="_blank" rel="nofollow" href="http://www.wuzuowei.net/link?url=aHR0cDovL3RoZW1lYmV0dGVyLmNvbS90aGVtZS9kLXNpbXBsZQ==">专题</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.wuzuowei.net/link?url=aHR0cDovL3RoZW1lYmV0dGVyLmNvbS9tZW1iZXIvd29ya29yZGVyLW5ldw==">联系我们</a>
 </li>
 </ul>
</div>

添加CSS

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

/* focusbanner wuzuowei.net================================================================================ */
.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 wuzuowei.net======================================================================================== */
.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 wuzuowei.net======================================================================================= */
.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}
}

到这里就完全添加完毕了,大家可以打开自己的首页进行刷新查看了,不过如果开启了cdn的话需要自己手动缓存一下哦。

免责申明:
1. 本站所有教程、文章分享目的仅供大家学习和交流,资源连接来自于网络,非本站发布,本站也不存储任何资源!
2. 如有无法查看或链接失效,烦请报告联系管理员处理!
3. 本站无法保证资源质量及其时效性,恕不接受任何提问。
4.本站即不保存任何资源,也不对任何链接作品负责,希望大家赞助本站,费用仅维持本站的日常运营所需!
5. 百码云无法保证文章教程或资源的完善与安全,请自行检测解决。
6. 通过本站收集链接的相关资源,严禁杜绝任何形式的正式商业用途,请前往官方购买。
7. 但凡通过本站链接导航下载的任何作品,虽不归本站所有,但在研究学习的前提下,请务必在下载24小时后删除。
百码云资源站仅提供学习的平台,所有资料均来自于网络,版权归原创者所有!本站不提供任何保证,并不承担任何法律责任,如果对您的版权或者利益造成损害,请提供相应的资质证明,我们将于3个工作日内予以删除。本文章采用BY-NC-SA 4.0 《国际知识共享署名许可协议4.0》 进行许可 。
百码云 » DUX添加主题themebetter首页顶部样式

提供互联网优质的链接集合站点

关于权限 站内帮助