RiPro主题美化——主题侧边栏添加加群小工具

效果截图

第一步:

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

<section class="mobanweb-jiaqun">
	<div class="mobanweb-jiaqun-small">
		<p>分享技术教程、精品源码<br> 共同学习,共同进步,共同成长!</p>
		<a href="//shang.qq.com/wpa/qunwpa?idkey=0efff701310d4918a0c78e786cf4125533949b3d0b470d0eec2df0861d116bea" class="btn mobanweb-jiaqun-btn-on" uk-toggle=""><i class="iconfont icon-qq"></i>QQ交流群</a>
		<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;
}
/*加群小工具*/

 

人已赞赏
DEDECMS模板

(带手机版数据同步)企业网站建设推广类网站织梦模板 高端建站公司网站源码

2020-9-8 22:16:45

DEDECMS模板

(自适应手机版)响应式灯具织梦模板 灯饰产品英文外贸网站源码下载

2020-9-9 20:33:15

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索
  • 10 用户总数
  • 1202 文章总数
  • 10439 浏览总数
  • 0 今日发布
  • 333 稳定运行
立即加入

加入VIP,快速免费获取优质资源!