子比主题美化:自定义右下角提示框青绿渐变样式

文章最后更新时间:2026-01-15 09:02:16,若有错误或已失效,请在下方评论或联系博主

子比(Zibll)主题默认的右下角提示弹窗样式比较基础,本文分享一套极简的美化代码,将提示框改为清新的青绿渐变风格,不改动主题核心逻辑,无冲突易部署。

效果说明

图片[1]-子比主题美化:自定义右下角提示框青绿渐变样式-夏天屋
  • 右下角成功提示弹窗改为青绿渐变背景,视觉更清新
  • 保留主题原有交互逻辑,仅优化视觉样式
  • 适配移动端显示,不影响其他功能

使用步骤

第一步:复制美化代码

将以下 CSS 代码完整复制:

第二步:部署到子比主题

  1. 登录 WordPress 后台,进入「Zibll 子比主题」设置面板
  2. 选择左侧菜单「全局 & 功能」→「自定义代码」
  3. 找到「自定义 css 样式」输入框,将下方完整代码粘贴到其中
  4. 滚动到页面底部,点击「保存设置」按钮
  5. 清空网站缓存,刷新页面即可生效

代码说明

  • .notyf.success:针对右下角成功提示弹窗,设置青绿渐变背景和圆角,透明度适配视觉舒适度;
  • .enlighter-default .enlighter:优化代码块最大高度,保证滚动体验;
  • .posts-item .item-heading>a:保留文章标题加粗样式,不改动原有配色;
  • 移动端适配:确保 640px 以下屏幕点赞按钮正常显示。

注意事项

  1. 代码仅美化样式,不影响主题原有功能;
  2. 若需调整渐变颜色,可修改rgb(16 185 129 / 70%)rgba(6 182 212 / 0.8)中的数值;
  3. 适配子比主题最新版,无需额外插件支持。
子比主题美化:自定义右下角提示框青绿渐变样式-夏天屋
子比主题美化:自定义右下角提示框青绿渐变样式
此内容为付费阅读,请付费后查看
5积分
付费阅读
© 版权声明
THE END
点赞0 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容