此页主题美化根据【子比主题】而来,可修改一下来提升个人博客的魅力
主题美化说明
- 主题美化和小工具可能会引起一系列问题,如网站加载缓慢和CSS的全局污染等。美化前请一定要测试。
- 主题美化可能会修改主题文件。更新时,请及时备份主题美化文件,或收藏此站点,以免丢失部分主题页面或美化效果。
不会的看下面
- CSS 代码添加到后台:子比主题设置—>自定义代码—>自定义 CSS 样式
- JS 即 javascript 代码添加到:后台子比主题设置—>自定义代码—>自定义 javascript 代码
- 没有特殊说明的小工具,自定义 HTML 小工具:添加网站后台—>外观–>小工具–>点击【自定义 HTML】选择放置的位置—>把代码复制进去,保存即可
- 其他添加方式的,我会在教程里告知,若只需添加 CSS+JS 的教程,我可能不重复告知了,请注意看上面的方法。
- 有些美化教程本站已经发布的,本文章将不再进行编写教程,直接跳转到文章页面。
更新站长推荐的美化,让网站更炫起来!!
1、网站侧边滚动条
将以下代码放到自定义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;
}
/**彩色滚动条样式结束*/
2、首页文章列表悬停上浮代码
将下面代码放置自定义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);}}
/*首页文章列表悬停上浮结束*/
3、子比主题子比主题文章标签美化
复制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}
4、手机左侧菜单添加背景图片
这是一个简单的CSS代码,若要更换图片请将CSS图片里面的链接换成你自己的即可!!
5、子比主题评论框添加背景图片
在子比主题设置—自定义CSS样式,添加下面的CSS代码:
图片自己保存到本地,图片大小(162 X 75,建议透明的png图片),自己添加喜欢的背景图片。
将下面代码放到子比主题-自定义CSS样式里面即可
将代码放到自定义CSS样式即可
全局追掉灰色代码:
首页追掉灰色代码:
如果要每个页面显示,将代码放入footer.php文件即可
<style> @keyframes shangxa { 0%, 100%, 20%, 50%, 80% { transition-timing-function: cubic-bezier(0.215,.61,.355,1); transform: translate3d(0,0,0); } 40%, 43% { transition-timing-function: cubic-bezier(0.755,0.50,0.855,0.060); transform: translate3d(0,-10px,0); } 70% { transition-timing-function: cubic-bezier(0.755,0.050,0.855,0.060); transform: translate3d(0,-6px,0); } 90% { transform: translate3d(0,-3px,0); } } .leke { display: flex; position: fixed; left: 0; top: calc(50% - 103px); flex-direction: column; -webkit-box-align: center; align-items: center; color: rgb(255, 255, 255); font-size: 16px; font-weight: 500; line-height: 20px; box-shadow: rgba(0, 0, 0, 0.08) 0px 5px 6px -4px, rgba(13, 206, 158, .37) 0px 6px 10px; z-index: 10; overflow: hidden; background: #0dce9e; padding: 12px 8px 12px 5px; border-radius: 0 14px 14px 0; transition: height 0.2s ease 0s, top 0.2s ease 0s; } .leke:hover { opacity: .8; } .leke .upload-icon { flex-shrink: 0; width: 28px; height: auto; display: block; margin-bottom: 2px; -webkit-animation: shangxa 2s infinite; animation: shangxa 2s infinite; } @media screen
AND (max-width: 768px) { .leke { display: none; } } #qidiana { cursor: pointer; } .class_qidian_wpa { border-radius: 6px !important; box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1); -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1); -moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1); } </style> <a href="http://wpa.qq.com/msgrd?v=3&uin=2296945504&site=qq&menu=yes" target="_blank"><div id="qidiana" class="leke"> <svg t="1599210542874" class="upload-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16321" width="30" height="30"><path d="M224.99 512a287.01 287.01 0 1 0 574.02 0 287.01 287.01 0 1 0-574.02 0z" fill="#FFDA33" p-id="16322"></path><path d="M659.18375 635.7275c5.61375-6.55875 3.74625-16.86375-2.82375-22.5-6.5475-5.61375-16.86375-3.735-22.48875 2.82375-33.75 37.485-70.30125 55.305-121.86 55.305-51.55875 0-84.375-14.0625-121.87125-55.305-5.625-6.57-15.94125-8.4375-22.5-2.82375-6.57 5.63625-8.4375 15.94125-2.8125 22.5 44.055 49.69125 85.30875 68.43375 147.18375 68.43375 61.86375 0 107.7975-22.48875 147.1725-68.43375zM390.15125 469.8125v-56.25c0-14.99625-12.18375-28.125-28.125-28.125-14.99625 0-28.11375 12.18375-28.11375 28.125v56.25c0 14.99625 12.1725 28.125 28.11375 28.125 14.99625 0 28.125-12.18375 28.125-28.125z m494.94375-59.0625c-42.1875-170.6175-193.10625-297.1575-373.08375-297.1575-179.98875 0-330.9075 126.54-373.10625 297.1575-45 16.875-76.87125 66.555-76.87125 124.68375 0 66.56625 42.1875 121.86 97.4925 130.30875 0 0 0 0.93375 0.945 0.93375h62.80875a339.87375 339.87375 0 0 1-39.375-159.3675c0-186.5475 147.18375-337.4775 328.10625-337.4775s328.08375 150.93 328.08375 337.4775c0 125.60625-66.54375 234.36-165.915 292.48875A54.9 54.9 0 0 0 661.0625 797.91875c-30.9375 0-56.25 25.30125-56.25 56.2275 0 30.94875 25.3125 56.26125 56.25 56.26125 30.92625 0 56.23875-25.3125 56.23875-56.26125 0-4.68-0.93375-9.36-1.87875-13.10625 64.6875-42.1875 117.18-103.12875 148.12875-175.2975 55.29375-9.39375 98.415-63.7425 98.415-130.30875 0-58.12875-32.81625-107.80875-76.87125-124.68375z m-194.985 59.0625v-56.25c0-14.99625-12.18375-28.125-28.11375-28.125-15.0075 0-28.125 12.18375-28.125 28.125v56.25c0 14.99625 12.18375 28.125 28.125 28.125 14.99625 0 28.11375-12.18375 28.11375-28.125z" fill="#515151" p-id="16323" data-spm-anchor-id="a313x.7781069.0.i0" class=""></path></svg> <span>联</span><span>系</span><span>站</span><span>长</span> </div></a>
第一样式
将下面代码放到自定义CSS即可
第二样式
将下面代码放到自定义CSS即可
添加路径:在后台=>>外观=>>小工具=>>自定义 HTML=>>选择你需要放的位置
1 2
本站代码模板仅供学习交流使用请勿商业运营,严禁从事违法,侵权等任何非法活动,否则后果自负!
© 版权声明
THE END
暂无评论内容