以下所有魔改教程,均以子比主题V7.9_beta2版本为例,其它版本自行调试,最近魔改文章在最后
前言
我本身也比较注重站点速度,所以以下的教程,我会根据结合魔改实际情况,给出是否建议魔改
具体从以下几个方面来考量
- 魔改难易度,是否对源码修改量过大
- 对网站速度影响是否过大
- 是否需要额外部署其它应用
- 是否依赖第三方的API
有言在先
每个人的审美观念不同,所以请先参考本站或测试在用的美化。
- 主题美化、小工具可能会导致网站加载速度变慢、CSS全局影响等一系列问题,务必在进行美化前进行测试。
- 主题美化可能会对主题文件进行修改,因此在更新时请及时备份美化的文件,或者收藏本站,以免丢失一些主题页面或美化效果。
- 子比主题美化都是经过满心自己的努力、测试后才发布的。
魔改说明
- CSS文件:未从外链引入情况下,默认添加至
主题后台>>自定义代码>>自定义CSS样式 - JS即JavaScript:未从外链引入情况下,默认添加至
主题后台>>自定义代码>>自定义javascript代码 - 小工具:未特殊说明,在
前台模块配置>>自定义html 将具体html代码填入其中即可
魔改合集
#1 主题LOGO扫光
#2 文章标签美化
自定义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}
/*文章随机彩色标签结束*/
#3 侧边栏彩色滚动条
自定义CSS
/* 彩色滚动条 开始 */
::-webkit-scrollbar {
width: 8px; /*滚动条宽度*/
height: 7px; /*滚动条高度*/
}
/*定义滚动条轨道*/
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: #f6f6f6;
}
/*定义滑块*/
::-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);
border-radius: 4px;
}
/* 彩色滚动条 结束*/
#4 头像呼吸光环和鼠标悬停旋转放大
自定义CSS
/*头像呼吸光环和鼠标悬停旋转放大*/
.avatar{border-radius:50%; animation:light 4s ease-in-out infinite;transition:0.5s;}.avatar:hover{transform: scale(1.15) rotate(720deg);}
#5 版权声明美化
#6 随机颜色热门标签
#8 炫酷个性的头像框
#9 文章更新或过期提示
#10 文章底部添加收藏本站
感谢您的来访,获取更多精彩文章请收藏本站。
© 版权声明
THE END
- 最新
- 最热
只看作者