B2主题美化记录

本文更新于: 2021年5月10日

本站为WordPress搭建，使用的是B2主题。如果你的站没有使用这款主题，这篇文章可能对你无用，这些美化修改只适用于B2主题。

B2主题界面友好、功能全面，很适合做资源站。参考大家的代码，修改了B2主题部分细节，希望起到抛砖引玉的作用，对大家有所帮助。

文章转自：土豆君

模块导航按钮修改

打开主题目录b2/style.css文件，在底部添加如下代码：

/*模块导航按钮修改*/
.picked.post-load-button span {
background: #393733;
color: #fff;
border-radius: 3px;
}
 
.post-list-cats {
background-color: #fff;
}
 
.post-list-cats a span:hover {
background: #393733;
color: #fff;
border-radius: 3px;
}

隐藏不喜欢按钮

打开主题目录b2/style.css文件，在底部添加如下代码：

/*隐藏不喜欢按钮*/
.content-footer-zan-cai span:nth-child(2) {
display: none;
}

logo添加闪光效果

打开主题目录b2/style.css文件，在底部添加如下代码：

/*logo添加闪光效果*/
.logo {
position: relative;
font-size:2em;
font-weight:700;
line-height:39px;
overflow:hidden;
margin:0;
}
 
.logo::before {
content:"";
position: absolute;
width: 150px;
height: 10px;
background-color: rgba(255,255,255,.5);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-animation: searchLights 1s ease-in 1s infinite;
animation: searchLights 1s ease-in 1s infinite;
}
 
@-webkit-keyframes searchLights {
0% { left: -90px; top: 0; }
to { left: 90px; top: 0; }
}

加载更多按钮修改

打开主题目录b2/Assets/fontend/style.css文件，在底部添加如下代码：

/*加载更多按钮修改*/
.post-list .load-more button {
padding:12px 40px;
width:auto;
background:#ffa64d;
color:#fff;
font-size:14px;
margin:30px auto 20px auto;
border-radius:3px;
}
 
.post-list .load-more button:hover {
background:#ffa64d;
color:#fff;
}

导航菜单添加角标

1、打开主题目录b2/Assets/fontend/style.css文件，在底部添加如下代码：

/*导航菜单添加角标*/
.new {
display: inline-block;
transform: translateY(-12px);
font-size: .75rem;
letter-spacing: 0.05em;
background: linear-gradient(to top,#03a9f4 0%,#00bcd4 100%);
color: #ffffff;
border-radius: 1rem;
padding: .15rem .275rem;
line-height: 1;
font-weight: bold;
}


.hot {
display: inline-block;
transform: translateY(-12px);
font-size: .75rem;
letter-spacing: 0.05em;
background: linear-gradient(to top,#ec867e 0%,#ec6190 100%);
color: #ffffff;
border-radius: 1rem;
padding: .15rem .275rem;
line-height: 1;
font-weight: bold;
}

2、后台管理：外观-菜单-导航标签引用示例

圈子交流<span class="hot">推荐</span>