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

ripro主题自带的全站弹窗是纯文本的,就想着稍微美化一下,下面是效果图

图片[1]-RiPro主题首页弹窗公告样式美化-99源码屋
效果图

教程开始:

第一步:添加以下代码到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、内容 添加如下代码,注意群链接

------本页内容已结束,喜欢请分享------

感谢您的来访,获取更多精彩文章请收藏本站。

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

请登录后发表评论

服务支持

用心做更好的精品源码站,服务各个行业,让大家快速创建属于自己的网站 。

2000+
优质源码
8年+
开发经验
1200
注册用户
7*24
随时响应