• 资源介绍
  • 最近很多小伙伴在要这个教程,今天我们就放出共大家免费学习,操作很简单,大家仔细看每一步的操作,首先还是给大家看看效果吧。

    注意:需要的图片,请下载我们360模板吧提供的素材,修改的时候注意图片路径和名称
    RiPro主题侧边栏添加加群小工具

    RiPro主题美化:主题侧边栏添加加群小工具插图

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

    <section class="mobanweb-jiaqun">
    	<div class="mobanweb-jiaqun-small">
    		<p>WZZTI 分享技术教程、精品源码<br> 共同学习,共同进步,共同成长!</p>
    		<a href="这里添加你的Q链接或者群链接" class="btn mobanweb-jiaqun-btn-on" uk-toggle=""><i class="iconfont icon-qq"></i>QQ交流群</a>
    		<div class="helper-thumb">
    			<img src="这是为图片链接" alt="XXX.jpg">
    		</div>
    	</div>
    </section>

    2.找到wp-content/themes/ripro/assets/css/diy.css并将以下代码整体复制进去或者添加至RiPro主题设置-自定义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;
    }
    /*侧栏加群小工具*/
    喜欢 0
    1. 本站所有源码、模板、插件等其他资源,都不包含免费技术服务请大家谅解!
    2. 本站提供的所有资源不免费提供个人需要的资源修改、美化、功能定制!
    3. 如遇需要解压密码,则解压密码为"www.360mb.net"!
    4. 由于源码属于可复制性产品,发货后禁止买家以各种理由退款!!
    5. 本站提供资源如遇源码失效,功能异常等等可提供退款服务,可参考《退款规则》!
    6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
    7. 如用于商业或者非法用途,与本站无关,一切后果请用户自负!

    360模板吧 » RiPro主题美化:主题侧边栏添加加群小工具

    发表评论