搜集整理wordpress主题7b2-b2美化教程
本文更新于: 2021年5月10日
本站为WordPress搭建，使用的是B2主题。如果你的站没有使用这款主题，这篇文章可能对你无用，这些美化修改只适用于B2主题。
B2主题界面友好、功能全面，很适合做资源站。参考大家的代码，修改了B2主题部分细节，希望起到抛砖引玉的作用，对大家有所帮助。
文章转自：土豆君
模块导航按钮修改
打开主题目录b2/style.css文件，在底部添加如下代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
/*模块导航按钮修改*/ .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文件，在底部添加如下代码：
|
1 2 3 4 |
/*隐藏不喜欢按钮*/ .content-footer-zan-cai span:nth-child(2) { display: none; } |
logo添加闪光效果
打开主题目录b2/style.css文件，在底部添加如下代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
/*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文件，在底部添加如下代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/*加载更多按钮修改*/ .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文件，在底部添加如下代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
/*导航菜单添加角标*/ .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、后台管理：外观-菜单-导航标签引用示例
|
1 |
圈子交流<span class="hot">推荐</span> |
本文链接：Click here to view the current URL
声明：本站为个人非盈利博客，资源均网络收集且免费分享无限制，无需登录。资源仅供测试学习，请于24小时内删除，任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集。请支持正版！如若侵犯了您的合法权益，可联系我们处理。
