WordPress子比主题美化教程-备忘录-洛秋资源小站

源地址：https://www.tianyubk.com/253.html

网站设置动态标题

在子比主题后台 – 自定义代码 – 自定义 javascript 代码里面添加下面代码：

//【网站动态标题】开始 天域博客 www.tianyubk.com
var OriginTitile = document.title,
titleTime;
document.addEventListener("visibilitychange",
function() {
    if (document.hidden) {
        document.title = "你别走吖 Σ(っ °Д °;)っ";
        clearTimeout(titleTime)
    } else {
        document.title = "(/≧▽≦/)你又回来啦！ " ;
        titleTime = setTimeout(function() {
            document.title = OriginTitile
        },
        2000)
    }
});
//【网站动态标题】结束 天域博客 www.tianyubk.com

网站添加侧边彩色滚动条

在子比主题后台 – 自定义代码 – 自定 CSS 样式代码里面添加下面代码：

/*【彩色滚动条样式】开始 天域博客 www.tianyubk.com */
::-webkit-scrollbar {
  width: 7px;  
  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;
}
/*【彩色滚动条样式】结束 天域博客 www.tianyubk.com */

网站鼠标样式修改

在子比主题后台 – 自定义代码 – 自定 CSS 样式代码里面添加下面代码：

/*【鼠标指针样式美化】开始 天域博客 www.tianyubk.com */
/** 普通**/body{cursor: url(https://bk.cos.tianyubk.com/%E7%BE%8E%E5%8C%96/%E9%BC%A0%E6%A0%87%E6%A0%B7%E5%BC%8F/001/1-1.cur), default;}
/** 链接**/a:hover,.cursor:hover,button:hover,svg:hover{cursor:url(https://bk.cos.tianyubk.com/%E7%BE%8E%E5%8C%96/%E9%BC%A0%E6%A0%87%E6%A0%B7%E5%BC%8F/001/1-2.cur), pointer;}
/*【鼠标样式美化】开始 天域博客 www.tianyubk.com */

网站底部添加好看的蓝色波浪 – 更新主题需要备份

将下面的 PHP 代码加入到主题目录下：themes/zibll/footer.php 文件中的 </footer>下面：

<!--【底部蓝色波浪】开始 天域博客 www.tianyubk.com -->
<div class="wiiuii_layout">
<svg class="editorial"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="0 24 150 28"
     preserveAspectRatio="none">
 <defs>
 <path id="gentle-wave"
 d="M-160 44c30 0 
    58-18 88-18s
    58 18 88 18 
    58-18 88-18 
    58 18 88 18
    v44h-352z" />
  </defs>
  <g class="parallax">
   <use xlink:href="#gentle-wave" x="50" y="0" fill="#4579e2"/>
   <use xlink:href="#gentle-wave" x="50" y="3" fill="#3461c1"/>
   <use xlink:href="#gentle-wave" x="50" y="6" fill="#2d55aa"/>  
  </g>
</svg>
</div>
<style type='text/css'>
.parallax > use{animation: move-forever 12s linear infinite;}.parallax > use:nth-child(1){animation-delay: -2s;}.parallax > use:nth-child(2){animation-delay: -2s; animation-duration: 5s;}.parallax > use:nth-child(3){animation-delay: -4s; animation-duration: 3s;}@keyframes move-forever{0%{transform: translate(-90px, 0%);} 100%{transform: translate(85px, 0%);}}.wiiuii_layout{width: 100%;height: 40px;position: relative;overflow: hidden;z-index: 1;background: var(--footer-bg);}.editorial{display: block; width: 100%; height: 40px; margin: 0;}
</style>
<!--【底部蓝色波浪】开始 天域博客 www.tianyubk.com -->

网站添加添加居中复制透明提示框

1、在子比主题后台 – 自定义代码 – 自定义 javascript 代码里面添加下面代码：

//【透明复制提示框】开始 天域博客 www.tianyubk.com
document.body.oncopy = function() {layer.msg('<p style="font-weight: 700;">【天域博客 www.tianyubk.com】<br>复制成功，若要转载请务必保留原文链接！</p>', function(){});};
//【透明复制提示框】结束 天域博客 www.tianyubk.com

2、在子比主题后台 – 自定义代码 – 自定义底部 HTML 代码里面添加下面代码：

<!--【透明复制提示框】开始 天域博客 www.tianyubk.com -->
<script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>
<!--【透明复制提示框】结束 天域博客 www.tianyubk.com -->

用户头像呼吸光环+鼠标悬停旋转放大

在子比主题后台 – 自定义代码 – 自定 CSS 样式代码里面添加下面代码：

/*【用户头像呼吸光环+鼠标悬停旋转放大】开始 天域博客 www.tianyubk.com */
.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;}}
/*【用户头像呼吸光环+鼠标悬停旋转放大】结束 天域博客 www.tianyubk.com */

首页文章列表悬停上浮

在子比主题后台 – 自定义代码 – 自定 CSS 样式代码里面添加下面代码：

/*【首页文章列表悬停上浮】开始 天域博客 www.tianyubk.com */
@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);}}
/*【首页文章列表悬停上浮】结束 天域博客 www.tianyubk.com */

评论框添加背景图片

在子比主题后台 – 自定义代码 – 自定 CSS 样式代码里面添加下面代码：

/*【评论背景图】开始 天域博客 www.tianyubk.com */
textarea#comment{border: 1px solid var(--main-border-color);background:url(https://bk.cos.tianyubk.com/%E7%BE%8E%E5%8C%96/%E8%AF%84%E8%AE%BA%E6%A1%86%E5%9B%BE%E7%89%87/pinglun.png) 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;}
@media (max-width:440px){textarea#comment{background-size:93%;}}
/*【评论背景图】结束 天域博客 www.tianyubk.com */

温馨提示：本文最后更新于2024-07-21 01:23:24，某些文章具有时效性，若有错误或已失效，请在下方留言或联系洛秋站长。

本网站名称：洛秋资源小站
默认解压密码：luoqiu.site
①本站所有资源免费，收取的费用仅为抵扣人工测试和服务器日常维护带来的消耗成本，请须知。
②因源码、模板、插件等程序具有可复制性，一经出售概不退款。
③本站部分资源来源网络或者用户投稿，如有侵权请联系删除。
④本站资源仅用于个人学习和交流，如用于商业使用请选择正版程序。使用非正版程序须在24小时内卸载删除。
➣详细的版权声明请点击文章版权声明查看。
下载/阅读均默认代表您已详细阅读版权声明并同意承担可能造成的所有损失及后果！

THE END