详情
评论
问答

子比主题美化:仿哔哩哔哩会员购买弹窗背景

子比主题(Zibll)的会员购买弹窗加一张仿哔哩哔哩的 22 / 33 看板娘背景,只需要把 CSS 加到自定义样式里,不用改任何主题文件。

效果

给会员购买弹窗增加哔哩哔哩背景后,主要有这些好处:

  • 提升视觉趣味性:22 / 33 看板娘出现在弹窗底部两侧,弱化付费表单的枯燥感,让页面更活泼。
  • 强化品牌氛围:B 站元素自带「会员 / 付费」的认知暗示,用户对开通 VIP 的接受度更高。
  • 不遮挡核心信息:背景图定位在底部左右角落,尺寸控制在 20%,完全不会挡住价格、权益、支付按钮。
  • 零文件改动:只写入后台「自定义 CSS」或主题的 CSS 选项,升级子比主题不丢失、不白屏。

下面是使用前(默认白底弹窗)与使用后(已加 bilibili 看板娘背景)的对比:

子比主题美化:仿哔哩哔哩会员购买弹窗背景-小洋筑记 子比主题美化:仿哔哩哔哩会员购买弹窗背景-小洋筑记

 

教程

将下方代码放置于后台 → 外观 → 自定义 → 额外 CSS(或主题自带的「自定义代码 → 自定义 CSS」)中,保存即可生效。

注意:下面代码直接引用了 B 站官方的 22_open / 33_open 图片地址。如果你担心外链失效或被防盗链,建议先把两张图下载到自己站点的 /wp-content/uploads/ 目录,再把 URL 替换掉。

 

 

代码说明:

  • .payvip-modal 是子比主题会员购买弹窗最外层容器的类名。
  • background-image 同时引入 22(蓝发)和 33(白发)两张 PNG,分别显示在左下角和右下角。
  • background-position: 0 100%, 100% 100% 把两张图分别固定在左下、右下。
  • background-size: 20% 把单张图宽度限制在弹窗宽度的 20%,避免遮挡文字和按钮。

如果你的弹窗类名不是 .payvip-modal,请用浏览器 F12 审查弹窗最外层容器,把类名替换即可。

文章版权声明 1、本网站名称:小洋筑记
2、本站永久网址:https://www.xiaouc.com
3、本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长进行删除处理。
4、本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
6、本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。

© 版权声明
THE END
喜欢就支持一下吧
点赞6 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容