子比美化 第7页
子比主题美化相关教程
分类
排序
2026-02-07
评论可见
子比主题美化-底部添加蓝色波浪-识趣者资源

子比主题美化-底部添加蓝色波浪

教程开始 进入宝塔面板，进入子比主题文件夹（zibll）找到footer.php文件夹，在footer标签(</footer>)下面添加下面代码。 [hidecontent type="reply"] <!--底部波浪开始--> <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"...
识趣资源的头像-识趣者资源
至尊会员识趣资源· 48天前
#子比美化
 2026-02-07
评论可见
子比主题 – 给页脚二维码加动态Border-识趣者资源

子比主题 – 给页脚二维码加动态Border

[hidecontent type="reply"] /*底部板块三图片border*/ .footer-miniimg { p{ position: relative; &:hover { filter: contrast(1.1); } &:active { filter: contrast(0.9); } &::before, &::after{ content: ""; border: 2px solid; border-image: linear-gradient(45deg, gold, deeppink) 1; position: absolute; top: -5px; left:...
识趣资源的头像-识趣者资源
至尊会员识趣资源· 48天前
#子比美化
 2026-02-07
评论可见
子比主题 – 侧边动态时钟与温馨问候语-识趣者资源

子比主题 – 侧边动态时钟与温馨问候语

将下面的代码放到：外观->>小工具->>自定义HTML的里面然后将小工具放到你想放到的位置 [hidecontent type="reply"] <div class="greeting-container"> <div class="clock-face"> <div class="clock-time" id="clock-time"></div> </div> <div class="greeting-text"> <div class="greeting" id="greeting"></div> <div class="tip" id="tip"></div> </div> </div> <style> .greeting-container { width: 100%; height: 150px; background-color: #f5f5f5; border-radius: 10px; box-shadow: 0 0...
识趣资源的头像-识趣者资源
至尊会员识趣资源· 48天前
#子比美化
 2026-02-07
评论可见
子比主题 – 底部添加波浪滚动-识趣者资源

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

教程 [hidecontent type="reply"] SVGCSS 将下面的代码放到/wp-content/themes/zibll/footer.php文件里面的的标签前面即可，如果不会的话直接看下图即可！ <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto"style="bottom: 4px;"> <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"></path>...
识趣资源的头像-识趣者资源
至尊会员识趣资源· 48天前
#子比美化
 2026-02-07
评论可见
子比主题 – 文章侧边倒计时小工具-识趣者资源

子比主题 – 文章侧边倒计时小工具

教程 [hidecontent type="reply"] $widgets_files = array( 'tengfei_data.php', /*小工具文件名*/ ); foreach ($widgets_files as $file) { require get_template_directory() . '/tengfei/widgets/' . $file; } 子比主题 – 文章侧边倒计时小工具下载 [/hidecontent]
识趣资源的头像-识趣者资源
至尊会员识趣资源· 48天前
#子比美化
 2026-02-07
评论可见
子比主题 – 动态时钟与问候语小工具-识趣者资源

子比主题 – 动态时钟与问候语小工具

演示图 [hidecontent type="reply"] <div class="dynamic-greeting"> <div class="time-section"> <div class="time-display"> <span id="hours">00</span> <span class="colon">:</span> <span id="minutes">00</span> <span class="colon">:</span> <span id="seconds">00</span> </div> <div class="date-display" id="date"></div> </div> <div class="greeting-section"> <div class="greeting-text" id="greeting"></div> <div class="greeting-tip" id="tip"></div> </div> </div> <style>...
识趣资源的头像-识趣者资源
至尊会员识趣资源· 48天前
#子比美化
 2026-02-07
评论可见
子比主题 – 动态背景符号元素效果-识趣者资源

子比主题 – 动态背景符号元素效果

第一步 首先我们将下面的代码放到：子比主题–>>自定义底部HTML代码即可！ [hidecontent type="reply"] <link rel="stylesheet" href="/wp-content/themes/zibll/css/tengfei/yuansufuhao.css" /> <script>$('head').before('<div class="container1"><div class="inner-container1"><div class="shape"></div></div><div class="inner-container1"><div class="shape"></div></div></div>');</script> <script>$(document).ready(function(){var html='';for(var i=1;i<=50;i++){html+='<div class="shape-container--'+i+' shape-animation"><div class="random-shape"></div></div>'}document.querySelector('.shape').innerHTML+=html});</script> [/hidecontent] 第二步 我们将附件直接下载然后在：/wp-content/themes/zibll/目录下上传，也就是子比根目录 [hidecontent type="reply"] 动态元素符合背景样式1.zip下载 [/hidecontent]
识趣资源的头像-识趣者资源
至尊会员识趣资源· 48天前
#子比美化
 2026-02-07
评论可见
子比美化 – 网站鼠标样式美化-识趣者资源

子比美化 – 网站鼠标样式美化

教程： 可自行去网上下载个喜欢的鼠标样式，可以是图片可以是cur格式，自行将鼠标样式上传至某个目录，修改下面代码内的链接/路径既可。 [hidecontent type="reply"] 网站后台->Zibll主题设置->全局&功能->自定义代码->自定义CSS样式 /*鼠标样式修改开始*/ body { cursor: url(无链接时鼠标样式文件路径), default; } a:hover, .cursor:hover, button:hover, svg:hover { cursor: url(有链接时鼠标样式文件路径), pointer; } /*鼠标样式修改结束*/ 鼠标样式猫爪下载 [/hidecontent]
识趣资源的头像-识趣者资源
至尊会员识趣资源· 48天前
#子比美化
 2026-02-07
评论可见
子比美化-给文章标题文字添加彩色渐变效果-识趣者资源

子比美化-给文章标题文字添加彩色渐变效果

演示图 教程 把下面代码放到后台自定义CSS [hidecontent type="reply"] /*文章标题加上渐变彩色文字 开始*/ .item-heading :hover, .text-ellipsis :hover, .text-ellipsis-2 :hover, .links-lists :hover { background-image: -webkit-linear-gradient(30deg, #32c5ff 25%, #b620e0 50%, #f7b500 75%, #20e050 100%); -webkit-text-fill-color: transparent; -webkit-background-clip: text; -webkit-background-size: 200% 100%; -webkit-animation: maskedAnimation...
识趣资源的头像-识趣者资源
至尊会员识趣资源· 48天前
#子比美化
 2026-02-07
评论可见
子比美化-幻灯片底部虚化-识趣者资源

子比美化-幻灯片底部虚化

教程 放到后台自定义CSS [hidecontent type="reply"] .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%); } [/hidecontent]
识趣资源的头像-识趣者资源
至尊会员识趣资源· 48天前
#子比美化
 2026-02-07
评论可见
子比美化-给首页左侧添加联系站长按钮-识趣者资源

子比美化-给首页左侧添加联系站长按钮

演示图 教程 放到后台自定义代码-自定义头部HTML [hidecontent type="reply"] <style> @keyframes shangxa { 0%, 100%, 20%, 50%, 80% { transition-timing-function: cubic-bezier(0.215,.61,.355,1); transform: translate3d(0,0,0); } 40%, 43% { transition-timing-function: cubic-bezier(0.755,0.50,0.855,0.060); transform: translate3d(0,-10px,0); } 70% { transition-timing-function: cubic-bezier(0.755,0.050,0.855,0.060); transform: translate3d(0,-6px,0); }...
识趣资源的头像-识趣者资源
至尊会员识趣资源· 48天前
#子比美化
 2026-02-07
评论可见
子比美化-评论框添加背景图片-识趣者资源

子比美化-评论框添加背景图片

演示图 教程： 放到后台自定义CSS [hidecontent type="reply"] /*评论背景图*/ textarea#comment { background-color:transparent; background:linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)),url(https://47zhe.cn/img/pinglun.gif) right 10px bottom 0px no-repeat; background-size: contain; -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...
识趣资源的头像-识趣者资源
至尊会员识趣资源· 48天前
#子比美化
 2026-02-07
评论可见
子比美化-粉色细节优化-识趣者资源

子比美化-粉色细节优化

教程 后台自定义CSS [hidecontent type="reply"] /*粉色细节优化*/ .navbar-top .navbar-right .sub-menu { -webkit-box-shadow: 0 1px 4px 0 #ef71b2 inset; -moz-box-shadow: 0 1px 4px 0 #ef71b2 inset; box-shadow: inset 0 1px 4px 0 #ef71b2; } .posts-item.card{ -webkit-box-shadow: 0 1px...
识趣资源的头像-识趣者资源
至尊会员识趣资源· 48天前
#子比美化
 2026-02-07
评论可见
子比美化-侧边栏用户信息展示小工具美化-识趣者资源

子比美化-侧边栏用户信息展示小工具美化

给小工具头部添加一个猫耳朵吧！ 教程： 放到后台自定义CSS [hidecontent type="reply"] .sidebar { height: auto; padding: 50px 0px 0px; background: url(图片链接) center top / 100% no-repeat; transform: translate3d(0px, 0px, 0px); } 猫耳朵图片下载 [/hidecontent]
识趣资源的头像-识趣者资源
至尊会员识趣资源· 48天前
#子比美化
 2026-02-07
评论可见
子比美化-文章卡片下载按钮样式美化-识趣者资源

子比美化-文章卡片下载按钮样式美化

演示图 教程： 首先一共三步，有两行php代码和一个css代码，话不多说直接开始教程 [hidecontent type="reply"] 步骤一： 下面的PHP代码放到子比文件：/wp-content/themes/zibll/inc/functions/zib-posts-list.php的大概268行，如下图 $get_permalink = get_permalink();//添加文章链接 步骤二： 下面的PHP代码放到子比文件：/wp-content/themes/zibll/inc/functions/zib-posts-list.php的大概310行，如下图 $html = '<a class="down" target="_blank" href="' . $get_permalink . '">下载</a>';//添加下载按钮 步骤三： 添加CSS代码 background: linear-gradient(to right, #4f6dee, #67bdf9);这个是颜色，自己需求改 下面代码直接放到后台css里即可 /*文章卡片下载按钮*/ a.down { display: inline-block;...
识趣资源的头像-识趣者资源
至尊会员识趣资源· 48天前
#子比美化
1…56789…23跳转