标签： 7b2美化

【7B2美化】文章浏览量超过一定数量出现热帖图标

如下图：

下面代码加入function.php中就可以。

/*文章开头大于50浏览量出现热帖图片*/
add_filter('the_content', 'add_lu_content_beforde');
function add_lu_content_beforde( $content ) {
 if( !is_feed() && !is_home() && is_singular() && is_main_query() ) {
   $viewnum= (int) get_post_meta( get_the_ID(), 'views', true );
      if ($viewnum > 50){  //这里是浏览量大于50
        $before_content = '<img style="position: absolute; right: 10px;  pointer-events: none; z-index: 10;" src="https://www.lurenfen.com/media/2023/10/002.gif" alt="热帖" >'; //图片地址修改成自己的
      $lu = $before_content . $content;
        }
   else{$lu = $content;}}
 return $lu;
}

下面的图片需要的自取

2023年10月30日

【7B2主题美化】实用美观可翻转显示的微信公众号
效果截图

使用方法

以下代码投放至WordPress后台 >> 外观 >> 小工具 >> 自定义HTML小工具
```
<div class="card-widget" id="card-wechat" onclick="window.open('https://www.sluyu.com/weixinhao/demo.html');">
    <div id="flip-wrapper">
      <div id="flip-content">
      <div class="face"></div>
      <div class="back face"></div>
    </div></div></div>
<link rel="stylesheet" href="你的CSS路径或链接" type="text/css">
```
附件压缩包里的CSS文件上传至网站根目录，修改好你的外联CSS路径或链接

修改好CSS代码里的图片为你的图片路径或链接地址，公众号二维码请自行替换

说明
- wechatface.png（翻转前图片，无需替换）
- wx_gzh.png（翻转后图片，需替换二维码）
- gzh_cover.png（微信Logo背景，无需替换）
搭配下方微信公众号单页显示效果更佳

点击跳转的单页
2023年10月19日

【7B2主题美化】手机菜单右下角添加客服图片

截图

添加CSS代码，图片自行修改

