最新公告
  • 欢迎您光临玖居暗巷,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入我们
  • 【WordPress美化】Ripro主题整站侧边导航条

    【WordPress美化】Ripro主题整站侧边导航条 最后编辑:2020-01-29
    增值服务: 自动发货 使用说明 安装指导 环境配置二次开发BUG修复

    思来想去总感觉Ripro主题好像差点感觉,最终做了一个整站侧边悬浮导航菜单,带签到、客服、加群、风格切换、全屏等功能。

    费用不多说,直接上图……

    【WordPress美化】Ripro主题整站侧边导航条-玖居暗巷

    Ripro主题整站侧边导航条美化教程

    需要修改两个文件分别为:主题导航 / 增加css

    修改文件地址:/ripro/footer.php

    在footer.php搜索<div class="rollbar"> 复制文件里的代码覆盖掉原版代码

    可以复制文件里的:

    <div class="float-box">
      	<ul class="float-ul float-radius float-text">
          <li>
                            
                    <a class="click-qiandao zzhuti_qd_1" href="javascript:void(0);" etap="to_top" title="打卡签到"><i class="fa fa-calendar"></i><br/>签到                
                    
               
                      
          
    	</a>
    		</li>
    	</ul>
      
    	<ul class="float-ul float-radius float-text">
    		<li>
    			<a class="qq float-border float-text" href="javascript:void(0);">
    				<i class="iconfont icon-QQmian"></i><br/>客服				
    				<div class="float-alert-box float-radius float-qq-box">
    					<h6>工作时间</h6>
    					<p>工作日:9:00 - 22:00<br/>节假日:9:00 - 18:00</p>
    					<div class="float-qq-btn float-radius" onClick="window.open('https://wpa.qq.com/msgrd?v=3&uin=23969212&site=qq&menu=yes','_blank')">点击咨询客服</div>
    				</div>
    			</a>
    		</li>
    		<li>
    			<a class="weixin float-border float-text" href="javascript:void(0);">
    				<i class="iconfont icon-weixin"></i><br/>微信
    				<div class="float-alert-box float-radius float-weixin-box">
    					<p>扫一扫添加客服微信</p>
    					<img src="https://jiuqing97.top/wp-content/uploads/2020/01/wx.jpg" width="120" height="120" alt="微信二维码"/>
    				</div>
    			</a>
    		</li>
    		<li>
    			<a class="fankui float-border float-text" href="https://jq.qq.com/?_wv=1027&k=5Y5AKAs"target="_Blank">
    				<i class="iconfont icon-qqq1"></i><br/>Q群 
                 
    			</a>
    		</li>
    	</ul>
    	<ul class="float-ul float-radius float-text">
    				<li>
    			<a class="fankui float-border float-text" href="https://wpa.qq.com/msgrd?v=3&uin=23969212&site=qq&menu=yes"target="_Blank">
    				<i class="iconfont icon-fankui"></i><br/>反馈
    			</a>
    		</li>
    		<li>
    			<a class="float-border float-text" href="javascript:void(0);" etap="to_full" title="点击全屏">
    				<i class="iconfont icon-quanping2"></i><br/>全屏
    			</a>
    		</li>
    		<li>
    			<a class="float-border float-text tap-dark" href="javascript:void(0);" etap="tap-dark" title="夜间模式">
    				<i class="iconfont icon-rijianmoshi"></i><br/>切换
    			</a>
    		</li>
    
    	</ul>
      <br/>
    
    
    
      	<ul class="float-ul float-radius float-text">
          <li>
    <a class="float-border float-text" href="javascript:void(0);" etap="to_top" title="返回顶部">
    				<i class="iconfont icon-dingbu"></i><br/>
          
          
    	</a>
    		</li>
    	</ul>
    
    </div>
    <script>
    $(".qq").hover(function () {
    	$(this).children(".float-qq-box").show()
    },function() {
    	$(this).children(".float-qq-box").hide()
    });
    $(".weixin").hover(function () {
    	$(this).children(".float-weixin-box").show()
    },function() {
    	$(this).children(".float-weixin-box").hide()
    });
    </script>
    
    <div class="dimmer"></div>
    

    到上面的<div class="dimmer"></div>这里,即覆盖到这里即可

     

    然后修改里面的”23969212″为您的客服qq号

    修改加群连接和微信二维码

    主题CSS文件地址:/ripro/assets/css/diy.css

    直接复制粘贴到diy.css文件最下面即可

    注:5.*以上版本可以直接找到主题设置-顶部设置-自定义CSS代码黏贴代码到里面

    猜你在找

    ①本站资源仅用于学习和交流,勿用于商业。切勿私自传播于网络,将会追究法律责任。
    ②本站其他资源来源网络或者用户投稿,供学习交流之用。如有侵权请联系删除。
    ③如有链接无法下载、失效或广告,请联系管理员处理!
    ④本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
    ⑤如果你也有好源码或者教程,可以到审核区发布,分享有本站专属货币奖励和额外收入!
    ⑥如遇到加密压缩包,默认解压密码为"jiuqing97.top",如遇到无法解压的请联系管理员!

    玖居暗巷 » 【WordPress美化】Ripro主题整站侧边导航条

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于网页模版、APP源码等类型的资源,文章内用于介绍的图片通常并不包含在对应可供下载资源包内。这些相关商业资源需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些文件也是这种情况,但部分资源会在资源包内有一份下载链接清单。
    玖居暗巷
    一个高级程序员模板开发平台
    • 2020-01-28Hi,初次和大家见面了,请多关照!

    Leave a Reply

    售后服务:

    • 售后服务范围 1、商业模板使用范围内问题免费咨询
      2、源码安装、模板安装(一般 ¥50-300)服务答疑仅限SVIP用户
      3、单价超过200元的模板免费一次安装,需提供服务器信息。
      付费增值服务 1、提供dedecms模板、WordPress主题、discuz模板优化等服务请详询在线客服
      2、承接 WordPress、DedeCMS、Discuz 等系统建站、仿站、开发、定制等服务
      3、服务器环境配置(一般 ¥50-300)
      4、网站中毒处理(需额外付费,500元/次/质保三个月)
      售后服务时间 周一至周日(法定节假日除外) 9:00-23:00
      免责声明 本站所提供的模板(主题/插件)等资源仅供学习交流,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担,有部分资源为网上收集或仿制而来,若模板侵犯了您的合法权益,请来信通知我们(Email: 23969212@qq.com),我们会及时删除,给您带来的不便,我们深表歉意!

    Hi, 如果你对这款模板有疑问,可以跟我联系哦!

    联系作者