Ripro v2美化折腾记一之全透明沉浸式弹窗

第一次进网站的用户,可以看到背景透明的宣传促销海报,沉浸式效果拉满,辅以html代码可以做出各种效果,点击图片预览效果

 

代码更改:

  • 宝塔后台:你的域名/wp-content/themes/ripro-v2/assets/css/app.css文件中搜索.notify-content h3,大约在8300行,将此处的rgb(0 0 0 /20%)改为transparent即可
.notify-content h3 { 
letter-spacing: 2px; padding: .8rem; 
text-align: center; 
font-size: 1.5rem; 
font-weight: 400; 
background: transparent; 
border-radius: 3px 3px 0 0; 
margin: 0; 
margin-bottom: 0; 
color: #FFFF;
 }
  • 去除标题前小铃铛

宝塔后台找到:你的域名/wp-content/themes/ripro-v2/inc/template-enqueue.php,文件搜索“bell"找到如下代码,删掉即可

<i class="fa fa-bell-o mr-2"></i>

 更改完保存,刷新下CDN缓存,即可生效,可移步:《WordPress改完css样式不生效怎么办?刷新CDN缓存一招搞定

后台设置:

全站公告背景颜色-transparent

弹窗内容代码

<a href="https://mmsto.com/winmac/coupon" target="_blank" rel="nofollow noopener noreferrer" data-toggle="tooltip" data-html="true" ><img src="https://mmsto.com/winmac/wp-content/uploads/2022/01/cuxiaopopcopy.png" alt="mouse" style=" width: 100%; "></a><br>
<center><font style="font-size: 19px;"><a class="badge badge-warning" href="https://mmsto.com/winmac/vipinfo" rel="nofollow noopener noreferrer" target="_blank"><i class="fa fa-diamond mr-1"></i>VIP会员</a></font> 享全站资源免费下载特权
<font style="font-size: 19px;"><a class="badge badge-success" href="https://mmsto.com/winmac/coupon" rel="nofollow noopener noreferrer" target="_blank"> 
	<i class="fa fa-gift mr-1"></i>现在去领券</a></font> 即享立减特惠!</center>

至此,全透明弹窗搞定

版权声明:老刘博客所有内容均为老刘原创发布,未经许可,请勿转载,谢谢
THE END
分享
二维码
< <上一篇
下一篇>>
文章目录
关闭
目 录