Ripro主题右侧悬浮客服(签到、反馈)美化教程

发布时间: 2020-03-31 213 人阅读

第一步:ripro主题根目录找到footer.php打开,底部找到浮动客服位置,复制一下代码替换。

<!--右侧跟随导航开始-->
<link rel="stylesheet" href="//at.alicdn.com/t/font_1444248_u240hsu9sns.css">
<div class="float-box">
	<ul class="float-ul float-radius float-text">
		<li>
		<?php if (_cao('is_qiandao','1')) : ?>
		<div class="author-qiandao">
			<?php if (_cao_user_is_qiandao()) {
echo '<a class="click-qiandao srcdict_qd_1" href="javascript:void(0);" etap="to_top" title="签到">
			<i class="iconfont icon-Sign"></i><br>
			已签 </a>';
}else{
echo '
			<a class="click-qiandao srcdict_qd_1" href="javascript:void(0);" etap="to_top" title="签到"><i class="iconfont icon-Sign"></i><br>
			签到</a>';
}
?>
		</div>
		<?php endif; ?>
		</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-qq"></i><br>
		客服
		<div class="float-alert-box float-radius float-qq-box" style="display: none;">
			<h6>工作时间</h6>
			<p>
				工作日:9:00 - 18:00<br>
				节假日:9:00 - 18:00
			</p>
			<div class="float-qq-btn float-radius">
				点击咨询客服
			</div>
		</div>
		</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=<?php echo _cao('site_kefu_qq');?>&site=qq&menu=yes" target="_Blank"><i class="iconfont icon-fankuijianyi"></i><br>
		反馈</a>
		</li>
		<li>
		<a class="float-border float-text" href="javascript:void(0);" etap="to_full" title=" 点击全屏">
		<i class="iconfont icon-quanping"></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-ios-sunny"></i><br>
		切换
		</a>
		</li>
	</ul>
	<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-top1"></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>

第二步:找到ripro主题目录assets/css/diy.css样式文件将以下代码复制粘贴到底部


