当前位置:首页>技术教程wordpress教程> 【7B2主题美化】右侧悬浮工具条样式修改

【7B2主题美化】右侧悬浮工具条样式修改

【7B2主题美化】右侧悬浮工具条样式修改

附件放到网站根目录,二维码等信息自行修改。

打开\b2\Modules\Templates\Footer.php

412行-501行替换为以下代码

【7B2主题美化】右侧悬浮工具条样式修改

【7B2主题美化】右侧悬浮工具条样式修改

<style>.aside-container{display:none;}.tshe_services {position:fixed;bottom:75px;right:10px;z-index:1000;cursor:pointer;color:#4a4a4a;font-size:12px }.ts_head {position:relative;margin-left:5px;padding-top:4px;width:100px;height:100px;text-align:center;border:6px solid #ffc403;border-radius:50% }.ts_head:after {content:"";display:block;position:absolute;left:-11px;top:-11px;width:110px;height:110px;border:2px solid #ffc403;border-radius:50%;animation:tsheadscalel 1s .5s infinite }.ts_head_img {width:80px;border-radius:50%;animation:tsheadscale 1s infinite }@keyframes tsheadscale {0% {transform:scale(1) }50% {transform:scale(1.1) }to {transform:scale(1) }}@keyframes tsheadscalel {0% {opacity:1;transform:scale(1) }50% {opacity:.5;transform:scale(1.1) }to {opacity:1;transform:scale(1) }}.ts_head_btn {position:absolute;left:1px;bottom:-15px;z-index:3;margin:0 auto;width:90px;height:30px;line-height:30px;text-align:center;background-color:#ffdc00;border-radius:3px;font-size:14px;font-weight:700;box-shadow:0 2px 5px rgba(78, 40, 5, .2);transition:background-color .3s }.ts_head:hover .ts_head_btn {background-color:#ffc403 }.ts_bg {z-index:1 }.ts_bg, .ts_box {position:relative }.ts_box {z-index:2;padding:5px 5px 30px;width:110px;text-align:center;background-color:#ffc403;border-radius:4px }.ts_white {position:relative;background-color:#fff;border-radius:2px }.ts_item {position:relative;padding-top:14px;height:105px }.ts_icon {position:relative;margin:0 auto;width:40px;height:30px }.ts_item1 {padding-top:28px;height:120px }.ts_i_img {position:absolute;left:0;top:0;width:100% }.ts_i_img2 {visibility:hidden }.ts_item:hover {background-color:#e3e3e3 }.ts_item:hover .ts_i_img1 {visibility:hidden }.ts_item:hover .ts_i_img2 {visibility:visible }.ts_h {font-size:14px;font-weight:700 }.ts_h, .ts_p {margin-top:5px }.ts_p {white-space:nowrap }.ts_l {position:absolute;left:7px;bottom:0;width:86px;border-bottom:1px dashed rgba(0, 0, 0, .2) }.ts_scroll_top {visibility:hidden;position:relative;z-index:2 }.ts_scroll_top.visible {visibility:visible }.ts_st_line {top:-20px;height:37px }.ts_st_icon, .ts_st_line {position:absolute;left:50%;transform:translateX(-50%) }.ts_st_icon {top:15px;width:50px }.ts_st_btn:hover .ts_st_icon1, .ts_st_icon2 {visibility:hidden }.ts_st_btn:hover .ts_st_icon2 {visibility:visible }.pcsp, .ts_medium {display:none }.pcsp {position:absolute;bottom:0;left:-295px;padding-bottom:33px;width:277px;height:315px;text-align:center;background:#fff;box-shadow:8px 0 11px 0 rgba(0, 0, 0, .06), -8px 0 11px 0 rgba(0, 0, 0, .06);border-radius:8px }.pcsp:hover, .ts_item:hover+.pcsp {display:block }.pcsp:before {width:20px;height:100%;top:0;right:-20px;background:transparent }.pcsp:after, .pcsp:before {display:block;content:"";position:absolute }.pcsp:after {top:40px;right:-10px;width:0;height:0;border-top:14px solid transparent;border-bottom:14px solid transparent;border-left:10px solid #fff }.pcsp2 {padding-top:44px }.pcsp2:after {top:140px }.pcsp3 {padding-top:30px }.pcsp3:after {top:240px }.pcsp_name {margin-bottom:11px;color:#000;font-size:16px;font-weight:700 }.pcsp_h {padding-top:26px;color:#000;font-size:20px }.pcsp_p {margin-top:10px;color:#000;font-size:14px }.pcsp_p2 {padding-left:40px;color:#4a4a4a;text-align:left;font-size:14px;line-height:24px }.pcsp_qrcode_wrap {margin:20px auto 17px }.pcsp_qrcode, .pcsp_qrcode_wrap {position:relative;width:148px;height:148px }.pcsp_qrcode_move {position:absolute;top:-1px;left:-1px;width:150px;height:150px }.pcspa {position:absolute;width:9px;height:9px;border-color:#ffdc00;border-width:1px }.pcspa1 {left:0;border-left-style:solid }.pcspa1, .pcspa2 {top:0;border-top-style:solid }.pcspa2 {right:0;border-right-style:solid }.pcspa3 {left:0;border-left-style:solid }.pcspa3, .pcspa4 {bottom:0;border-bottom-style:solid }.pcspa4 {right:0;border-right-style:solid }.pcspa_move {position:absolute;top:0;left:1px;width:148px;height:4px;background-image:url(/img/scan-952a935d7b9d83abf4ca81393765792b.png);background-size:148px 4px;animation:pcspaMove 2s linear infinite }@keyframes pcspaMove {0% {top:0 }to {top:148px }}.pcsp_phone_wrap {margin-top:30px }.pcsp_phone_img {width:74px }@media only screen and (max-width:1440px) {.tshe_services {bottom:50px }.ts_large {display:none }.ts_medium {display:block;font-weight:700 }.ts_head {margin-left:2px;padding-top:2px;width:66px;height:66px;border-width:3px }.ts_head:after {left:-6px;top:-6px;width:72px;height:72px;border-width:1px }.ts_head_img {width:56px }.ts_head_btn {left:0;bottom:-10px;width:60px;height:20px;line-height:20px;font-size:12px }.ts_box {padding:3px 3px 18px;width:70px }.ts_item {padding-top:11px;height:64px }.ts_icon {width:26px;height:20px }.ts_item1 {padding-top:20px;height:74px }.ts_l {left:5px;width:54px }.ts_st_line {top:-14px;height:25px }.ts_st_icon {top:10px;width:32px }.tshe_services .pcsp {bottom:-50px }.tshe_services .pcsp:after {top:90px }.tshe_services .pcsp2:after {top:150px }.tshe_services .pcsp3:after {top:220px }}@media screen and (max-width:768px){.tshe_services{display:none}}</style>        
    <div class="tshe_services">
    <div class="ts_bg meiqiaPanelBtn">
    <a href="tencent://AddContact/?fromId=50&fromSubId=1&subcmd=all&uin=1035761010">
      <div class="ts_head">
        <img class="ts_head_img" src="/img/youcekefu1.png">
        <div class="ts_head_btn">在线客服</div>
      </div></a>
      <div class="ts_box">
        <div class="ts_white">
          <div class="ts_item ts_item1">
            <div class="ts_icon">
              <img class="ts_i_img ts_i_img1" src="/img/youceweixintubiao.svg">
              <img class="ts_i_img ts_i_img2" src="/img/weixinhuisetubiao.svg">
            </div>
            <div class="ts_h ts_large">加入官方群</div>
            <div class="ts_p ts_large">有幸遇见</div>
            <div class="ts_p ts_medium">加入群聊</div>
            <div class="ts_l"></div>
          </div>
          
  
  <div class="pcsp js_seowx_wrap">
    <div style="display:none" class="pcsp_name js_seowx_name_wrap"><span class="js_seowx_name"></span></div>
    </br><a href="http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=2vU-UO_HfPri94NlYHjo2drOsLl9fCaR&authKey=j0NKDcV4skdDKmCOym%2FPOHzbmwR8%2FMZu3wZ0L9AYEGhC0VGdmnkjbcZqHEI1GoOr&noverify=0&group_code=783754655" target="_blank" class="pcsp_h">?点击加入群聊</a>
    <div class="pcsp_p">有幸遇见,恰巧合拍</div>
    <div class="pcsp_qrcode_wrap">
      <img class="pcsp_qrcode js_seowx_qrcode" src="/img/cgew.png">
      <div class="pcsp_qrcode_move">
        <div class="pcspa pcspa1"></div>
        <div class="pcspa pcspa2"></div>
        <div class="pcspa pcspa3"></div>
        <div class="pcspa pcspa4"></div>
        <div class="pcspa_move"></div>
      </div>
    </div>
    <div class="pcsp_p">QQ群:783754655</div>
  </div>
          <div class="ts_item ts_item2">
            <div class="ts_icon">
              <img class="ts_i_img ts_i_img1" src="/img/1637557852075s3.svg">
              <img class="ts_i_img ts_i_img2" src="/img/1637557852075s3_2.svg">
            </div>
            <div class="ts_h ts_large">扫一扫</div>
            <div class="ts_p ts_large">下载APP</div>
            <div class="ts_p ts_medium">扫一扫</div>
            <div class="ts_l"></div>
          </div>
          <div class="pcsp pcsp2">
            <div class="pcsp_qrcode_wrap">
              <img class="pcsp_qrcode" src="/img/weixingongzhonghao.png">
              <div class="pcsp_qrcode_move">
                <div class="pcspa pcspa1"></div>
                <div class="pcspa pcspa2"></div>
                <div class="pcspa pcspa3"></div>
                <div class="pcspa pcspa4"></div>
                <div class="pcspa_move"></div>
              </div>
            </div>
            <div class="pcsp_p">扫一扫,下载森鹿语APP</div>
          </div>
          <div class="ts_item ts_item3">
            <div class="ts_icon">
              <img class="ts_i_img ts_i_img1" src="/img/youcedianhua.svg">
              <img class="ts_i_img ts_i_img2" src="/img/youcedianhuasuohuise.svg">
            </div>
            <div class="ts_h ts_large">开通会员</div>
            <div class="ts_p ts_large">免费下载资源</div>
            <div class="ts_p ts_medium">开通会员</div>
          </div>
          <div class="pcsp pcsp3">
            <div class="pcsp_p2">? 专属下载  ? 免费更新<br>? 优先售后  ? 全面服务</div>
            <div class="pcsp_phone_wrap">
              <img class="pcsp_phone_img" src="/img/youceshandongdianhua.svg">
            </div>
            <div class="pcsp_p">成为我们的VIP会员</div>
            <div class="pcsp_p">尊享无限免费下载使用</div>
            </br><a href="https://www.lsenyu.cn/vips" target="_blank" class="pcsp_h"> [̲̅V̲̅I̲̅P̅]点击购买会员</a>
          </div>
        </div>
      </div>
    </div>
        <div class="ts_scroll_top visible" id="scroll_top">
      <img class="ts_st_line" src="/img/youceguashengzi.svg">
      <div class="ts_st_btn" onclick="b2AsideBar.goTop()" id="scroll_top_clicker">
        <img class="ts_st_icon ts_st_icon1" src="/img/youcetop.svg">
        <img class="ts_st_icon ts_st_icon2" src="/img/youceguasuoliangse.svg">
      </div>
        </div>

下载权限

查看
  • 免费下载
    评论并刷新后下载
    登录后下载

查看演示

  • {{attr.name}}:
您当前的等级为
登录后免费下载登录 小黑屋反思中,不准下载! 评论后刷新页面下载评论 支付以后下载 请先登录 您今天的下载次数(次)用完了,请明天再来 支付积分以后下载立即支付 支付以后下载立即支付 您当前的用户组不允许下载升级会员
您已获得下载权限 您可以每天下载资源次,今日剩余
重要声明

本站资源大多来自网络,如有侵犯你的权益请联系管理员, 我们会第一时间进行审核删除。站内资源为网友个人学习或测试研究使用,未经原版权作者许可,禁止用于任何商业途径!请在下载24小时内删除!


如果遇到 付费 才可 观看 的文章,建议升级 会员或者成为认证用户。 全站所有资源 任意下免费看”。 本站资源少部分采用 7z压缩, 为防止有人压缩软件不支持7z格式,7z 解压,建议下载 7-zip ,zip、rar 解压,建议下载 WinRAR

给TA赞助
共{{data.count}}人
人已赞助
技术教程网赚教程

快速收藏,小红书养号神器!采集@曝光多功能,让你轻松涨粉、赚钱翻倍!

2023-12-5 13:51:41

wordpress教程技术教程

WordPress网站B2主题用户等级、圈子用户等级美化

2023-12-6 19:35:41

0 条回复A文章作者M管理员
    暂无讨论,说说你的看法吧