腾龙梦屋首页美化简记

心血来潮,对站点进行了简单的美化,进行一个简单的记录,有使用和本站相同主题的读者可以参考参考。

首页

通过在后台设置自定义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内务必删除!
腾龙梦屋 » 腾龙梦屋首页美化简记
加速支持