@media (max-width:767px){.search-form{display:none}
}
.showscaidan:before{content:"\eaf1"}
.shows{font-family:show!important;font-size:16px;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
@font-face{font-family:iconfont;src:url(//at.alicdn.com/t/font_1380870_o08dhovorbr.eot?t=1567357317161);src:url(//at.alicdn.com/t/font_1380870_o08dhovorbr.eot?t=1567357317161#iefix) format('embedded-opentype'),url(//at.alicdn.com/t/font_1380870_o08dhovorbr.woff2?t=1567357317161) format('woff2'),url(//at.alicdn.com/t/font_1380870_o08dhovorbr.woff?t=1567357317161) format('woff'),url(//at.alicdn.com/t/font_1380870_o08dhovorbr.ttf?t=1567357317161) format('truetype'),url(//at.alicdn.com/t/font_1380870_o08dhovorbr.svg?t=1567357317161#iconfont) format('svg')}
.iconfont{font-family:iconfont!important;font-size:16px;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.icon-QQqun:before{content:"\e600"}
.icon-weixin:before{content:"\e7e5"}
.icon-qqq:before{content:"\e623"}
.icon-qqqun2:before{content:"\e721"}
.icon-qq:before{content:"\e607"}
.icon-qqq1:before{content:"\e601"}
.icon-QQmian:before{content:"\e630"}
.icon-fankui:before{content:"\e61e"}
.icon-rijianmoshi:before{content:"\e626"}
.icon-qqqun1:before{content:"\e679"}
.icon-quanping2:before{content:"\e6e2"}
.icon-qqqun:before{content:"\e603"}
.icon-dingbu:before{content:"\e643"}
.icon-gongzhonghao:before{content:"\e618"}
.icon-VIPx:before{content:"\e628"}
.icon-quanping:before{content:"\e682"}
.icon-VIP:before{content:"\e6b2"}
.icon-quanping1:before{content:"\e887"}
.icon-yewan:before{content:"\e669"}
.icon-huabanfuben-copy:before{content:"\e6b5"}
.icon-Fill:before{content:"\e6bd"}
.iconfont{font-family:iconfont!important;font-size:16px;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.float-radius{-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px}
.float-text{color: #1f6efd;}
.ripro-dark a.float-text{color:#1f6efd;}
.float-icon{color:#1f6efd }
.float-hover{color:#1f6efd }
.flost-hover-bg{background-color:#1f6efd }
.float-border{border-color:#ececec!important}
.float-box{width:68px;padding:5px;font-size:14px;position:fixed;right:0;top:75%;z-index:9997;margin-top:-303px}
.float-ul,.float-ul li{margin:0;padding:0}
.float-ul{margin-top:5px;text-align:center;line-height:1.2;list-style:none;background-color:#fff;box-shadow:0 2px 5px #e6e6e6}
.float-ul .iconfont{font-size:22px;line-height:22px}
.float-ul li a{display:block;width:100%;padding:10px 0;line-height:18px}
.float-ul li a:hover{background: linear-gradient(-125deg,#1f6efd 0,#1f6efd  100%);box-shadow:0 8px 10px rgba(32,160,255,.3);color:#fff;}
.float-ul li a.qq{-moz-border-top-left-radius:4px;-moz-border-top-right-radius:4px;border-top-left-radius:4px;border-top-right-radius:4px;position:relative}
.float-ul li a.weixin{position:relative}
.float-ul li a.fankui{-moz-border-bottom-left-radius:4px;-moz-border-bottom-right-radius:4px;border-bottom-left-radius:4px;border-bottom-right-radius:4px}
.float-ul li a.fankui .iconfont{font-size:22px;line-height:22px}
.float-alert-box{width:180px;height:185px;background-color:#fff;border:1px solid #ececec;position:absolute;right:56px;top:0;z-index:9998;display:none}
.srcdict_qd_1:hover{background:#fff;box-shadow:0 8px 10px rgba(32,160,255,.3);color:#0295f9}
.srcdict_qd_1{background:linear-gradient(-125deg,#1f6efd  0,#1f6efd  100%);box-shadow:0 8px 10px rgba(32,160,255,.3);color:#fff}
.float-qq-box{padding:20px 15px}
.float-weixin-box{padding:15px}
.float-weixin-box img{margin:0 auto}
.float-weixin-box p{font-weight:600;color:#1f6efd ;margin-bottom:5px}
.float-alert-box h6{font-size:20px;color:#1f6efd }
.float-alert-box p{line-height:24px}
.float-ul li .float-qq-box{color:#666}
.float-ul li .float-weixin-box{color:#666;top:-61px}
.float-qq-btn{padding:10px;background-color:#1f6efd ;color:#fff}
@media screen and (max-width:639px){.float-box{display:none}}

回到首页清楚浏览器缓存刷新看,是不是样式变了。希望大家多多支持。

以下懒人必备:Ripro主题右侧悬浮客服(签到、反馈)美化包

暂无优惠 永久SVIP免费

已有6人支付

1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!vip@mobanstar.com
2. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!
3. 如果你也有好源码或者教程,可以到审核区发布,分享有金币奖励和额外收入!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 本站不保证所提供下载的资源的准确性、安全性和完整性,源码仅供下载学习之用!
8. 如用于商业或者非法用途,与本站无关,一切后果请用户自负!
9. 如遇到加密压缩包,默认解压密码为"www.mobanstar.com",如遇到无法解压的请联系管理员!

模板星 » Ripro主题右侧悬浮客服(签到、反馈)美化教程

常见问题FAQ

购买的模板是永久使用的嘛?需要授权码嘛?
凡是在模板星购买的模板/主题都是支持永久使用的,无需购买授权码,请用户放心购买使用。
VIP模板提供安装服务嘛?需要收费嘛?
凡在模板星购买的模板/主题均可提供一次免费安装服务(需提供空间及数据库账号),请用户放心购买。

发表评论

售后服务:

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

目前已经有 108 位会员加入