ripro主题自带的全站弹窗是纯文本的,就想着稍微美化一下,下面是效果图
![图片[1]-RiPro主题首页弹窗公告样式美化-99源码屋](https://tu.99yiz.com/2022/01/20220101151725476.png?imageView2/0/format/webp/q/75)
教程开始:
第一步:添加以下代码到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
暂无评论内容