腾龙梦屋首页美化简记
心血来潮,对站点进行了简单的美化,进行一个简单的记录,有使用和本站相同主题的读者可以参考参考。
首页
通过在后台设置自定义CSS样式覆盖主题样式,达到美化的效果,部分修改为很早之前的修改,没有注释?
.bgcolor-fff {
background-color: #fff0;
}
.post-list {
display: flex;
margin-bottom: 30px;
position: relative;
padding: 10px;
border-radius: 10px;
background: #ffffff;
box-shadow: 11px 11px 22px #989797,
-11px -11px 22px #ffffff;
}
.entry-footer .post-meta-box {
display: flex;
padding: 5px 15px;
font-size: 12px;
align-items: center;
justify-content: flex-end;
border-top: 1px;
color: #b4b4b4;
margin: -15px;
margin-top: 10px;
list-style: none;
}
.uposts .codesign-cover {
border-radius: 11px 11px 0 0;
}
.uposts {
border-radius: 10px;
background: #ffffff;
box-shadow: 11px 11px 22px #989797,
-11px -11px 22px #ffffff;
padding: 20px;
}
.uposts .codesign-list {
border-radius: 11px 11px 0 0;
}
/*banner圆角*/
article{
border-radius:13px;
}
.pt-0 {
padding-top: 20px !important;
}
.site-header {
background-color: #f6f6f6;
box-shadow: 0 0 30px rgb(2 4 6);
left: 5px;
right: 5px;
border-radius:13px;
}
p {
margin: 0 0 5px;
}
.section {
padding-bottom: 30px;
padding-top: 20px;
}
.site-footer {
background-color: #ffffff00;
}
.navbar .sub-menu {
background-color: #f6f6f6ed;
box-shadow: 0 0 30px rgb(167 167 168);
border-radius: 10px;
}
img {
border-radius: 8px;
}
.post-grid .cao-cover,.post-list .cao-cover,.menu-post .cao-cover {
border-radius: 8px;
}
.article-content .aligncenter img {
border-radius: 8px;
}
.fa{
font: normal normal normal 14px/1 FontAwesome;
}
.home-cat-nav-wrap {
background-color: #fff0;
}
/*列表美化角标*/
.title-iconse {
height: 10px;
width: 10px;
background: #fcbb40;
padding: 0px;
display: inline-block;
border-radius: 50%;
line-height: 0;
position: relative;
-webkit-transition: ease-in-out 0.25s;
transition: ease-in-out 0.25s;
margin: 0 10px;
}
.float-rightse {
float: right;
position: absolute;
right: 30px;
}
.title-iconse:before {
content: " ";
height: 10px;
width: 10px;
background: #34c648;
border-radius: 50%;
margin-left: 15px;
position: absolute;
display: block;
-webkit-transition: ease-in-out 0.25s;
transition: ease-in-out 0.25s;
}
.title-iconse:after {
content: " ";
height: 10px;
width: 10px;
background: #fc605c;
border-radius: 50%;
margin-left: -15px;
position: absolute;
display: block;
-webkit-transition: ease-in-out 0.25s;
transition: ease-in-out 0.25s;
}
/*列表美化角标*/
/*侧边菜单*/
.off-canvas {
border-radius: 8px;
}
/*首页按钮效果*/
.btn::before {
content: '';
width: 0;
height: 3em;
border-radius: 4px;
position: absolute;
top: 0;
left: 0;
background-image: linear-gradient(60deg, #f96160, #3dc44f);
transition: .5s ease;
display: block;
z-index: -1;
}
.btn:hover::before {
width: 100%;
}
/*顶部菜单条*/
.site-header {
margin: 0 1%;
}
列表
列表三色圆点以及文章内页三色圆点使用同一样式,采用了原站壳网的方法
样式内容在上方已经包含,只需在theme-functions中搜索entry-meta,在span标签后方添加:
<i class="title-iconse float-rightse"></i>
1.腾龙梦屋文章内容无特殊注明皆为源儿原创,转载请注明来源,谢谢!
2.若有相关文章侵犯您的权益,请联系源儿删除,谢谢!
3.相关软件、资料仅供学习参考使用,在24h内务必删除!
腾龙梦屋 » 腾龙梦屋首页美化简记
2.若有相关文章侵犯您的权益,请联系源儿删除,谢谢!
3.相关软件、资料仅供学习参考使用,在24h内务必删除!
腾龙梦屋 » 腾龙梦屋首页美化简记