RiPro主题美化 首页弹窗公告样式美化

Jaysun

ripro主题自带的全站弹窗是纯文本的,比较简单也不美观,几天分享一个比较好看的公告样式,下面是效果图

1.webp (1).jpg

教程开始:

第一步:添加以下代码CSS,注意修改图片链接

/*弹窗*/
.notify-content {
    background-image: url(https://www.52ji.cn/wp-content/themes/Ripro-child/img/1.jpg);
    background-size: cover;
    height: 753px;
    width: 100%;
}
.notify-content h3 {
    padding: 150px 0 0 0;
    font-weight: bold;
    background: top;
    color: #9c85fa;
}
.notify-content div {
    padding: 100px 30px 30px;
    margin: 0;
    font-weight: 300;
    font-size: 18px;
    color: #9389fb;
    text-align: center;
    line-height: 30px;
}
@media (max-width: 768px) {
    .notify-content {
        height: 100%;
    }
  .notify-content h3 {
    padding: 100px 0 0 0;
    font-size: 16px;
}
.notify-content div {
    padding: 50px 30px 30px;
    font-size: 14px;
    line-height: 25px;
}

第二步:后台基本设置

1、开启全站弹窗公告

2、全站弹窗公告-标题 填写公告标题

3、内容 添加如下代码,注意群链接

隐藏内容
评论可见
前往评论


您需要 登录账户 后才能发表评论

发表评论

快捷回复: 表情:
AddoilApplauseBadlaughBombCoffeeFabulousFacepalmFecesFrownHeyhaInsidiousKeepFightingNoProbPigHeadShockedSinistersmileSlapSocialSweatTolaughWatermelonWittyWowYeahYellowdog
评论列表 (有 12 条评论,1060人围观)
网友昵称:wo255088
wo255088 V 普通用户 Google Chrome 114.0.5735.289 Windows 7 x64 11楼
05-16 来自青海 回复
过来学习一下
网友昵称:2632
2632 V 普通用户 Google Chrome 122.0.0.0 Windows 10 x64 10楼
03-04 来自江苏 回复
看看
网友昵称:韩雨轩
韩雨轩 V 普通用户 Google Chrome 118.0.0.0 Windows 10 x64 9楼
02-04 来自北京 回复
看看
网友昵称:8648020
8648020 V 普通用户 Google Chrome 118.0.0.0 Windows 10 x64 8楼
2023-10-19 来自北京 回复
感谢博主66666
网友昵称:982100673
982100673 V 普通用户 Google Chrome 116.0.0.0 Mac OS X 10.15.7 7楼
2023-09-03 来自广东 回复
感谢博主66666
网友昵称:hary
hary V 普通用户 Google Chrome 115.0.0.0 Windows 10 x64 6楼
2023-08-17 来自河南 回复
拿走感谢
网友昵称:sunnyhill
sunnyhill V 普通用户 Google Chrome 69.0.3947.100 Windows 8 x64 地板
2023-08-06 来自山东 回复
感谢博主66666
网友昵称:sunnyhill
sunnyhill V 普通用户 Google Chrome 69.0.3947.100 Windows 8 x64 凉席
2023-08-06 来自山东 回复
文章不错,写的很好!
网友昵称:36222993
36222993 V 普通用户 Sogou Explorer Windows 10 x64 板凳
2023-07-28 来自湖南 回复
[Fabulous]拿走感谢
网友昵称:1161418906
1161418906 V 普通用户 Google Chrome 115.0.0.0 Windows 10 x64 椅子
2023-07-28 来自广西 回复
感谢博主分享6666666666666666666

目录[+]

取消
微信二维码
微信二维码
支付宝二维码