子比主题

子比主题 - 首页排名榜小工具-汇聚访

子比主题 – 首页排名榜小工具

今天给大家分享一款首页排行榜样式的美化教程，这个排名榜一共是三个文件代码，HTML、CSS和图片，话不多说直接开始(适配夜间）！ 演示效果： 代码部署： [hidecontent type="payshow"] 首先看下图，第一个是分类ID，第二个是在首页出现几个！ 将文章附件的HTML代码放到自己的index.php里面 我目前是放到/wp-content/themes/zibll/index.php里面搜： <?php get_sidebar(); ?> 随后将文章附件里的CSS放在后台自定义CSS样式里！pic文件夹里的图片素材放在网站根目录，可自行在CSS代码里调整图片引入路径哦~ [/hidecontent]
建站笔记
111211
汇聚访的头像-汇聚访核心会员汇聚访1年前
子比主题 - 首页底部登录弹窗模块-汇聚访

子比主题 – 首页底部登录弹窗模块

这是一款子比主题底部登入弹窗模块，在逛网站的时候扒的别人，优化了一下CSS代码，因为他那个样式是直接显示的，感觉不美观，我这里加了点显示延迟，话不多说直接开始！ 演示效果： 代码部署： [hidecontent type="payshow"] PHPCSS 我们到：/wp-content/themes/zibll/func.php这个文件里面，没有这个文件创一个，记得加php头，要不然报错，将下面的代码放到里面! /*子比主题底部登录美化样式*/ function zibll_Add_ons_footer_sidebar_display() { if (is_user_logged_in()) { return; } $sidebar_html = ' <div class="wapnone"> <div class="footSideBar footNoSideBar" style="" data-v-468191f6=""> <div class="left_warp"> <p class="left_word">一键注册登录，免费下载更多的资源教程</p> <ul class="login_ad_list"> <li class="login_ad_item"> <img...
建站笔记
08310
汇聚访的头像-汇聚访核心会员汇聚访1年前
子比主题 - 文章详情页带Tab切换美化-汇聚访

子比主题 – 文章详情页带Tab切换美化

大家好，今天汇聚访给大家带来子比主题的文章详情页带Tab切换的功能，这个效果是腾飞先整出来的，适合所有子比站点，有喜欢的自行部署吧！ 演示效果： 代码部署： [hidecontent type="reply"] 一共两个代码，一个是PHP代码，一个是CSS代码，PHP代码里面我已经引入了CSS文件，你可以引入文件也可以放到：子比主题–>>自定义CSS样式即可！ 定位：/wp-content/themes/zibll/inc/functions/zib-single.php文件，我们找到下面的函数，如下图！ 然后我们将一整块替换我下面的代码，直接替换我修改过的代码！ function zib_single() { zib_single_header(); do_action('zib_single_before'); echo '<article class="article main-bg theme-box box-body radius8 main-shadow">'; echo ' <div class="tabs"> <div class="tab active" data-target="#postsposcontent"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-view"></use></svg> 详情</div> <div class="tab"...
建站笔记
1116712
汇聚访的头像-汇聚访核心会员汇聚访1年前
子比主题 - 专题&分类聚合卡片上移-汇聚访

子比主题 – 专题&分类聚合卡片上移

这是一个子比主题小工具分类聚合卡片，今天看到别的站点这个挺好看的，然后就弄了下来，今天分享给大家！原作者是狐狸库！！ 演示效果： 代码部署： [hidecontent type="reply"] 把下方代码放到自定义代码css中 两个二选一 都一样！ 第一款第二款 .clearfix .zib-widget.term-aggregation .term-img { width: 18.5em; } .clearfix .zib-widget.term-aggregation .term-img .graphic { margin-top: -40px; } @media screen and (min-width:1024px) and (max-width: 1240px) { .clearfix .zib-widget.term-aggregation .term-img...
建站笔记
1319310
汇聚访的头像-汇聚访核心会员汇聚访1年前
子比主题 - 侧边栏鼠标移入悬浮&扫光效果百度一下小工具-汇聚访

子比主题 – 侧边栏鼠标移入悬浮&扫光效果百度一下小工具

这是一款适配于子比主题的侧边栏百度一下小工具，之前好多一个彩色渐变的，本次带来的是鼠标移入悬浮及扫光效果的一款样式，有喜欢的自行部署吧！ 演示效果： 代码部署： [hidecontent type="reply"] 定位：WP后台 – 外观 – 小工具中找到文章页-侧边栏选择添加自定义HTML代码，把下方代码放进去即可： <style> /*www.huijuf.com*/ .mx-search-widget { width: 100%; margin: 15px 0; position: relative; overflow: hidden; border-radius: 10px; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); background: linear-gradient(145deg,...
建站笔记
51009
汇聚访的头像-汇聚访核心会员汇聚访1年前
子比主题 - 网站底部添加滚动波浪-汇聚访

子比主题 – 网站底部添加滚动波浪

今天分享一个自适应的底部波浪部署教程，希望对大家有用！手机端PC端自适应的哦~ 演示效果： 代码部署： [hidecontent type="payshow"] CSSPHP 把下面代码放到主题设置里的自定义CSS代码里！ /*网站底部波浪www.huijuf.com*/ .waves { position: relative; width: 100%; height: 15vh; margin-bottom: -7px; min-height: 50px; max-height: 80px; } .parallax>use { animation: move-forever 25s cubic-bezier(.55, .5, .45, .5)infinite; } .parallax>use:nth-child(1) {...
建站笔记
011610
汇聚访的头像-汇聚访核心会员汇聚访1年前
子比主题 - 侧边栏小工具会员广告小模块-汇聚访

子比主题 – 侧边栏小工具会员广告小模块

侧边小工具会员广告小模块，炫彩色的美化样式，非常好看，给自己的子比主题侧边加上一款会员模块，很实用 演示效果： 代码部署： [hidecontent type="reply"] 定位：WP后台 - 外观 - 小工具中找到文章页-侧边栏选择添加自定义HTML代码，把下方代码放进去即可： <style> .widget-adss .asr { display: block; padding: 30px 15px; text-align: center; color: #fff !important; background: #64ddbb; border-radius: 4px; overflow: hidden; } .widget-adss .asr .btn {...
建站笔记
47914
汇聚访的头像-汇聚访核心会员汇聚访1年前
子比主题 - notyf提示框扫光效果美化-汇聚访

子比主题 – notyf提示框扫光效果美化

今天逛别人站点的时候，发现这个效果很好看，于是就扒了下来，今天就分享给大家吧！原作者是墨星哈！ 演示效果： 代码部署： [hidecontent type="payshow"] 复制下面css代码 进入子比主题设置-全局-自定义代码-自定义css代码 .notyf{border-radius:var(--main-radius) 0 0 var(--main-radius);position:relative;overflow:hidden;backdrop-filter:blur(8px);box-shadow:0 8px 32px rgba(0,0,0,0.1);transition:all 0.3s ease}.notyf:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(0,0,0,0.2)}@keyframes ripple{0%{background-position:0% 50%;box-shadow:0 0 25px rgba(255,255,255,0.4)}50%{background-position:100% 50%;box-shadow:0 0 40px rgba(255,255,255,0.5)}100%{background-position:0% 50%;box-shadow:0 0 25px rgba(255,255,255,0.4)}}@keyframes shine{0%{transform:translateX(-100%) translateY(-100%) rotate(25deg);opacity:0}25%{opacity:0.5}75%{opacity:0.5}100%{transform:translateX(100%)...
建站笔记
010713
汇聚访的头像-汇聚访核心会员汇聚访1年前
子比主题 - 会员引导悬浮窗[代码版]-汇聚访

子比主题 – 会员引导悬浮窗[代码版]

之前有倦意大佬发过插件版本的，今天分享一下代码版本的吧！ 演示效果： 代码部署： [hidecontent type="payshow"] 放自定义顶部或底部html都可以，也可以放文件里，都随意！图片可自行更换哦~ <!-- Made by Juanyi --> <!-- 和子比有兼容问题的记得注释掉，如果没引用Jquery记得把注释取消 --> <!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script> --> <script src="https://cdn.bootcdn.net/ajax/libs/js-cookie/3.0.5/js.cookie.js"></script> <style> /* 活动背景图片 */ .vip-login-tip { background-image: url(https://pic1.imgdb.cn/item/6900b5db3203f7be00ac790b .png) } </style> <script> //快捷施法专区，懒人福音⬇️⬇️⬇️ // 结束时间 var...
建站笔记
011612
汇聚访的头像-汇聚访核心会员汇聚访1年前
子比主题 - 幻灯片底部虚化-汇聚访

子比主题 – 幻灯片底部虚化

今天给大家分享一款样式，这款样式是可以让幻灯片底部虚化的，结合起来非常好看！ 演示效果： 代码部署： [hidecontent type="payshow"] 将代码放到后台自定义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 / 0%) 0%, var(--body-bg-color) 100%); }...
建站笔记
09312
汇聚访的头像-汇聚访核心会员汇聚访1年前
1…2728293031…37跳转