子比美化教程合集-持续更新中-阿呆日记

WordPress同款主题，提供强大模板解决方案 购买zbll

文章最后更新时间：2024-12-02 20:21:41

前言

本页主题美化内容是博主在建站时一个一个测试过无任何错误的记录合集，使用之前先参考本站，若觉得实用就拿去用吧，我会不定时更新，如有长期未更新或者不能使用的请留言。

注意说明

每个人的审美观念不一样，所以请先参考本站或测试在用的美化。
主题美化、小工具可能会有一定程度使网站加载缓慢、CSS全局污染等等一系列的问题，请一定要测试后再进行美化。
主题美化可能会对主题文件进行修改，更新时请及时备份主题美化的文件，或者收藏本站，以免一些主题页面或美化效果丢失。
子比主题美化都是白茶自己鼓捣、测试后才发布的，完全免费，开放。

教程即说明

（最新版）CSS代码添加到子比主题后台设置->自定义代码->自定义CSS样式
（最新版）JS即javascript代码添加到子比主题后台设置->自定义代码->自定义javascript代码
（最新版）没有特殊说明的小工具，自定义HTML小工具添加网站后台->外观->小工具->点击【自定义HTML】选择放置的位置->把代码复制进去，保存即可。
其他添加方式的，我会在教程里告知，若只需添加CSS+JS的教程，我不重复告知了，请注意看上面的方法。

用阿呆推荐的美化，让子比更炫起来！！

1、主题logo扫光代码

/* logo 扫光开始 */
.navbar-brand{position:relative;overflow:hidden;margin: 0px 0 0 0px;}.navbar-brand:before{content:""; position: absolute; left: -665px; top: -460px; width: 200px; height: 15px; background-color: rgba(255,255,255,.5); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: searchLights 6s ease-in 0s infinite; -o-animation: searchLights 6s ease-in 0s infinite; animation: searchLights 6s ease-in 0s infinite;}@-moz-keyframes searchLights{50%{left: -100px; top: 0;} 65%{left: 120px; top: 100px;}}@keyframes searchLights{40%{left: -100px; top: 0;} 60%{left: 120px; top: 100px;} 80%{left: -100px; top: 0px;}}
/* logo 扫光结束 */

2、网站侧边滚动条

将以下代码放到自定义CSS里面即可！

/**彩色滚动条样式开始*/
::-webkit-scrollbar {
  width: 10px;  
  height: 1px;
}
::-webkit-scrollbar-thumb {
  background-color: #12b7f5;
  background-image: -webkit-linear-gradient(45deg, rgba(255, 93, 143, 1) 25%, transparent 25%, transparent 50%, rgba(255, 93, 143, 1) 50%, rgba(255, 93, 143, 1) 75%, transparent 75%, transparent);
}
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: #f6f6f6;
}
/**彩色滚动条样式结束*/

3、首页文章列表悬停上浮代码

免费子比主题 – 给文章列表加一个浮动动态效果

点击查看

4、子比主题给文章标题文字添加彩色渐变效果

免费子比主题给文章标题文字添加彩色渐变效果

点击查看

5、子比主题首页分类栏目标题美化

<font color=#FFC0CB>子比主题首页分类栏目标题美化</font>-阿呆日记

免费子比主题首页分类栏目标题美化

点击查看

6、文章底部添加最后更新时间或过期失效提示

1.将下面的 PHP 代码加入到主题目录下：themes/zibll/functions.php 文件中。

//文章过期提示开始
function article_time_update() {
    date_default_timezone_set('PRC');
    $newdate=time();
    $updated_date = get_the_modified_time('Y-m-d H:i:s');
    $updatetime=strtotime($updated_date);
    $custom_content = '';
    if ( $newdate > $updatetime+86400) {
    $custom_content= '<div class="article-timeout"><strong><i class="fa fa-bell" aria-hidden="true"></i> 温馨提示：</strong>本文最后更新于<code>'. $updated_date . '</code>，某些文章具有时效性，若有错误或已失效，请在下方<a href="#comment">留言</a>或联系<a target="_blank" title="觅知博客" href="http://wpa.qq.com/msgrd?v=3&uin=1426239465&site=qq&menu=yes"><b>觅知社长</b></a>。</div >';
    }
        echo $custom_content;
    }
//文章过期提示结束

2.在主题目录themes/zibll/inc/functions/zib-single.php 文件中，文章分页函数（我的是在 317 行，因为我的代码有改动，所有不确定行数，见下图）搜索文章分页或者添加钩子，下面添加下方代码即可。

PHP代码

article_time_update();//文章过期提示

3.CSS 代码：（在自定义 CSS 样式添加下面代码）

/*过期文章提示样式*/
.article-timeout{position:relative; border-radius: 8px; position: relative; margin-bottom: 25px; padding: 10px; background-color: var(--body-bg-color);}

效果图：

7、子比主题美化 – 标题美化

免费子比主题美化 – 标题美化

点击查看

8、子比主题子比主题文章标签美化

复制CSS代码到后台子比主题设置—自定义CSS样式—将CSS代码粘贴框里，即可完成。

CSS代码

/*文章随机彩色标签*/
.article-tags{margin-bottom: 10px}.article-tags a{padding: 4px 10px;background-color: #19B5FE;color: white;font-size: 12px;line-height: 16px;font-weight: 400;margin: 0 5px 5px 0;border-radius: 2px;display: inline-block}.article-tags a:nth-child(5n){background-color: #4A4A4A;color: #FFF}.article-tags a:nth-child(5n+1){background-color: #ff5e5c;color: #FFF}.article-tags a:nth-child(5n+2){background-color: #ffbb50;color: #FFF}.article-tags a:nth-child(5n+3){background-color: #1ac756;color: #FFF}.article-tags a:nth-child(5n+4){background-color: #19B5FE;color: #FFF}.article-tags a:hover{background-color: #1B1B1B;color: #FFF}

9、手机左侧菜单添加背景图片

CSS代码

/*手机侧边栏背景图片*/
@media (max-width: 767px){
.mobile-navbar.show,.mobile-navbar.left{
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    cursor: pointer;
  background-image:linear-gradient(rgba(255, 255,255,0),rgba(255,255,255, 0.3)),url(背景图链接);}
  .mobile-nav-widget .box-body {
    background: var(--muted-border-color) !important;}
}