.mobile-box.show-menu-box:after {
    width: 170px;
    height: 160px;
    position: absolute;
    bottom: 0;
    right: 0;
    content: " ";
    background-image: url(https://www.sluyu.com/wp-content/themes/b2Jitheme/img/kefu.png);
    background-size: 100% 100%;
}

2023年9月7日

【7B2主题美化】加个好看的底部导航

效果图

食用方法

第一步

打开自己网站下的 /wp-content/themes/b2/funactions.php 文件，然后把下面的代码加入到文件内。

//获取评论数量
function zfunc_comments_users($postid=0,$which=0) {
  $comments = get_comments('status=approve&type=comment&post_id='.$postid); //获取文章的所有评论
  if ($comments) {
    $i=0; $j=0; $commentusers=array();
    foreach ($comments as $comment) {
      ++$i;
      if ($i==1) { $commentusers[] = $comment->comment_author_email; ++$j; }
      if ( !in_array($comment->comment_author_email, $commentusers) ) {
        $commentusers[] = $comment->comment_author_email;
        ++$j;
      }
    }
    $output = array($j,$i);
    $which = ($which == 0) ? 0 : 1;
    return $output[$which]; //返回评论人数
  }
  return 0; //没有评论返回0
};
// 随机文章
function random_posts(
    $posts_num=5,$before='<li>',$after='</li>'){
    global $wpdb;
    $sql = "SELECT ID, post_title,guid
            FROM $wpdb->posts
            WHERE post_status = 'publish' ";
    $sql .= "AND post_title != '' ";
    $sql .= "AND post_password ='' ";
    $sql .= "AND post_type = 'post' ";
    $sql .= "ORDER BY RAND() LIMIT 0 , $posts_num ";
    $randposts = $wpdb->get_results($sql);
    $output = '';
    foreach ($randposts as $randpost) {
        $post_title = stripslashes($randpost->post_title);
        $permalink = get_permalink($randpost->ID);
        $output .= $before.'<a class="item-foot" href="'
            . $permalink . '"  rel="bookmark" data-toggle="tooltip" data-original-title="随机文章：';
        $output .= $post_title . '"><svg class="icon" aria-hidden="true"><use xlink:href="#iconlianjie"></use></svg><span id="wz">' . $post_title . '</span></a>';
        $output .= $after;
    }
    echo '<div id="footgundong" class="wz"><ul>'.$output.'</ul></div>';
}
//点赞统计
function dz($post_id){
    global $wpdb;
    $sql = "SELECT SUM(`meta_value`) as num FROM `wp_postmeta` WHERE `meta_key`='like' AND `post_id`=$post_id";
    $results = $wpdb->get_results($sql);
    echo  $results[0]->num;
}

第二步

打开自己网站下的 /wp-content/themes/b2/footer.php 文件，在 </footer> 下面添加下方代码。

<!--底部导航-->
<div class="footwaveline">
    <i style="background-image: url(https://www.zym88.cn/wp-content/uploads/2022/03/2ba3e3376c27.png);display: inline-block;width: 210px;height: 120px;position: fixed;bottom: 0;z-index: 110;background-size: 100%;"></i>
    <div style="background: url(https://www.zym88.cn/wp-content/uploads/2022/03/cf3cdc8e21d1.png) 0 0 repeat-x;height: 3px;width: 100%;position: fixed;background-size: 10px 3px;z-index: 98;bottom: 40px;"></div>
    <div id="shi" style="position: fixed;bottom: 0;margin-left: 200px;z-index: 99;">
    <h4 class="my-face" style="font-size:13px;margin:0 5px 2px 5px;color:#797979;margin-bottom: 10px;">夕阳无别事，等风也等你</h4>
    </div>
  <div style="width: 100%;height: 40px;position: fixed;bottom: 0;z-index: 97;box-shadow: 0 -2px 10px rgb(0 0 0 / 10%);background:#fff;">
    <nav class="joe_header__below-logon" style="float: right;margin-right: 50px;">
     <?php 
          if (!is_single()) {
            echo random_posts()." <span class=\"wz-span\">随机推荐</span>";
        }
        if(is_single()){
      ?>
      <span style="margin-left:20px;">
        <a href="javascript:(scrollTo('#comments',-100));" data-toggle="tooltip" data-original-title="评论">
          <svg class="icon" aria-hidden="true"><use xlink:href="#iconpinglun"></use></svg><span style="color:var(--minor);">评论(<count><?php echo zfunc_comments_users($post->ID); ?></count>)</span>
        </a>
      </span>                
      <span style="margin-left:20px;line-height: 45px;">
        <a class="share-btn poster" poster-share="<?php the_ID();?>" title="分享海报" href="javascript:;">
          <svg class="icon" aria-hidden="true"><use xlink:href="#iconfenxiang"></use></svg>分享
        </a>
      </span>
      <?php } ?>
      <span style="margin-left:20px;line-height: 45px;">
        <a href="javascript:void(0);" onclick="javascript:addshoucang()" data-toggle="tooltip" title="收藏本站">
          <svg class="icon" aria-hidden="true"><use xlink:href="#iconshoucang"></use></svg>使用Ctrl+D收藏本站
        </a>
      </span>
      <a href="javascript:(scrollTo('#comments',-100));" href="javascript:(scrollTo());" id="percentage" data-toggle="tooltip" data-original-title="返回顶部">
        <svg class="icon" aria-hidden="true"><use xlink:href="#icondingwei"></use></svg>0%
      </a>
    </nav>
  </div>
</div>
<!--底部导航-->

图片资源是站长放在自己网站媒体库里的，你们把图片保存下来上传到自己网站媒体库即可。

第三步

进入后台 B2主题设置>常规设置，在 底部HTML标签 加入下方代码。

<!-- 引入VUE -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<!-- 引入样式 -->
<script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.6/lib/index.js"></script>
<!-- 引入组件库 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.6/packages/theme-chalk/lib/index.css">
<!--自用阿里巴巴图标库-->
<script src="//at.alicdn.com/t/font_2232826_a0tvv0wxh9n.js"></script>

第四步

自定义CSS样式 加入下方代码。在style.css文件里

/* 底部导航 start */
.my-face {
    animation: my-face 5s infinite ease-in-out;
    color: #00f1ff;
    display: inline-block;
    margin: 0 5px;
}
@-webkit-keyframes my-face {
    2%, 24%, 80% {
        -webkit-transform: translate(0, 1.5px) rotate(1.5deg);
        transform: translate(0, 1.5px) rotate(1.5deg)
    }
    4%, 68%, 98% {
        -webkit-transform: translate(0, -1.5px) rotate(-.5deg);
        transform: translate(0, -1.5px) rotate(-.5deg)
    }
    38%, 6% {
        -webkit-transform: translate(0, 1.5px) rotate(-1.5deg);
        transform: translate(0, 1.5px) rotate(-1.5deg)
    }
    8%, 86% {
        -webkit-transform: translate(0, -1.5px) rotate(-1.5deg);
        transform: translate(0, -1.5px) rotate(-1.5deg)
    }
    10%, 72% {
        -webkit-transform: translate(0, 2.5px) rotate(1.5deg);
        transform: translate(0, 2.5px) rotate(1.5deg)
    }
    12%, 64%, 78%, 96% {
        -webkit-transform: translate(0, -.5px) rotate(1.5deg);
        transform: translate(0, -.5px) rotate(1.5deg)
    }
    14%, 54% {
        -webkit-transform: translate(0, -1.5px) rotate(1.5deg);
        transform: translate(0, -1.5px) rotate(1.5deg)
    }
    16% {
        -webkit-transform: translate(0, -.5px) rotate(-1.5deg);
        transform: translate(0, -.5px) rotate(-1.5deg)
    }
    18%, 22% {
        -webkit-transform: translate(0, .5px) rotate(-1.5deg);
        transform: translate(0, .5px) rotate(-1.5deg)
    }
    20%, 36%, 46% {
        -webkit-transform: translate(0, -1.5px) rotate(2.5deg);
        transform: translate(0, -1.5px) rotate(2.5deg)
    }
    26%, 50% {
        -webkit-transform: translate(0, .5px) rotate(.5deg);
        transform: translate(0, .5px) rotate(.5deg)
    }
    28% {
        -webkit-transform: translate(0, .5px) rotate(1.5deg);
        transform: translate(0, .5px) rotate(1.5deg)
    }
    30%, 40%, 62%, 76%, 88% {
        -webkit-transform: translate(0, -.5px) rotate(2.5deg);
        transform: translate(0, -.5px) rotate(2.5deg)
    }
    32%, 34%, 66% {
        -webkit-transform: translate(0, 1.5px) rotate(-.5deg);
        transform: translate(0, 1.5px) rotate(-.5deg)
    }
    42% {
        -webkit-transform: translate(0, 2.5px) rotate(-1.5deg);
        transform: translate(0, 2.5px) rotate(-1.5deg)
    }
    44%, 70% {
        -webkit-transform: translate(0, 1.5px) rotate(.5deg);
        transform: translate(0, 1.5px) rotate(.5deg)
    }
    48%, 74%, 82% {
        -webkit-transform: translate(0, -.5px) rotate(.5deg);
        transform: translate(0, -.5px) rotate(.5deg)
    }
    52%, 56%, 60% {
        -webkit-transform: translate(0, 2.5px) rotate(2.5deg);
        transform: translate(0, 2.5px) rotate(2.5deg)
    }
    58% {
        -webkit-transform: translate(0, .5px) rotate(2.5deg);
        transform: translate(0, .5px) rotate(2.5deg)
    }
    84% {
        -webkit-transform: translate(0, 1.5px) rotate(2.5deg);
        transform: translate(0, 1.5px) rotate(2.5deg)
    }
    90% {
        -webkit-transform: translate(0, 2.5px) rotate(-.5deg);
        transform: translate(0, 2.5px) rotate(-.5deg)
    }
    92% {
        -webkit-transform: translate(0, .5px) rotate(-.5deg);
        transform: translate(0, .5px) rotate(-.5deg)
    }
    94% {
        -webkit-transform: translate(0, 2.5px) rotate(.5deg);
        transform: translate(0, 2.5px) rotate(.5deg)
    }
    0%, 100% {
        -webkit-transform: translate(0, 0) rotate(0);
        transform: translate(0, 0) rotate(0)
    }
}
@keyframes my-face {
    2%, 24%, 80% {
        -webkit-transform: translate(0, 1.5px) rotate(1.5deg);
        transform: translate(0, 1.5px) rotate(1.5deg)
    }
    4%, 68%, 98% {
        -webkit-transform: translate(0, -1.5px) rotate(-.5deg);
        transform: translate(0, -1.5px) rotate(-.5deg)
    }
    38%, 6% {
        -webkit-transform: translate(0, 1.5px) rotate(-1.5deg);
        transform: translate(0, 1.5px) rotate(-1.5deg)
    }
    8%, 86% {
        -webkit-transform: translate(0, -1.5px) rotate(-1.5deg);
        transform: translate(0, -1.5px) rotate(-1.5deg)
    }
    10%, 72% {
        -webkit-transform: translate(0, 2.5px) rotate(1.5deg);
        transform: translate(0, 2.5px) rotate(1.5deg)
    }
    12%, 64%, 78%, 96% {
        -webkit-transform: translate(0, -.5px) rotate(1.5deg);
        transform: translate(0, -.5px) rotate(1.5deg)
    }
    14%, 54% {
        -webkit-transform: translate(0, -1.5px) rotate(1.5deg);
        transform: translate(0, -1.5px) rotate(1.5deg)
    }
    16% {
        -webkit-transform: translate(0, -.5px) rotate(-1.5deg);
        transform: translate(0, -.5px) rotate(-1.5deg)
    }
    18%, 22% {
        -webkit-transform: translate(0, .5px) rotate(-1.5deg);
        transform: translate(0, .5px) rotate(-1.5deg)
    }
    20%, 36%, 46% {
        -webkit-transform: translate(0, -1.5px) rotate(2.5deg);
        transform: translate(0, -1.5px) rotate(2.5deg)
    }
    26%, 50% {
        -webkit-transform: translate(0, .5px) rotate(.5deg);
        transform: translate(0, .5px) rotate(.5deg)
    }
    28% {
        -webkit-transform: translate(0, .5px) rotate(1.5deg);
        transform: translate(0, .5px) rotate(1.5deg)
    }
    30%, 40%, 62%, 76%, 88% {
        -webkit-transform: translate(0, -.5px) rotate(2.5deg);
        transform: translate(0, -.5px) rotate(2.5deg)
    }
    32%, 34%, 66% {
        -webkit-transform: translate(0, 1.5px) rotate(-.5deg);
        transform: translate(0, 1.5px) rotate(-.5deg)
    }
    42% {
        -webkit-transform: translate(0, 2.5px) rotate(-1.5deg);
        transform: translate(0, 2.5px) rotate(-1.5deg)
    }
    44%, 70% {
        -webkit-transform: translate(0, 1.5px) rotate(.5deg);
        transform: translate(0, 1.5px) rotate(.5deg)
    }
    48%, 74%, 82% {
        -webkit-transform: translate(0, -.5px) rotate(.5deg);
        transform: translate(0, -.5px) rotate(.5deg)
    }
    52%, 56%, 60% {
        -webkit-transform: translate(0, 2.5px) rotate(2.5deg);
        transform: translate(0, 2.5px) rotate(2.5deg)
    }
    58% {
        -webkit-transform: translate(0, .5px) rotate(2.5deg);
        transform: translate(0, .5px) rotate(2.5deg)
    }
    84% {
        -webkit-transform: translate(0, 1.5px) rotate(2.5deg);
        transform: translate(0, 1.5px) rotate(2.5deg)
    }
    90% {
        -webkit-transform: translate(0, 2.5px) rotate(-.5deg);
        transform: translate(0, 2.5px) rotate(-.5deg)
    }
    92% {
        -webkit-transform: translate(0, .5px) rotate(-.5deg);
        transform: translate(0, .5px) rotate(-.5deg)
    }
    94% {
        -webkit-transform: translate(0, 2.5px) rotate(.5deg);
        transform: translate(0, 2.5px) rotate(.5deg)
    }
    0%, 100% {
        -webkit-transform: translate(0, 0) rotate(0);
        transform: translate(0, 0) rotate(0)
    }
}
/* end */
@media (max-width: 800px){.footwaveline{display: none;}}
#footgundong{margin-left:20px;overflow: overlay;display: inline-flex;text-align: right;}
.item-foot{color: var(--minor);height: 45px;line-height: 45px;transition: color 0.35s;white-space: nowrap;}
.swal-footer{text-align:center;}
.swal-button {font-size: 20px;}
.count>svg,.count>text{display:none;}
.wz-span {
    border: 1px solid #bbbbbb;
    height: auto;
    color: #bbbbbb;
    font-size: 10px;
    border-radius: 2px;
    padding: 0 2px;
}
/*底部导航*/

第五步

在 child.js 加入下方代码。

//底部导航 滚动进度条百分比
$(function(){var $this=$("#footgundong");var scrollTimer;$this.hover(function(){clearInterval(scrollTimer)},function(){scrollTimer=setInterval(function(){scrollNews($this)},4000)}).trigger("mouseleave");function scrollNews(obj){var $self=obj.find("ul");var lineHeight=$self.find("li:first").height();$self.animate({"marginTop":-lineHeight+"px"},500,function(){$self.css({marginTop:0}).find("li:first").appendTo($self)})}})
window.onscroll = function() {
  let scrollNow = window.pageYOffset;
  let pageClientHeight = document.documentElement.clientHeight;
  let scrollHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document.documentElement.clientHeight) - pageClientHeight;
  let fullWindowHeightInPercentage = Math.round((scrollNow / scrollHeight) * 100);
  let percentage = document.getElementById('percentage');
  percentage.innerHTML = '<svg class="icon" aria-hidden="true"><use xlink:href="#icondingwei"></use></svg> ' + fullWindowHeightInPercentage + '%';
  if (fullWindowHeightInPercentage == 0) percentage.innerHTML = '<svg class="icon" aria-hidden="true"><use xlink:href="#icondingwei"></use></svg> 到顶啦';
  if (fullWindowHeightInPercentage == 100) percentage.innerHTML = '<svg class="icon" aria-hidden="true"><use xlink:href="#icondingwei"></use></svg> 到底啦';
}
let t1 = 0;
let t2 = 0;
let scrollTop = 0;
let timer = null;
document.onscroll = function() {
  clearTimeout(timer);
  timer = setTimeout(isScrollEnd, 500);
  t1 = document.documentElement.scrollTop || document.body.scrollTop;
};
function isScrollEnd() {
  t2 = document.documentElement.scrollTop || document.body.scrollTop;
  let percentage = document.getElementById('percentage');
  if(t2 == t1){
		if(t2==document.body.scrollTop){}else{
			percentage.innerHTML = '<svg class="icon" aria-hidden="true"><use xlink:href="#iconA"></use></svg> 回到顶部';
    }
  }
};
function addshoucang() {
    new Vue({
            data:function(){
                this.$notify({
                    title:"⭐ 欢迎收藏本站",
                    message:"ㅤ  使用Ctrl+D即可添加收藏",
                    position: 'bottom-right',
                    offset: 50,
                    showClose: false,
                    type:""
                });
                return{visible:false}
            }
        })
};

