子比美化 第2页
2025-10-08
10-08
子比主题 - 优雅网站弹窗样式-汇聚访

实用子比主题 – 优雅网站弹窗样式

这是子比主题的一款网站弹窗样式，当然你也可以用于别的网站，虽然我没测试但是也是通用的，如果你想在别的程序使用，也可以看看这篇文件的部署教程，如果有喜欢的话自行查看部署吧！ 演示效果： 代码部署： [hidecontent type="reply"] 首先在文章附件里把压缩包下载下来，然后解压出来找到huijuf_dialog.js这个JS文件，然后放在网站根目录下，随后在子比后台 - 自定义头部HTML代码中添加以下代码即可： <script src="huijuf_dialog.js" defer></script> [/hidecontent]
子比主题建站笔记
2025-10-07
10-07
子比主题 – 文章卡片弹窗美化样式-汇聚访

实用子比主题 – 文章卡片弹窗美化样式

这是子比主题的文章卡片弹窗的美化样式，起初这个效果是在图酷的站点上看到的，今天就分享给大家，一般来说用处不是特别大，发出来也是给有需要的人，教程比较详细，有用得到的自行部署吧！ 演示效果： 代码部署： [hidecontent type="payshow"] 一共两组代码，一个是JS代码和CSS代码，话不多说直接开始部署教程！ 特别提醒：里面有两个跳转按钮：阅读全文和探索更多，阅读全文是用户当前点的文章，探索更多是固定的跳转链接，需要自己改自己的链接在JS里面的/user/product这个代码，自己改自己的跳转链接即可！ CSSJs 定位：子比主题–>>自定义CSS样式直接把下方代码放进去即可！ /*汇聚访：www.huijuf.com*/ .custom-popup-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); z-index: 9999; justify-content: center; align-items: center;...
子比主题建站笔记
2025-10-07
10-07
子比主题 – CSS动态渐变背景（三款样式）-汇聚访

实用子比主题 – CSS动态渐变背景（三款样式）

