[start-plane type="1"]前言[/start-plane]
本页主题美化内容博主在Wordpress主题CoreNext 全部测试通过,无任何错误,后续我还会继续收集完善一些美化主题内容。
[start-plane type="2"]说明[/start-plane]
① 主题美化、小工具可能会有一定程度使网站加载缓慢、CSS全局污染等等一系列的问题,请一定要测试后在进行美化。
② 主题美化可能会对主题文件进行修改,更新时请及时备份主题美化的文件。
③ CSS代码添加到后台:主题设置—>自定义代码—>自定义CSS样式
④ HTML小工具:添加网站后台—>外观–>小工具–>区块—>选择放置的位置—>把代码复制进去,保存即可。
[start-plane type="3"]内容分享[/start-plane]
[zd-plane title="用户头像呼吸光环+鼠标悬停旋转放大"]使用方法:主题设置—>自定义代码—>自定义CSS样式
/*头像呼吸光环和鼠标悬停旋转放大开始*/
.avatar{border-radius: 50%; animation: light 4s ease-in-out infinite; transition: 0.5s;}.avatar:hover{transform: scale(1.15) rotate(720deg);}@keyframes light{0%{box-shadow: 0 0 4px #f00;} 25%{box-shadow: 0 0 16px #0f0;} 50%{box-shadow: 0 0 4px #00f;} 75%{box-shadow: 0 0 16px #0f0;} 100%{box-shadow: 0 0 4px #f00;}}
/*头像呼吸光环和鼠标悬停旋转放大结束*/
[/zd-plane]
[zd-plane title="CSS样式代码实现网站全局变灰操作方法"]使用方法:主题设置—>自定义代码—>自定义CSS样式
/*网站整体灰白样式开始一*/
:root {
--BG_COLOR: #121212;
--FONT_COLOR: rgba(255, 255, 255, .87);
--TAB_TITLES_COLOR: rgba(255, 255, 255, .6);
--SUB_TITLE_COLOR: rgba(255, 255, 255, .38);
--TAB_TITLES_HOVER_COLOR: #fff;
--TITLE_HOVER_COLOR: #0D9BFF;
--RIGHT_CONTENT_TEXT_COLOR: rgba(255, 255, 255, .5);
--FOCUS_BG_COLOR: #222222;
--TAB_SUBTITLES_BG_COLOR: rgba(50, 51, 53, .7);
--IMG_DEFAULT_COLOR: #333333;
}
html {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}
body{
filter:gray;
}
/*网站整体灰白样式开始一*/
[/zd-plane]
[zd-plane title="版权申明,样式如本站"]使用方法:主题设置—>文章设置—>文章版权模块
<fieldset style=" border: 1.5px dashed #008cff; padding: 10px; border-radius: 5px; line-height: 2em;font-weight: 700;color: var(--key-color);background-color: var(--body-bg-color);">
<legend align="center" style=" margin-bottom: -2px;width: 30%;text-align: center; background-color: #008cff; border-radius: 999px; background-image: linear-gradient(to right, #FFCC99, #FF99CC);border: 1.5px dashed #008cff;">
版权声明
</legend>
<span class="btn-info btn-xs">1</span> 本 网 站 名 称:<span style="color: #3333ff"><span style="color: #09ace2; font-size: 15px"><strong>替换你网站名称</strong></span></span><br>
<span class="btn-info btn-xs">2</span> 本站永久网址:<font color="#09ace2">https://www.youblog.cn</font><br>
<span class="btn-info btn-xs">3</span> 当前文章标题:<font color="#09ace2">#postname# </font><br>
<span class="btn-info btn-xs">4</span> 当前文章网址:<font color="#09ace2">#url#</font><br>
<span class="btn-info btn-xs">5</span> 本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长<a href="http://wpa.qq.com/msgrd?v=3&uin=你的QQ号吗&site=qq&menu=yes" target="_blank">QQ</a>进行删除处理。<br>
<span class="btn-info btn-xs">6</span> 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。<br>
<span class="btn-info btn-xs">7</span> 如您发现本站提供资源链接失效,请联系我们处理。<br>
</fieldset>
[/zd-plane]
[zd-plane title="评论框随机一言,样式如本站评论框 "]将代码放入页脚代码即可[reply]
<script>
$.getJSON("https://api.yum6.cn/yan.php?format=json",function(data){
$("#comment").text(data.text);
});
$(function(){
$("#comment").click(function() {
$(this).select();
})
})
</script>
[/reply][/zd-plane]
[zd-plane title="博客增加随便看看功能"][postcard type="list"]231[/postcard][/zd-plane]
[zd-plane title="侧边栏添加滚动播报小工具"][postcard type="list"]286[/postcard][/zd-plane]
[zd-plane title="html自动打字代码"][postcard type="list"]288[/postcard][/zd-plane]
[zd-plane title="随机一言和古诗词"][postcard type="list"]453[/postcard][/zd-plane]
[zd-plane title="一段代码禁止右键查看源代码和按键F12"][postcard type="list"]462[/postcard][/zd-plane]
[zd-plane title="带日历随机一句古诗词"][postcard type="list"]522[/postcard][/zd-plane]
[zd-plane title="文章页面底部美化"][postcard type="list"]554[/postcard][/zd-plane]
[zd-plane title="首页文章缩略图鼠标悬浮放大特效"][postcard type="list"]562[/postcard][/zd-plane]
[zd-plane title="导航菜单栏美化"][postcard type="list"]561[/postcard][/zd-plane]
[zd-plane title="建站时间统计代码"][postcard type="list"]577[/postcard][/zd-plane]
文章标题:网站主题美化代码分享(全部通过测试合集)
本文链接:https://timelogs.cn/archives/212/
许可协议:CC BY-SA 4.0