结语

教程到这就结束了，如果发现有问题的话可以在下面评论留言一下。

2023年9月6日

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

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

[content_hide]

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

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

       <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.sluyu.com/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>

[/content_hide]

2023年8月5日

【7B2主题美化】网格样式文章鼠标悬浮弹出分类角标

效果截图

角标底色同步你站点

css样式

.post-1 a.post-list-cat-item {
    background:  var(--b2color);
    color: #fff!important;
    padding: 4px;
    line-height: 12px;
    border-radius: 4px;
}
.post-list-meta-box {
	justify-content: space-between;
	margin: 0px;
	color: #AAAEB3;
}
.post-list-cat {
    font-size: 12px;
    margin: 10px;
    top: 0px;
    position: absolute;
    z-index: 2;
    display: none;
}
.post-list .b2_gap .post-list-item :hover .post-list-cat{
	display: block;
}

2023年1月4日

【7B2主题美化】菜单样式美化

B2主题菜单样式修饰，加边框修饰和三种彩色圆点，还有上滑的动画效果。

css样式：

/**菜单样式美化代码**/
.has_children .sub-menu {
border-radius: 4px;
}
.top-menu .b2-jt-down {
display: none!important;
}
.top-menu-ul .sub-menu-0 {
border-top: 0;
padding: 15px;
transform: translateY(10px);
transition: all .3s;
}
.top-menu ul li {
}
.top-menu ul li:hover .sub-menu-0 {
transform: translateY(0);
}
.top-menu-ul .sub-menu-0>li {
border-left: 1px solid #ebeef5;
position: relative;
}
.b2-menu-3 .sub-menu-0>li>a {
color: #4c4c4c;
padding: 8px 15px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.b2-menu-3 .sub-menu-0>li:after {
content: '';
position: absolute;
top: 12px;
left: -5px;
width: 3px;
height: 3px;
border-radius: 50%;
background: #fff;
border: 3px solid #3d7eff;
}
.b2-menu-3 .sub-menu-0>li:nth-child(2n+1):after{
border: 3px solid #f1787f;
}
.b2-menu-3 .sub-menu-0>li:nth-child(3n+1):after{
border: 3px solid #61e1b9
}
.b2-menu-3 .sub-menu-0>li>a:hover {
background: #ebeef5;
}
.b2-menu-3 .sub-menu-0 > li:hover > a, .b2-menu-3 .sub-menu-0 a:hover {
color: #333;
}

2022年11月24日

【7B2主题美化】给首页左侧添加联系站长按钮

效果图

教程

打开B2后台–点击模块管理–点击首页–点击添加模块–点击自定义内容–输入下方代码即可。

如果要每个页面显示，将代码放入footer.php即可。

<style> @keyframes shangxa { 0%, 100%, 20%, 50%, 80% { transition-timing-function: cubic-bezier(0.215,.61,.355,1); transform: translate3d(0,0,0); } 40%, 43% { transition-timing-function: cubic-bezier(0.755,0.50,0.855,0.060); transform: translate3d(0,-10px,0); } 70% { transition-timing-function: cubic-bezier(0.755,0.050,0.855,0.060); transform: translate3d(0,-6px,0); } 90% { transform: translate3d(0,-3px,0); } } .leke { display: flex; position: fixed; left: 0; top: calc(50% - 103px); flex-direction: column; -webkit-box-align: center; align-items: center; color: rgb(255, 255, 255); font-size: 16px; font-weight: 500; line-height: 20px; box-shadow: rgba(0, 0, 0, 0.08) 0px 5px 6px -4px, rgba(13, 206, 158, .37) 0px 6px 10px; z-index: 10; overflow: hidden; background: #0dce9e; padding: 12px 8px 12px 5px; border-radius: 0 14px 14px 0; transition: height 0.2s ease 0s, top 0.2s ease 0s; } .leke:hover { opacity: .8; } .leke .upload-icon { flex-shrink: 0; width: 28px; height: auto; display: block; margin-bottom: 2px; -webkit-animation: shangxa 2s infinite; animation: shangxa 2s infinite; } @media screen
AND (max-width: 768px) { .leke { display: none; } } #qidiana { cursor: pointer; } .class_qidian_wpa { border-radius: 6px !important; box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1); -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1); -moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1); } </style> <a href="http://wpa.qq.com/msgrd?v=3&uin=1035761010&site=qq&menu=yes" target="_blank"><div id="qidiana" class="leke"> <svg t="1599210542874" class="upload-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16321" width="30" height="30"><path d="M224.99 512a287.01 287.01 0 1 0 574.02 0 287.01 287.01 0 1 0-574.02 0z" fill="#FFDA33" p-id="16322"></path><path d="M659.18375 635.7275c5.61375-6.55875 3.74625-16.86375-2.82375-22.5-6.5475-5.61375-16.86375-3.735-22.48875 2.82375-33.75 37.485-70.30125 55.305-121.86 55.305-51.55875 0-84.375-14.0625-121.87125-55.305-5.625-6.57-15.94125-8.4375-22.5-2.82375-6.57 5.63625-8.4375 15.94125-2.8125 22.5 44.055 49.69125 85.30875 68.43375 147.18375 68.43375 61.86375 0 107.7975-22.48875 147.1725-68.43375zM390.15125 469.8125v-56.25c0-14.99625-12.18375-28.125-28.125-28.125-14.99625 0-28.11375 12.18375-28.11375 28.125v56.25c0 14.99625 12.1725 28.125 28.11375 28.125 14.99625 0 28.125-12.18375 28.125-28.125z m494.94375-59.0625c-42.1875-170.6175-193.10625-297.1575-373.08375-297.1575-179.98875 0-330.9075 126.54-373.10625 297.1575-45 16.875-76.87125 66.555-76.87125 124.68375 0 66.56625 42.1875 121.86 97.4925 130.30875 0 0 0 0.93375 0.945 0.93375h62.80875a339.87375 339.87375 0 0 1-39.375-159.3675c0-186.5475 147.18375-337.4775 328.10625-337.4775s328.08375 150.93 328.08375 337.4775c0 125.60625-66.54375 234.36-165.915 292.48875A54.9 54.9 0 0 0 661.0625 797.91875c-30.9375 0-56.25 25.30125-56.25 56.2275 0 30.94875 25.3125 56.26125 56.25 56.26125 30.92625 0 56.23875-25.3125 56.23875-56.26125 0-4.68-0.93375-9.36-1.87875-13.10625 64.6875-42.1875 117.18-103.12875 148.12875-175.2975 55.29375-9.39375 98.415-63.7425 98.415-130.30875 0-58.12875-32.81625-107.80875-76.87125-124.68375z m-194.985 59.0625v-56.25c0-14.99625-12.18375-28.125-28.11375-28.125-15.0075 0-28.125 12.18375-28.125 28.125v56.25c0 14.99625 12.18375 28.125 28.125 28.125 14.99625 0 28.11375-12.18375 28.11375-28.125z" fill="#515151" p-id="16323" data-spm-anchor-id="a313x.7781069.0.i0" class=""></path></svg> <span>联</span><span>系</span><span>站</span><span>长</span> </div></a>

上方链接换成自己的QQ号或其他联系方式链接

<strong>http://wpa.qq.com/msgrd?v=3&uin=123456（你的QQ）&site=qq&menu=yes</strong>

2022年11月21日

【7B2主题美化】二次元渐变五格模块

效果图

鼠标悬停会显示图片。

以下代码放入后台-模块管理-自定义

<div class="home-row-left content-area ">
<div id="html-box-qkyl_sdk" class="html-box">
<div data-v-d1c115ee="" class="course-project-panel-course">
<ul data-v-d1c115ee="">
<li data-v-d1c115ee="">
<a data-v-d1c115ee="" href="https://www.sluyu.com/" target="_blank">
<div data-v-d1c115ee="" class="top">
<p data-v-d1c115ee="" class="title nike">森鹿语</p>
<p data-v-d1c115ee="" class="describe">欢迎大家来访</p>
<p data-v-d1c115ee="" class="describe">有幸遇见，恰巧合拍</p>
<div data-v-d1c115ee="" class="line nike-line"> </div>
<button data-v-d1c115ee="" type="button" class="nike-btn ivu-btn ivu-btn-default ivu-btn-circle">
<span>查看详情</span>
</button>
</div>
<div data-v-d1c115ee="" class="bottom nike-bottom">
<p data-v-d1c115ee="" class="title">森鹿语</p>
<p data-v-d1c115ee="" class="describe">欢迎大家来访</p>
<p data-v-d1c115ee="" class="describe">有幸遇见</p>
<div data-v-d1c115ee="" class="line"></div>
<button data-v-d1c115ee="" type="button" class="bottom-btn ivu-btn ivu-btn-default ivu-btn-circle">
<span>查看详情</span>
</button>
</div>
</a>
</li>
<li data-v-d1c115ee="">
<a data-v-d1c115ee="" href="https://www.sluyu.com/" class="">
<div data-v-d1c115ee="" class="top">
<p data-v-d1c115ee="" class="title vip">美化教程</p>
<p data-v-d1c115ee="" class="describe">优美的你</p>
<p data-v-d1c115ee="" class="describe">愿你吉祥</p>
<div data-v-d1c115ee="" class="line vip-line"> </div>
<button data-v-d1c115ee="" type="button" class="vip-btn ivu-btn ivu-btn-default ivu-btn-circle">
<span>查看详情</span>
</button>
</div>
<div data-v-d1c115ee="" class="bottom vip-bottom">
<p data-v-d1c115ee="" class="title">美化教程</p>
<p data-v-d1c115ee="" class="describe">优美的你</p>
<p data-v-d1c115ee="" class="describe">愿你吉祥</p>
<div data-v-d1c115ee="" class="line"></div>
<button data-v-d1c115ee="" type="button" class="bottom-btn ivu-btn ivu-btn-default ivu-btn-circle">
<span>
<span data-v-d1c115ee="">查看详情</span>
</span>
</button>
</div>
</a>
</li>
<li data-v-d1c115ee="">
<a data-v-d1c115ee="" href="https://www.sluyu.com/" class="">
<div data-v-d1c115ee="" class="top">
<p data-v-d1c115ee="" class="title routine">系统科技</p>
<p data-v-d1c115ee="" class="describe">每一章都很优质</p>
<p data-v-d1c115ee="" class="describe">学习更加轻松哦</p>
<div data-v-d1c115ee="" class="line routine-line"></div>
<button data-v-d1c115ee="" type="button" class="routine-btn ivu-btn ivu-btn-default ivu-btn-circle">
<span>查看详情</span>
</button>
</div>
<div data-v-d1c115ee="" class="bottom routine-bottom">
<p data-v-d1c115ee="" class="title">系统科技</p>
<p data-v-d1c115ee="" class="describe">每一章都很优质</p>
<p data-v-d1c115ee="" class="describe">学习更加轻松哦</p>
<div data-v-d1c115ee="" class="line"></div>
<button data-v-d1c115ee="" type="button" class="bottom-btn ivu-btn ivu-btn-default ivu-btn-circle">
<span>查看详情</span>
</button>
</div>
</a>
</li>
<li data-v-d1c115ee="">
<a data-v-d1c115ee="" href="https://www.sluyu.com/" class="">
<div data-v-d1c115ee="" class="top">
<p data-v-d1c115ee="" class="title ten">Android</p>
<p data-v-d1c115ee="" class="describe">原始的质感</p>
<p data-v-d1c115ee="" class="describe">带你步入高效的殿堂</p>
<div data-v-d1c115ee="" class="line ten-line"> </div>
<button data-v-d1c115ee="" type="button" class="ten-btn ivu-btn ivu-btn-default ivu-btn-circle">
<span>查看详情</span>
</button>
</div>
<div data-v-d1c115ee="" class="bottom ten-bottom">
<p data-v-d1c115ee="" class="title">Android</p>
<p data-v-d1c115ee="" class="describe">原始的质感</p>
<p data-v-d1c115ee="" class="describe">带你步入高效的殿堂</p>
<div data-v-d1c115ee="" class="line"> </div>
<button data-v-d1c115ee="" type="button" class="bottom-btn ivu-btn ivu-btn-default ivu-btn-circle">
<span>查看详情</span>
</button>
</div>
</a>
</li>
<li data-v-d1c115ee="">
<a data-v-d1c115ee="" href="https://www.sluyu.com/" target="_blank">
<div data-v-d1c115ee="" class="top">
<p data-v-d1c115ee="" class="title double">实用云址</p>
<p data-v-d1c115ee="" class="describe">每一个地址</p>
<p data-v-d1c115ee="" class="describe">都是我们的好帮手</p>
<div data-v-d1c115ee="" class="line double-line"> </div>
<button data-v-d1c115ee="" type="button" class="double-btn ivu-btn ivu-btn-default ivu-btn-circle">
<span>查看详情</span>
</button>
</div>
<div data-v-d1c115ee="" class="bottom double-bottom">
<p data-v-d1c115ee="" class="title">实用云址</p>
<p data-v-d1c115ee="" class="describe">每一个地址</p>
<p data-v-d1c115ee="" class="describe">都是我们的好帮手</p>
<div data-v-d1c115ee="" class="line"></div>
<button data-v-d1c115ee="" type="button" class="bottom-btn ivu-btn ivu-btn-default ivu-btn-circle">
<span>查看详情</span>
</button>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>

以下代码放到css样式

.course-project-panel-course[data-v-d1c115ee] {
background-color: #f5f5f7;
padding: 24px 0;
border-radius: 10px
}
.course-project-panel-course ul[data-v-d1c115ee] {
display: flex;
justify-content: space-around
}
.course-project-panel-course ul li[data-v-d1c115ee] {
width: 100%;
cursor: pointer;
border-right: 1px solid #eaeaea;
position: relative
}
.course-project-panel-course ul li .top[data-v-d1c115ee] {
text-align: center;
opacity: 1;
transition-duration: 1.5s
}
.course-project-panel-course ul li .top .title[data-v-d1c115ee] {
font-size: 22px;
font-weight: 700;
padding: 24px 0 20px
}
.course-project-panel-course ul li .top .describe[data-v-d1c115ee] {
font-size: 14px;
color: #484848
}
.course-project-panel-course ul li .top .line[data-v-d1c115ee] {
width: 24px;
height: 4px;
background-color: #31a86c;
margin: 10px auto 40px;
border-radius: 50px
}
.course-project-panel-course ul li .top .ivu-btn[data-v-d1c115ee] {
font-size: 13px;
width: 134px;
height: 40px;
color: #fff
}
.course-project-panel-course ul li .top .vip[data-v-d1c115ee] {
color: #31a86c
}
.course-project-panel-course ul li .top .vip-line[data-v-d1c115ee] {
background-color: #31a86c
}
.course-project-panel-course ul li .top .vip-btn[data-v-d1c115ee] {
background-color: #9bd5b8;
border: 0 solid #0054f0 !important
}
.course-project-panel-course ul li .top .vip-btn[data-v-d1c115ee]:hover {
border: none;
background-color: #31a86c
}
.course-project-panel-course ul li .top .routine[data-v-d1c115ee] {
color: #ff902e
}
.course-project-panel-course ul li .top .routine-line[data-v-d1c115ee] {
background-color: #ff902e
}
.course-project-panel-course ul li .top .routine-btn[data-v-d1c115ee] {
background-color: #fac6a1;
border: 0 solid #0054f0 !important
}
.course-project-panel-course ul li .top .routine-btn[data-v-d1c115ee]:hover {
border: none;
background-color: #ff902e
}
.course-project-panel-course ul li .top .ten[data-v-d1c115ee] {
color: #31a89b
}
.course-project-panel-course ul li .top .ten-line[data-v-d1c115ee] {
background-color: #31a89b
}
.course-project-panel-course ul li .top .ten-btn[data-v-d1c115ee] {
background-color: #7fc7c0;
border: 0 solid #0054f0 !important
}
.course-project-panel-course ul li .top .ten-btn[data-v-d1c115ee]:hover {
border: none;
background-color: #31a89b
}
.course-project-panel-course ul li .top .double[data-v-d1c115ee] {
color: #ffc343
}
.course-project-panel-course ul li .top .double-line[data-v-d1c115ee] {
background-color: #ffc343
}
.course-project-panel-course ul li .top .double-btn[data-v-d1c115ee] {
background-color: #fbd78b;
border: 0 solid #0054f0 !important
}
.course-project-panel-course ul li .top .double-btn[data-v-d1c115ee]:hover {
border: none;
background-color: #ffc343
}
.course-project-panel-course ul li .top .nike[data-v-d1c115ee] {
color: #439bff
}
.course-project-panel-course ul li .top .nike-line[data-v-d1c115ee] {
background-color: #439bff
}
.course-project-panel-course ul li .top .nike-btn[data-v-d1c115ee] {
background-color: #8abffc;
border: 0 solid #0054f0 !important
}
.course-project-panel-course ul li .top .nike-btn[data-v-d1c115ee]:hover {
border: none;
background-color: #439bff
}
.course-project-panel-course ul li .vip-bottom[data-v-d1c115ee] {
background: url(/img/aa0b646cf0cc7.png) 0 0 no-repeat
}
.course-project-panel-course ul li .routine-bottom[data-v-d1c115ee] {
background: url(/img/3470c0d56c173.png) 0 0 no-repeat
}
.course-project-panel-course ul li .ten-bottom[data-v-d1c115ee] {
background: url(/img/4f46d3890b42b.png) 0 0 no-repeat
}
.course-project-panel-course ul li .double-bottom[data-v-d1c115ee] {
background: url(/img/fe92e6bc958a3.png) 0 0 no-repeat
}
.course-project-panel-course ul li .nike-bottom[data-v-d1c115ee] {
background: url(/img/9da1215eca6e9.png) 0 0 no-repeat
}
.course-project-panel-course ul li .bottom[data-v-d1c115ee] {
width: 256px;
height: 268px;
color: #1b1b1b;
border-radius: 10px;
padding: 46px 28px 0;
position: absolute;
left: 0;
top: -28px;
opacity: 0;
transform: scale(1);
transition-duration: .5s
}
.course-project-panel-course ul li .bottom .title[data-v-d1c115ee] {
font-size: 23px;
padding-bottom: 24px
}
.course-project-panel-course ul li .bottom .describe[data-v-d1c115ee] {
font-size: 14px
}
.course-project-panel-course ul li .bottom .line[data-v-d1c115ee] {
width: 24px;
height: 4px;
background-color: #fff;
margin: 15px 0 30px;
border-radius: 50px
}
.course-project-panel-course ul li .bottom .bottom-btn[data-v-d1c115ee] {
width: 80%;
border: none;
background-color: hsla(0, 0%, 100%, .5);
font-size: 13px;
height: 40px;
color: #0c301e;
text-shadow: 0 3px 20px #3c6751;
text-align: center
}
.course-project-panel-course ul li .bottom .bottom-btn[data-v-d1c115ee]:hover {
background-color: #fff
}
.course-project-panel-course ul li[data-v-d1c115ee]:last-child {
border-right: none
}
.course-project-panel-course ul li:hover .top[data-v-d1c115ee] {
opacity: 0;
transition-duration: .5s
}
.course-project-panel-course ul li:hover .bottom[data-v-d1c115ee] {
transform: scale(1.05);
opacity: 1;
transition-duration: 1s
}

下载附件放到网站根目录

2022年11月17日

【7B2主题美化】给网站添加悬浮二维码

效果图

以下代码放入b2/footer.php最上面

第9行是你存放的图片地址

<div class="showpc">
<style>
.showpc{display:none;}@media (min-width:960px){.showpc{display:inline;}}
</style>
<div id="wpon_svip_gif" class="wpon_svip_gif" style="display: block;">
<div class="kubao" style="display: none;"></div>
<p>
<a class="link animated" href="/vips" data-stat="升级SVIP活动特价" target="_blank" style="border: none; box-shadow: none;">
<br>
<img src="/gif/232059cb5361.gif" height="200" width="600">
<br>
</a>
</p>
</div>
</div>

以下代码放入css样式

#wpon_svip_gif {
        display: none;
        width: 200px;
        height: 61px;
        border-radius: 0 0 13px 13px;
        z-index: 1002;
        right: 30px;
        top: 100px;
        position: fixed;
    }

2022年11月15日

标签： 7b2美化

如下图：

效果截图

使用方法

说明

截图

效果图

食用方法

第一步

第二步

第三步

第四步

第五步

结语

效果截图

css样式：

效果图

教程

效果图

以下代码放入后台-模块管理-自定义

以下代码放到css样式

下载附件放到网站根目录

效果图

以下代码放入b2/footer.php最上面

以下代码放入css样式