B2主题美化记录

释放双眼,带上耳机,听听看~!
搜集整理wordpress主题7b2-b2美化教程

本站为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;
}

打开主题目录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>

为TA充电
共{{data.count}}人
人已赞赏
APP喵声明:本博客所有文章除特别声明外,均采用© BY-NC-SA。转载请注明出处! 免责声明:本站发布的部分内容包括但不限于:文章、图片、音频、视频、软件、程序等搜集于互连网,仅供学习交流,严禁用于商业用途,请于24小时内删除,如喜欢请购买正版,享受售后服务!如有侵犯您的权益请联系 本站 处理!
教程喵苹果喵

macOS BigSur回退11.2.3,超简单

2021-5-6 10:21:04

教程喵资源喵

wordpress实现输入密码显示

2021-5-12 11:14:18

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索