子比(Zibll)主题默认的右下角提示弹窗样式比较基础,本文分享一套极简的美化代码,将提示框改为清新的青绿渐变风格,不改动主题核心逻辑,无冲突易部署。
效果说明
![图片[1]-子比主题美化:自定义右下角提示框青绿渐变样式-夏天屋](https://www.nssx.cn/wp-content/uploads/2026/01/48a0a644e120260112202601.webp)
- 右下角成功提示弹窗改为青绿渐变背景,视觉更清新
- 保留主题原有交互逻辑,仅优化视觉样式
- 适配移动端显示,不影响其他功能
使用步骤
第一步:复制美化代码
将以下 CSS 代码完整复制:
第二步:部署到子比主题
- 登录 WordPress 后台,进入「Zibll 子比主题」设置面板
- 选择左侧菜单「全局 & 功能」→「自定义代码」
- 找到「自定义 css 样式」输入框,将下方完整代码粘贴到其中
- 滚动到页面底部,点击「保存设置」按钮
- 清空网站缓存,刷新页面即可生效
代码说明
.notyf.success:针对右下角成功提示弹窗,设置青绿渐变背景和圆角,透明度适配视觉舒适度;.enlighter-default .enlighter:优化代码块最大高度,保证滚动体验;.posts-item .item-heading>a:保留文章标题加粗样式,不改动原有配色;- 移动端适配:确保 640px 以下屏幕点赞按钮正常显示。
注意事项
- 代码仅美化样式,不影响主题原有功能;
- 若需调整渐变颜色,可修改
rgb(16 185 129 / 70%)和rgba(6 182 212 / 0.8)中的数值; - 适配子比主题最新版,无需额外插件支持。
© 版权声明
文章版权声明
THE END



暂无评论内容