子比主题美化教程

首页文章列表悬停上浮

CSS代码：

/*首页文章列表悬停上浮*/
@media screen and (min-width: 980px){.tab-content .posts-item:not(article){transition: all 0.3s;}.tab-content .posts-item:not(article):hover{transform: translateY(-10px); box-shadow: 0 8px 10px rgba(255, 112, 173, 0.35);}}

导航栏标题字体加粗

CSS代码：

/*导航栏字体加粗*/ul.nav {font-weight: 700;}

自定义网站图片背景

/***日间主题模式***/
body {
    background-image: url("/**这里改为你自己的图片地址**/");
    background-position-x: center;
    background-position-y: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}
/***夜间主题模式***/
.dark-theme {
    background-position-x: center;
    background-position-y: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-image: url("/**这里改为你自己的图片地址**/");
    background-size: cover;
}

友情链接右侧添加美化按钮

添加方法： 后台设置—>外观—>小工具—>添加Zibll 链接列表(新版)，加到标题右侧按钮即可。

<span class="but c-blue radius"><svg class="icon fa-spin" aria-hidden="true"><use xlink:href="#icon-fengche1"></use></svg>申请友链

侧边栏添加简单的小模块[WP小工具]

站点后台 >> 外观 >> 小工具 >> html代码 然后把小工具添加到指定侧边栏中即可。

可以用来做侧边栏的广告、领取优惠等。

<a class="ads" href="链接地址 "style="border-radius:5px;">
  <h4>小工具</h4>
  <h5>安全有保障</h5>
  <span class="ads-btn ads-btn-outline">立即进入</span></a>
<style>
.ads{display:block; padding:40px 15px; text-align:center; color:#fff!important; background:#ff5719; background-image:-webkit-linear-gradient(135deg,#bbafe7,#5368d9); background-image:linear-gradient(135deg,#bbafe7,#5368d9)}.ads h4{margin:0; font-size:22px; font-weight:bold}.ads h5{margin:10px 0 0; font-size:14px; font-weight:bold}.ads.ads-btn{margin-top:20px; font-weight:bold}.ads.ads-btn:hover{color:#ff5719}.ads-btn{display:inline-block; font-weight:normal; margin-top:10px; color:#666; text-align:center; vertical-align:top; user-select:none; border:none; padding:0 36px; line-height:38px; font-size:14px; border-radius:10px; outline:0; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out}.ads-btn:hover,.btn:focus,.btn.focus{outline:0; text-decoration:none}.ads-btn:active,.btn.active{outline:0; box-shadow:inset 0 3px 5px rgba(0,0,0,0.125)}.ads-btn-outline{line-height:36px; color:#fff; background-color:transparent; border:1px solid#fff}.ads-btn-outline:hover,.btn-outline:focus,.btn-outline.focus{color:#343a3c; background-color:#fff}
</style>

说明：如果只是使用的话，CSS可无需修改，只需修改文本和跳转的网址即可。不需要圆边的话删除style=”border-radius:5px;”即可。

主题文章标签美化

复制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}

注：CSS代码已进行压缩，直接复制粘贴即可。

网站格子图背景CSS代码

CSS代码

body::before {
            background-image: linear-gradient(90deg, rgba(60, 10, 30, .04) 3%, transparent 0), linear-gradient(1turn, rgba(60, 10, 30, .04) 3%, transparent 0);
            background-size: 20px 20px;
            background-position: 50%;
            background-repeat: repeat;
}

设置网站背景

图片版

进入主题设置->全局&功能->自定义代码

将以下代码中的图片地址修改为图片地址后，保存到自定义CSS样式

/***日间主题模式***/body {
    background-image: url("这里改为自己的图片地址");/**这里改为自己的图片地址**/    background-position-x: center;
    background-position-y: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}
/***夜间主题模式***/.dark-theme {
    background-position-x: center;
    background-position-y: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-image: url("这里改为自己的图片地址");/**这里改为自己的图片地址**/    background-size: cover;
}

需要注意的是，网站背景图片的色调，亮度等都需要和整体颜色相互配合才能达到较好的效果，背景太花哨或者颜色不合适都只会让网站变得很丑。

CSS渐变色

上面给的教程是使用图片，使用图片的话难免要考虑尺寸，尤其是移动端的尺寸，处理不好就很丑，况且使用图片作为网站背景的话还容易拖累网站速度。

这里就比较推荐大家使用背景渐变色。

春天的温暖：

background-image: linear-gradient(to top, #fad0c4 0%, #fad0c4 1%, #ffd1ff 100%);

尘埃的草：

background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);

子比主题评论框添加背景图片

在子比主题设置—自定义CSS样式，添加下面的CSS代码：

textarea#comment {background-color:transparent;background:linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)),url(图片链接) right 10px bottom 10px no-repeat;-moz-transition:ease-in-out 0.45s;-webkit-transition:ease-in-out 0.45s;-o-transition:ease-in-out 0.45s;-ms-transition:ease-in-out 0.45s;transition:ease-in-out 0.45s;}
textarea#comment:focus {background-position-y:789px;-moz-transition:ease-in-out 0.45s;-webkit-transition:ease-in-out 0.45s;-o-transition:ease-in-out 0.45s;-ms-transition:ease-in-out 0.45s;transition:ease-in-out 0.45s;}

图片自己保存到本地，图片大小（162 X 75，建议透明的png图片）,自己添加喜欢的背景图片。

1 2 3 4 5 6 7

👋 感谢您的观看！