🎉 广告位招租!
详情
评论
问答

您可以通过搜索或浏览分类列表来找到您期望下载的资源。随后,点击资源介绍页右侧的下载链接按钮,依据提示信息进行操作即可。

大部分资源可积分免费下载,部分资源须付费才能下载。

本网站提供的下载资源均为网络搜集,仅供个人学习和交流使用。对于版权问题,请用户自行判断并承担相应责任。

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

子比主题 – 文章详情页带Tab切换美化-剑去主题 - 子比美化、B2美化、B2子主题!
子比主题 – 文章详情页带Tab切换美化
此内容为付费阅读,请付费后查看
300积分
付费阅读
已售 434
剑去主题

出售B2子主题,限时促销!请直接去授权中心购买。

今天给大家分享一款自用的子比主题文章详情页,很早之前就想发出来,因为没有适配,看很多人需要所以我抓紧适配了一下,话不多说直接开始,喜欢的自行部署!

图片[1]-子比主题 – 文章详情页带Tab切换美化-剑去主题 - 子比美化、B2美化、B2子主题!

代码部署

一共两个代码,一个是PHP代码,一个是CSS代码,你可以引入文件也可以放到:子比主题–>>自定义CSS样式即可!

定位:/wp-content/themes/zibll/inc/functions/zib-single.php文件,我们找到下面的函数,如下图

CSS

你可以引入文件,如果不会引入直接无脑丢到子比主题:子比主题–>>自定义CSS样式即可!

.panel-heading .fa{transition:transform 0.3s ease;transform:rotate(-45deg);padding:5px;color:#556af1;}.panel-heading:not(.collapsed) .fa{transform:rotate(0deg);}.question-container{border-radius:6px;border:solid 1px var(--main-border-color);overflow:hidden;border-bottom:solid 0px rgba(50,50,50,0);}.question{cursor:pointer;position:relative;margin-bottom:10px;padding:2.5rem 4rem;margin-bottom:0;border-bottom:solid 1px var(--main-border-color);}.question i{position:absolute;right:0;top:50%;transform:translateY(-50%);}.question.active i.fa.fa-plus{display:none;}.question.active i.fa.fa-minus{display:inline-block;}.answer.active{display:unset;background-color:var(--focus-color);flex:1 1 auto;min-height:1px;color:#fff !important;padding:2.5rem 4.5rem;display:block;}@keyframes bounce{0%{transform:scaleY(0.3);background-color:green;}50%{transform:scaleY(1);background-color:orange;}100%{transform:scaleY(0.3);background-color:green;};}.tab2_content.active{display:block;}.tab2_content.active{display:block;}#accordionhelp-content{margin-bottom:20px;}.tab-container{width:80%;margin:auto;}.tabs{display:flex;cursor:pointer;padding:20px 0;}.tab{padding:10px 15px;transition:background-color 0.3s;border-radius:10px;background:var(--muted-bg-color);margin:0px 5px;font-size:14px;}.tab.active{color:#fff;background-color:#556af1;transform:scale(1.05);box-shadow:0 6px 12px rgba(0,0,0,0.3);transition:all 0.3s ease;}.tab-content{position:relative;overflow:hidden;}.tab2_content{display:none;}.button{display:inline-block;padding:10px 20px;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;cursor:pointer;border:none;border-radius:5px;background-color:#556af1;color:#fff;box-shadow:0 4px 8px rgba(0,0,0,0.2);transition:all 0.3s ease;}.button:hover{background-color:#3e53c4;box-shadow:0 6px 12px rgba(0,0,0,0.3);}
😉 阿里云产品年付99元续费99元热卖,戳我领取
👋 部分教程由剑去了无痕原创!受限水平,不足之处,请见谅!

全站教程均经过站长测试,如因版本更替出现错误,请提醒。
本站资源均为作者提供和网友投稿,仅供学习使用,请在下载后24小时内删除,谢谢合作!
© 版权声明
THE END
喜欢就支持一下吧
点赞176 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容