这是子比主题的三款CSS动态渐变背景样式的美化，图片中我仅仅展示了静态的样式效果，原作者为鼠子，对比那些svg作为背景图来说还是这个比较好一些，不会受到浏览器的兼容性问题，有喜欢的自行部署吧！ 演示效果： 第一款第二款第三款 代码部署： [hidecontent type="reply"] 三款都是CSS代码，直接将代码放到：子比主题–>>自定义CSS样式即可！ 第一款第二款第三款 body:before { content: ""; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: -520; pointer-events: none } body:before { background: linear-gradient(90deg,#f795331a,#f370551a 15%,#ef4e7b1a 30%,#a166ab1a,#5073b81a,#1098ad1a,#07b39b1a 86%,#6dba821a) }...
子比主题建站笔记
2025-10-07
10-07
子比主题 – 邮箱通知样式美化（四款样式）-汇聚访

实用子比主题 – 邮箱通知样式美化（四款样式）

这是子比主题的邮箱通知样式效果美化，一共有四种好看独特的样式，后续会陆续同步更新，同时也感谢那些无私奉献的作者，教程也比较简单便捷，有看到自己喜欢的样式的话就自行部署吧！ 演示效果： 第一款第二款第三款第四款 代码部署： [hidecontent type="reply"] 定位：/wp-content/themes/zibll/inc/functions/zib-email.php文件里面，我们搜$content = '，搜了之后，我们如下图替换子比的样式，如下图所示： 第一款第二款第三款第四款 $content = ' <style> .gradient-mail{ background:#eaf7ff; padding:40px 0; font-family: "Helvetica Neue","PingFang SC",Arial,sans-serif; } .gradient-mail .box{ max-width:620px; margin:auto; border-radius:24px; background:linear-gradient(140deg,#fff 60%,#d6eaff 100%); box-shadow:0 4px 22px rgba(66,150,255,0.10);...
子比主题建站笔记
2025-10-06
10-06
子比主题 – 文章后渐变通知栏美化-汇聚访

实用子比主题 – 文章后渐变通知栏美化

这是一款给子比主题文章后面增加一个渐变通知栏的样式美化效果，原为腾飞发出来的，今天在这里分享给大家，代码部署起来也比较容易，大家如果有需要的有喜欢的自行部署即可！ 演示效果： 代码部署： [hidecontent type="reply"] 定位：子比主题–>>文章&列表–>>文章页面–>>在文章内容后-插入内容，将下面的代码放里面即可！ /*汇聚访：www.huijuf.com*/ <style> .custom_notice_banner_wrapper_20240712{width:100%;display:flex;flex-direction:column;gap:15px;margin:20px 0;font-family:"PingFang SC","Microsoft YaHei",sans-serif}.custom_notice_banner_20240712{width:100%;height:50px;border-radius:12px;overflow:hidden;position:relative;box-shadow:0 4px 20px rgba(0,0,0,0.15);transition:all 0.4s cubic-bezier(0.175,0.885,0.32,1.275);border:1px solid rgba(255,255,255,0.2)}.custom_notice_banner_20240712:hover{transform:translateY(-3px) scale(1.01);box-shadow:0 8px 25px rgba(0,0,0,0.2);border:1px solid rgba(255,255,255,0.4)}.custom_notice_banner_content_20240712{display:flex;align-items:center;justify-content:center;height:100%;width:100%;position:relative;z-index:5;padding:0 20px}.custom_notice_banner_icon_20240712{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,0.25);backdrop-filter:blur(5px);margin-right:15px;color:white;box-shadow:0 2px 10px rgba(0,0,0,0.1);animation:custom_notice_banner_pulse_20240712 2s infinite}.custom_notice_banner_text_20240712{color:white;font-size:16px;font-weight:500;text-align:center;text-shadow:0 2px 4px rgba(0,0,0,0.2);letter-spacing:1px;background:rgba(255,255,255,0.1);padding:6px 15px;border-radius:20px;backdrop-filter:blur(5px)}.custom_notice_banner_20240712.purple_gradient{background:linear-gradient(-45deg,#9c27b0,#673ab7,#3f51b5,#e040fb,#9c27b0);background-size:400%...
子比主题建站笔记
2025-10-06
10-06
子比主题 – 专题&聚合小工具更多文章美化-汇聚访

实用子比主题 – 专题&聚合小工具更多文章美化

今天给大家带来一款专题&聚合小工具的美化，之前也发过这个小工具的几个美化，今天给大家分享一下这个更多文章按钮的样式美化，我看好多站点都发出来了但是他们发的都不生效，我这里做了修复，有喜欢的自行部署吧！ 演示效果： 代码部署： [hidecontent type="reply"] 定位：子比主题–>>自定义CSS样式把以下代码放进去即可： /*汇聚访：www.huijuf.com*/ .but.p2-10.px12.c-blue.hide-sm.shrink0{ background:linear-gradient(90deg, #40a6fa 0, #356aef 100%); color:#fff !important; border:none !important; font-size:13px; } .user-btns .jb-blue:hover{ filter:brightness(1.08) saturate(1.08); box-shadow:0 6px 18px -6px #356aef5c; } .user-btns a, .user-btns .but{ padding:0 22px;...
子比主题建站笔记
2025-10-03
10-03
子比主题 - 幻灯片循环滚动波浪动画-汇聚访

实用子比主题 – 幻灯片循环滚动波浪动画

这是子比主题的一款幻灯片循环滚动波浪动画，可以放在任何位置，我这里放在了多功能组件这里，看起来非常不错，教程也比较简单属于一键部署，有喜欢的自行部署吧！ 演示效果： 代码部署： [hidecontent type="payshow"] CSSJS 定位：网站后台->Zibll主题设置->全局&功能->自定义代码->自定义CSS样式中添加以下代码： /*汇聚访：www.huijuf.com*/ .parallax { fill: var(--body-bg-color); } .parallax > use { animation: move-forever 30s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite; } .parallax > use:nth-child(1) { animation-delay: -2s; animation-duration: 7s; opacity:...
子比主题建站笔记
2025-10-02
10-02
子比主题 – 用户中心过渡样式美化-汇聚访

实用子比主题 – 用户中心过渡样式美化

这是子比主题的用户中心过渡效果的美化，之前曾经发过一个首页幻灯片的样式美化，这个效果看起来还是挺不错的，整体效果很好看，有喜欢的自行部署吧！如果需要首页幻灯片过渡的啊，可以在本站搜索一下！ 演示效果： 代码部署： [hidecontent type="reply"] 定位：子比主题后台 - 自定义css样式中添加以下代码： /*子比主题 – 用户中心过渡样式美化*/ .absolute::before { content: ''; display: block; position: absolute; left: 0; top: 58%; right: 0; bottom: 0; transform: scale(1.01); background: linear-gradient(180deg, rgb(255 255 255 /...
子比主题建站笔记
2025-10-01
10-01
子比主题 - 排行榜重置版小工具-汇聚访

实用子比主题 – 排行榜重置版小工具

这是一款子比主题的排行榜重置小工具，原作者是小极开发的，今天给大家分享出来，总的来说还是挺不错的，作者改了修改了许多功能，有喜欢的自行下载部署吧！ 演示效果： 重制版功能： 文章发布排行：显示发布文章数量最多的用户 论坛发帖排行：显示论坛发帖数量最多的用户（需开启论坛功能） 今日签到统计：实时显示今天已签到人数 昨日签到统计：显示昨天的签到人数 代码部署： [hidecontent type="payshow"] 首先定位：/wp-content/themes/zibll/func.php文件，没有这个文件自己创建一个，记得加上php头，要不然会报错，将下面的代码放里面即可！ // 加载子比用户排行榜小工具重置版 if (file_exists(get_theme_file_path('/zibll-user-ranking-pro/index.php'))) { require_once get_theme_file_path('/zibll-user-ranking-pro/index.php'); } 然后在本贴附件中下载相关文件，直接放在/wp-content/themes/zibll/目录下即可！ [/hidecontent]
子比主题建站笔记
2025-10-01
10-01
子比主题 - 新版文章卡片广告位小工具-汇聚访

实用子比主题 – 新版文章卡片广告位小工具

这是子比主题的一款文章卡片广告位小工具，之前也发过这个小工具只不过那个看着有点简陋，这个是在那个的基础上又增添了一些新东西，设置选项也增加了许多，有喜欢的自行部署吧！ 演示效果： 代码部署： [hidecontent type="reply"] 定位：/wp-content/themes/zibll在这个路径下的functions.php或者是func.php中添加以下代码： if (file_exists(get_theme_file_path('/inc/widgets/ad-card-widget.php'))) { require_once get_theme_file_path('/inc/widgets/ad-card-widget.php'); } /*汇聚访：www.huijuf.com*/ 然后把本文附件中的文件放在/wp-content/themes/zibll/inc/widgets这个目录下即可！ [/hidecontent]
子比主题建站笔记
1234…23跳转