RiPro主题美化-主题侧边栏添加加群小工具优化版

教程开始

第一步：

找到后台-外观-小工具-自定义HTML并将以下代码整体复制进去并保存，标题可自定义

<section class=”mobanweb-jiaqun”>
<div class=”mobanweb-jiaqun-small”>
<p>分享技术教程、精品源码<br> 共同学习，共同进步，共同成长！</p>
<div class=”btn mobanweb-jiaqun-btn-on” uk-toggle=””>
<i class=”fa fa-coffee”></i>QQ交流群
<a href=”//shang.qq.com/wpa/qunwpa?idkey=9c605e6c567c9b40498fa0df91b22d708a45759273f2c0c7ffb860594043aceb”</a>
</div>
<div class=”helper-thumb”>
<img src=”https://mobanweb.oss-cn-hangzhou.aliyuncs.com/image/2020021314534257.png” alt=”星海资源网”>
</div>
</div>
</section>

第二步：

找到wp-content/themes/ripro/assets/css/diy.css并将以下代码整体复制进去并保存（子主题注意路径）

/*加群小工具*/
.mobanweb-jiaqun h5 {
font-size: 16px;
line-height: 1.4;
}
.mobanweb-jiaqun-small {
padding: 15px;
}
.mobanweb-jiaqun p {
max-width: 80%;
}
.mobanweb-jiaqun {
letter-spacing: .5px;
}
.mobanweb-jiaqun .btn {
font-size: 13px;
}
.mobanweb-jiaqun .btn i {
margin-right: 3px;
}
.mobanweb-jiaqun .helper-thumb {
position: absolute;
right: 0;
bottom: 0;
}
.mobanweb-jiaqun-btn-on {
color: #fff;
background: #2c63ff!important;
box-shadow: 0 3px 10px -1px #2c63ff!important;
border: 0;
}
/*加群小工具*/