标签: 美化

  • WordPress悬浮音乐播放器

    本插件已在gitee开源,请遵循GPL3.0开源协议,禁止商业化使用以及销售行为

    WordPress悬浮音乐播放器

    介绍

    作者:李初一 QQ:82719519

    博客:初一小盏

    本插件已在诸多Wordpress热门主题中进行了简单的运行测试

    兼容:

    子比主题、B2 Pro、Ripro、总裁主题、一为导航等付费主题

    免费主题仅简单的测试了几款,请大家不要嫌麻烦自行测试一下

    核心代码为小枫独立开发,由李初一改自Wordpress插件,播放器目前有6种不同颜色的主题样式可任意切换 + 3种获取音乐的方式!

    注意:该插件代码有用到ES6语法和css3新特性,如果你使用浏览器内核还是IE10以下,那请回避吧~

    插件说明

    一款基于网易云音乐所制作的第三方音乐嵌入插件,其核心代码为小枫独立制作,音乐所有权归网易所有

    禁止商业化使用以及二次销售

    2023.12.30

    • 修复播放器文字图标高度问题
    • 新增data-bottomHeight高度属性和ES5语法
    • 新增子比主题日夜间模式自适应开关
    • 新增底部歌词关闭、乱序播放选项
    • 补充自动淡出音乐播放器备注:开启后会自动播放音乐,但是大部分浏览器都禁止自动播放,具体自测
    • 功能备注补全,让小白也能轻松上手
    • 新增赞助广告位  tips:免费插件,需要赞助才会有更新的动力

    2023.12.28

    补充子比主题夜间模式css,替换插件css目录下的css文件即可

    待更新功能

    • 可视化管理
    • 记忆播放
    • 更多待添加…

    插件截图

    20231227172018889-image-15

    20231227172044645-image-16

    安装教程

    1. 下载插件
    2. 上传至Wordpress插件目录
    3. 启用插件

    使用说明

    1. 不可和本人ACG美化插件一起使用
    2. 大概率与诸多csf框架开发的插件冲突
    3. 很多细节方面的东西没有多大的心思去补充,有能力的小伙伴们可以自行补充

    鸣谢

    特此感谢为本项目提供支持与灵感的项目

    HTML5音乐播放器

  • 【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背景,无需替换)

    搭配下方微信公众号单页显示效果更佳

    点击跳转的单页

  • 【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}
                }
            })
    };

    结语

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

  • 【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]

  • 【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;
    }
  • 【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;
    }
  • 【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>

  • 【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;
        }
  • 【7B2主题美化】暗黑模式带开关适应B2Pro_4.1.2

    效果图

    教程

    • 头部位置增加按钮方法

    <strong>b2/Modules/Templates/Header.php 884行左右插入代码</strong>

    <div data-title="切换昼夜" class="user-tips"><button onclick="switchNightMode()"><i id="lmtdcn" class="lmtd bd-yewanshuimian"></i></button></div>

    后台b2主题-常规设置-头部HTML标签

    <script type="text/javascript" src="//at.alicdn.com/t/font_3133075_wsm2usco9v.js"></script> <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_3133075_wsm2usco9v.css" /> <script type="text/javascript" src="/pic/jquery.min.js"></script>

    自己的子主题style.css

    /*黑夜模式开始*/body.night .info-box,body.night .i-price{
      
        background: #3d3d3d;
    }
    body.night .infomation-list-top,body.night .info-list {
        border-bottom: 1px solid #535353;
    }
    .social-top .header-user {
        width: auto;
    }
    body.night .user-credit,body.night .user-money{
        color: #adb5bd!important;
    }
    body.night .topic-name-data b {
        color: #adb5bd;
    }
    body.night .po-topic-textarea .topic-content {
        color: #adb5bd;
    }
    body.night .message-content p {
        color: #adb5bd;
    }
    /*标题栏目*/body.night .comment-info span {
    color:#adb5bd
    }
    body.night .base-header h3 {
      color: #f0f0f0;
    }
    body.night .base-header h3::after {
      background: #ffc107;
    }
    body.night .base-header h3:before {
      background: #ffc107;
    }
    /*标题栏目结束*//*夜间登录背景*/body.night .login-box-img {
        background: linear-gradient(314deg,#946801 0%,#ffc107 100%);
    }
    /*夜间登录背景*/body.night .header-login-button button {
        border: 1px solid #333 !important;
        background: #333 !important;
    }
    body.night .login-bottom button {
        background: #ffc107 !important;
        border: 1px solid #ffc107 !important;
    }
    /*style*/@media screen and (max-width: 768px){
    body.night .menu-icon {
        background: #333;
        }
        
    body.night .login-button .b2-account-circle-line {
        color: #aaaeb3;
    }    
    body.night .top-menu-ul > li.depth-0:first-child > a {
        color: #adb5bd!important;
    }    
    body.night .social-top .header-banner-content .header-banner-left {
        width: 100%;
        height: 48px;
        border-top: 0px solid #eaeaea;
    }
    body.night .social-top .show-menu-box .header-logo {
        width: 100%;
        background: #292a2d;
        padding: 12px;
        top: 0;
        left: 0;
    }
    body.night .menu-icon .line-1,body.night .menu-icon .line-2,body.night .menu-icon .line-3 {
        background-color: #aaaeb3;
        }  
    body.night .login-button .b2-user {
        color: #aaaeb3;
        }    
    body.night .mobile-show {
        border: 1px solid rgba(255,255,255,0) !important;
        }
    body.night .mobile-footer-menu {
        background: #252829;
        }
    body.night .mobile-footer-center button {
        background: 0;
        border: 0;
        }
    body.night .show-menu-box .top-menu .top-menu-ul {
    border-left: 0px solid #272a2b;
        }
    body.night .top-menu ul li.depth-0 > a:after {
    background: #272a2b;
        }
    body.night .show-menu-box .top-menu .sub-menu {
    background: #272a2b;
        }
    body.night .show-menu-box .top-menu .sub-menu a {
    color: #909399;
        }
    body.night .logo-left .mobile-box,body.night .top-menu-ul>li.depth-0>a i.b2-arrow-down-s-line {
        background: #292a2d;
        }
    body.night .top-menu ul li.depth-0>a {
        background: #292a2d;
        }
    body.night .header-tools {
        background-image: url(https://www.xtuku.com/pic/night1.png);
        }
    body.night .close-button {
        color: #ddd!important;
    }
    body.night .ubanner-ctn h2 {
      font-size: 22px !important;
    }
    }
    body.night .ye {
      color: #ffc107;
    }
    body.night .poster {
      filter: sepia(0) grayscale(1) brightness(38%);
    }
    body.night .post-style-5 header h1 {
        background-repeat: repeat-x;
        background-position: 100% 100%;
        color: transparent;
        -webkit-font-smoothing: antialiased;
        -webkit-background-clip: text;
        -moz-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: 400;
    }
    body.night .ubanner-ctn h2 {
      text-align: center;
      color: #fff;
      font-size: 46px;
      font-weight: 600;
      margin-bottom: 65px;
      letter-spacing: 1px;
      text-shadow: 0 3px 6px rgba(0,0,0,0.2);
        background-position: 100% 100%;
        color: transparent;
        -webkit-font-smoothing: antialiased;
        -webkit-background-clip: text;
        -moz-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    /* 侧栏文章列表样式 */body.night .b2-widget-hot ul .widget-post:hover {
        cursor: pointer;
        background: linear-gradient(225.08deg,#2d3031 0%,#161819 96.09%);
        box-shadow: 1px 1px 2px #323638, -1px -1px 0px #292a2d;
    }
    body.night .widget-area .box h2 {
        color: #ffffff8f;
    }
    body.night .link-overlay:hover {
        color: #ffc107;
        text-decoration-line: none;
    }
    /* 侧栏文章列表样式 */body.night .post-next .post-pre-next-info:hover {
        cursor: pointer;
        background: linear-gradient(225.08deg,#161819 0%,#2d3031 96.09%);
        box-shadow: 1px 1px 2px #292a2d, -1px -1px 0px #292a2d;
    }
    body.night .post-pre .post-pre-next-info:hover {
        cursor: pointer;
        background: linear-gradient(225.08deg,#2d3031 0%,#161819 96.09%);
        box-shadow: 1px 1px 2px #292a2d, -1px -1px 0px #292a2d;
    }
    body.night .b2-menu-3 .sub-menu-0>li:hover>a, .b2-menu-3 .sub-menu-0 a:hover {
        background: linear-gradient(225.08deg,#262829 0%,#292a2d 96.09%);
    }
    body.night .widget ul li,body.night .aside-bar div>div+div{
        border-top:1px solid rgba(255,255,255,0)!important;
    }
    body.night .top-user-box-drop .avatar {
        border: #292a2d;
    }
    body.night .home-section-division,body.night .user-money,body.night .user-credit,body.night .site-terms,body.night .post-user-info,body.night .b2-audio-start-bar-box,body.night .post-tags-meat a .tag-img, body.night .content-hidden-info,body.night .widget-circle-info-desc,body.night .widget .recommended-widget li.picked a,body.night .comment-footer-tools .comment-vote-hidden button,body.night .comment-list button.text,body.night .user-sidebar-count li,body.night .following-info-desc,body.night .home-collection-image .collection-number.ar,body.night .insert-post,body.night .gold-page-list li:nth-child(odd),body.night .dmsg-content p,body.night .widget-new-header .ps1,body.night .widget-news-user,body.night .widget-new-header .ps a,body.night .pager-center,body.night .entry-content blockquote,body.night .post-content-footer .content-footer-poster button,body.night .collection-button,body.night .top-search .header-search-select,body.night .ds-textarea textarea,body.night input:focus,body.night .ds-item input,body.night .dmsg-textarea,body.night .desc textarea:focus,body.night .user-credit{
      background: #212425!important;
    color:#adb5bd
    }
    body.night .user-sidebar-count li,body.night .ds-textarea textarea {
        border: 5px solid #323335;
    }
    body.night .user-money,body.night .user-credit {
        text-shadow: 0px 0px 0px rgba(0,0,0,0);
        color: #fff;
    }
    body.night, body.night #body, body.night .page_navi a.current {
        background-color: #292a2d!important;
        color: #adb5bd!important;
    }
    body.night #sidebar, body.night .next-page a,body.night .com-form>.b2-radius {
        background-color: #292a2d;
        color: #888282;
    }
    body.night .home-section-division .home-division li h3 .go,body.night .bar-top,body.night .yarpp-related ol li:before {
        background: #ffc107;
    }
    body.night .home-section-division .home-division a:hover .item-thumb,body.night .home-section-division .home-division a:hover h3,body.night .tax-info-item .fliter-button:hover,body.night .pay-type li>button {
      color: #ffc107
    }
    body.night .home-section-division .home-division a {
        color: #525252;
    }
    @media (min-width:1024px) {
      body.night .home-section-division .home-division li.li_4 .item {
        background: #131313;
        color: #ffc107
      }
      body.night .home-section-division .home-division li.li_4 .item:hover {
        background: #ffc107;
        color: #fff
      }
    }
    body.night .lv-icon.user-lv i,body.night .custom-page-row.gold-row,body.night .modal.address-box .pay-box-content li.picked,body.night .pay-box-content li:hover,body.night .sah-catlist a,body.night .gujia .s-a-c-l h2,body.night .gujia .sah-name,body.night .gujia .sah-date,body.night .gujia .sah-r>div,body.night .gujia .sah-avatar,body.night .gujia .saf-z button,body.night .gujia .item-content::before,body.night .gujia .item-content::after {
        background-color: #292c2d;
    }
    body.night .bar-middle,body.night .bar-footer,body.night .aside-container .bar-user-info,body.night .bar-normal {
        box-shadow: -8px 0px 35px 0px rgba(0,0,0,0);
    }
    body.night .bar-user-info-row-title>a,body.night .related-posts .related-posts-title,body.night .post-3 .post-modules-top, .post-5 .post-modules-top,body.night .topic-vote-desc,body.night .home-collection-row-1,body.night .news-item ul,body.night .dmsg-list li {
        border-bottom: 1px solid rgba(255,255,255,0);
    }
    body.night .bar-mission .mission-today-list li,body.night .topic-type-menu,body.night .post-5 .load-more,body.night .post-5 .b2-pagenav,body.night .news-item+.news-item,body.night .news-item li+li,body.night .task-day-list li {
        border-top: 1px solid rgba(255,255,255,0);
    }
    body.night .related-posts .related-posts-item,body.night .top-search-select {
        border-right: 1px solid rgba(255,255,255,0);
    }
    body.night .next-jt i {
        background-color: rgba(255,255,255,0);
    }
    body.night .login-social-button-bottom,body.night .post-content-footer .content-footer-poster button {
        border: 1px solid rgba(0,0,0,0);
    }
    body.night .login-form-item input:focus {
        border-color: #ffc107;
    }
    body.night .login-eye .b2-eye-open,body.night .login-form-item input:focus + span,body.night .entry-content a:hover,body.night .tax-search button i,body.night .b2-audio-button {
        color: #ffc107;
    }
    body.night .user-w-logon:after {
        background-image: linear-gradient(0deg,#292a2d 0,rgb(29, 31, 32) 100%);
    }
    body.night .oauth-login-button {
        border-top: 1px dashed #444;
        border-bottom: 1px dashed #444;
        background: #292a2d;
    }
    body.night .comment-overlay {
        background-color: rgba(29, 31, 32, 0.91);
    }
    body.night .open-message{
        background: #292a2d!important;
        color: #adb5bd!important;
    }
    body.night .content-hidden-info {
        background-image: none;
    }
    body.night .post-5 .post-info h2::before,body.night .user-w-announcement li a::before,body.night .tax-fliter-hot .order-items a:hover {
        background-color: #ffc107;
    }
    /*
     * 无图文章列表浮动
     */body.night .post-5 .b2_gap {
        margin-top: 10px;
        margin-right: 0;
        background: #313131;
    }
    body.night .post-5 .b2_gap > li {
        background: #292a2d;
        margin: 0;
        transition: all .3s;
        border-right: 0;
        border-bottom: 1px solid #272a2b;
        border-left: 1px solid #272a2b;
        box-shadow: none;
    }
    body.night .post-5 .b2_gap > li:hover {
        -webkit-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
        box-shadow: 0px 10px 20px #121415
        -webkit-transform: translateY(-3px);
        -ms-transform: translateY(-3px);
        transform: translateY(-3px);
        position: relative;
        z-index: 5;
    }
    body.night .b2_gap > li .item-in {
        transition: all .3s;
    }
    /** 文章卡片 */body.night .soft-area {
        border: 1px solid #292a2d;
        background: #292a2d;
    }
    body.night .post-style-6-meta {
        background-color: #212425;
        box-shadow: 0px 0px 2px #323638, inset 0px 2px 3px #151617;
    }
    body.night .post-style-6-meta .meta_left span {
        color: #fff;
    }
    body.night .post-style-6-top .info6fwq li {
        border-bottom: 1px solid #666;
        color: #aaaeb3;
    }
    body.night .site-content .soft-area .area-c .soft-detail h1 {
        color: #fff;
    }
    body.night .post-style-6-top .dz6fwq a {
        background: linear-gradient(90deg,#ffc107,#c58f11);
    }
    body.night .post-style-6-top .dz6fwq a:hover {
        background: linear-gradient(90deg,#e8a711,#ffc107);
    }
    body.night .post-style-6-top .dz6fwq a:hover {
        box-shadow: 0px 5px 10px #ffd77945;
    }
    body.night .post-style-6-top .info6fwq li:before {
        background: #ffc107;
    }
    /* h3搜索标题 */body.night .insearch {
        line-height: 1.5;
        background-image: linear-gradient(135deg,#232425,#292a2d),linear-gradient(-90deg,#1e1f20 0%,#696969 100%);
        /* border-bottom: .1rem solid; */    border-image: linear-gradient(-90deg, #1e2021, #ffc107);
      font-size: 22px !important;
      padding: 6px;
      filter: drop-shadow(-4px 0 0 #ffc107);
    }
    body.night .insearch:before {
        margin-right: 6pt !important;
        color: #ffc107 !important;
        content: "\e622" !important;
        right: 0;
    }
    body.night .entry-content>h3 {
        margin: 30px 0 30px 0 !important;
    }
    /** 下载卡片 */body.night .download-item {
        padding: 40px;
        margin-top: 60px;
        background: #2E3138;
        border: 1px solid #333740;
        box-sizing: border-box;
        box-shadow: inset -1px -1px 0px #292a2d, inset 1px 1px 4px #292a2d;
    }
    body.night .download-rights {
        background: linear-gradient(225.08deg, #535966 0%, #2E3138 96.09%);
        box-shadow: 0px 2px 8px rgba(26, 28, 31, 0.79652);
    }
    body.night .download-info {
        background: linear-gradient(225.08deg, #3d414a 0%, #2E3138 96.09%);
        box-shadow: 0px 2px 8px rgba(26, 28, 31, 0.79652);
    }
    body.night .download-info ul {
        display: flex;
        flex-flow: wrap;
        padding: 10px;
        margin: 0;
        list-style: none;
        background: #2e3138;
        box-shadow: 0px 0px 2px #535966, inset 0px 2px 3px #1A1C1F;
    }
    body.night .post-style-6 .download-current {
        background: #2e3138;
        box-shadow: 0px 0px 2px #535966, inset 0px 2px 3px #1A1C1F;
    }
    body.night .entry-content .button {
        border: 1px solid #313540;
        background: linear-gradient(225.87deg,#393d46 2.76%,#26282d 94.28%);
        font-weight: 600;
    }
    body.night .download-rights ul li {
        border-top: 1px dashed #2a2c31;
    }
    body.night .entry-content .button:hover {
        background: linear-gradient(225.87deg,#2a2d33 2.76%,#2a2c32 94.28%);
        color: #fff;
        box-shadow: 1px 1px 0px #141618, -1px -1px 1px #535966;
    }
    body.night .download-button-box a{
        color: #fff;
    }
    body.night .download-list.gujia .gujia-bg {
        background-color: #252627;
    }
    body.night .download-list.gujia .download-button-box div {
        background-color: #252627;
    }
    /*style end*//*夜间样式开始*/body.night #content .post p a, body.night .floor {
        color: #af8f77;
    }
    body.night a, body.night a:link, body.night a:visited,body.night .topic-comment-left textarea,body.night .name,body.night .item-title,body.night .nav-name,body.night .top-user-box-drop .top-user-info-box-count p,body.night .top-user-info-box-name h2,body.night .home-section-division .home-division li h3,body.night .bar-mission .user-w-qd-list-title p,body.night .login-title span,body.night .item-content .b2-out{
        color: #adb5bd;
    }
    body.night #comments form textarea, body.night #comments form input {
        background-color: #292a2d;
        color: #888282;
    }
    body.night #content .menufeng {
        border-bottom: 1px solid #989292;
    }
    body.night .author-edit-page .author-edit-list>li,body.night .vip-top,body.night .collection-info,body.night .stream-article,body.night .stream-area .b2-pd {
        border-bottom: 1px solid #232627;
    }
    body.night .vip-allow.allow {
        color: #676c6f;
    }
    body.night #comments form textarea, body.night #comments form input, body.night #shangerweima {
        border: 1px solid #989292;
    }
    body.night .topic-comment-list,body.night .topic-comment-list-header,body.night .topic-lv1+.topic-lv1,body.night .topic-comment-list-footer,body.night .user-panel .avatar,body.night .com-form-textarea,body.night .ds-item,body.night .pay-type li>button {
        border: 1px solid #242627;
    color:#adb5bd
    }
    body.night #nav .menu ul{
        background: #292a2d;
    }
    body.night .site,body.night .widget-comment-contnet,body.night .circle-desc,body.night .po-topic-textarea textarea:first-child,body.night .post-list-cats a span,body.night .top-style-blur,body.night .shop_bg,body.night .news-header,body.night .news-item-header span.new-tag,body.night .news-item-header span,body.night .news-header .banner .banner-text .btn,body.night .com-form-textarea textarea,body.night .content-excerpt,body.night .shop-single-data-count button,body.night .shop-single-data li.shop-single-data-price,body.night .shop-single-data-count input,body.night .single-document-footer,body.night .document-cat-item:hover,body.night .content-ds,body.night .message-content p.comment span,body.night .topic-comment-form,body.night .topic-child-list ul,body.night .topic-footer-left button,body.night .topic-meta-more-box ul,body.night .topic-loading-more-button,body.night .entry-content p > code,body.night .post-tags-meat a,body.night .b2-light-dark-outside,body.night .filter-items a,body.night .topic-image-light,body.night .user-w-rw,body.night .user-credit,body.night .vip-count ul li .vip-in,body.night .mission-tk,body.night .top-user-box-drop.show,body.night .top-user-info-box .user-w-gold a i,body.night .tax-fliter-hot,body.night .bar-user-info-row .user-w-gold div,body.night .mission-page-list li:nth-child(even),body.night .modal-content{
        background:#292a2d;
    color:#adb5bd
    }
    body.night .bar-normal,body.night .box,body.night .span4,body.night .footer-fav,body.night .post-5 .b2_gap,body.night .news-item-header span::after,body.night .tbox,body.night .buy-resout-box,body.night .news-item-header b,body.night .sub-menu,body.night .topic-comment-form.show textarea,body.night .content-hidden-before i,body.night .content-hidden-end span,body.night .tax-fliter-cat,body.night .tax-search input,body.night .bar-item-desc,body.night .boxt,body.night .nav-detail-portfolio-wrapper,body.night .author-page-right,body.night .po-topic-box-tips{
        background:#323335;
    }
    body.night .bar-footer,body.night .aside-container .bar-user-info,body.night .bar-user-info-row,body.night .user-w-tj,body.night img.avatar,body.night .topic-card-box li,body.night .topic-video-box li>div video,body.night .topic-guess-box,body.night .widget .recommended-widget li a:hover,body.night .collection-posts li span,body.night .dmsg-list li:hover,body.night .mask-wrapper {
        background-color: #323335;
    color:#adb5bd
    }
    body.night .button,body.night button {
        background: #292a2d;
        /*border: 1px solid #ffc107;*/}
    body.night button.empty,body.night .button.empty {
        background: #333;
    }
    body.night .search-button-action,body.night .login-eye.button,body.night .my-circle-list>div>button,body.night .topic-drop>button,body.night .tax-search button,body.night .change-theme button,body.night .po-post-icons button,body.night .po-close-button button,body.night .gold-list-row-5,body.night .gold-list-row-1,body.night .gold-list-row-2,body.night .gold-list-row-3,body.night .gold-list-row-4,body.night .gold-page-list,body.night .site-footer .widget-title,body.night button,body.night .po-topic-top-right button,body.night .topic-type-menu>ul li button,body.night .po-ask button,body.night .topic-footer-right button,body.night .topic-author-info-right button,body.night .mfp-iframe-holder .mfp-close,body.night .tax-info-item .fliter-button,body.night .login-box-content .login-social-button-bottom a {
        background: 0 0;
        border: 0;
    }
    body.night button.empty,body.night .button.empty,body.night li.current-menu-item > a,body.night .topic-comment-content:hover button,body.night .top-menu-hide:hover .more,body.night .header .top-menu ul li.depth-0:hover > a .b2-jt-block-down,body.night button.text,body.night .entry-content a.button.empty,body.night .entry-content a.button.text,body.night .user-sidebar-info.active p {
        color: #ffc107;
    }
    .b2-light, .newsflashes-nav-in ul li.current-menu-item a {
        background-color: #ffc10712;
    }
    body.night .user-w-rw,body.night .user-credit{
        text-shadow:none;
    }
    body.night .user-w-qd-list-title{
       background-color:rgb(0, 88, 255,0.66); 
    }
    body.night .user-w-rw-bg,body.night .po-topic-button,body.night .topic-type-menu button.picked,body.night .btn-orange,boby.night .user-w-announcement li a::before{
        background-color: #ffc107;
        color: #fff;
    }
    body.night .b2-color,boby.night .po-topic-top-right .picked,body.night .top-user-box-drop li a i{
        color: #ffc107!important
    }
    body.night #public .topic-type-menu {
        background: rgba(41, 48, 66, 0.4);
    }
    body.night .wenzi,body.night .news-item-content p,body.night .news-header .banner .banner-text h4,body.night .topic-footer-right button,body.night .user-w-tj span {
        color: #9a9a9a;
    }
    body.night .gdd-quick-link-buy-vip__hover-block,body.night .gdd-quick-link-buy-vip__popover--btn,body.night .gdd-quick-link-buy-vip,body.night .gdd-quick-link-buy-vip__popover {
        background-color: #ffc107;
        color: #fff;
    }
    body.night .widget-comment-contnet.jt:before, body.night .widget-comment-contnet.jt:after,body.night #public .my-circle-list button.picked:before,body.night #public .my-circle-list button.picked:after {
        border-bottom-color: #202634;
    }
    body.night .shop-box-price {
        background: #242a38;
        border-top:none;
        border-bottom: none;
    }
    body.night .post-pay-type .post-pay-type-icon{
        color: #3e74a3;
    }
    body.night .comment-list button.text,body.night .top-search .header-search-select {
        border: 1px solid #212425;
    }
    body.night .b2-widget-title h2, .widget > h2{
        color: inherit;
    }
    body.night .topic-child-list li + li {
        border-top: 1px dashed #293042;
    }
    body.night .topic-comments:before{
        border-color: transparent transparent #202634;
    }
    body.night .widget-uisdc-helper .uisdc-helper-title {
        color: #ffc107;
        background: #222425;
    }
    body.night .custom-page-row.gold-row+.custom-page-row.gold-row {
        border-left: 10px solid #292a2d;
    }
    body.night .download-thumb::before {
        background: -webkit-radial-gradient(right top, ellipse cover, rgba(250, 250, 250, 0) 8%,rgb(41, 48, 66) 73%);
        background: radial-gradient(right top, ellipse cover, rgba(250, 250, 250, 0) 8%,rgb(41, 48, 66) 73%);
    }
    body.night .home_row,body.night .post-modules-top,body.night .post-5{
        background: rgba(0,0,0,0)!important;
    }
    body.night .b2-widget-comment,body.night .b2-widget-products,body.night .b2-widget-hot,body.night .po-topic-textarea,body.night .com-form-textarea textarea,body.night .topic-comment-list > ul,body.night .topic-comment-avatar,body.night .circle-info-left img,body.night .left-item img,body.night .logo-wrapper,body.night .mission-page-list ul{
        border: 1px solid #202634;
    color:#adb5bd
    }
    body.night .box-header,body.night .site-title,body.night .shop-single-action-right .favorite-button,body.night .tax-info-item .fliter-button {
        color: #fff;
    }
    body.night .comment .comment-item,body.night .post-5 ul.b2_gap > li,body.night .user-w-tj,body.night .user-w-rw,body.night .document-row + .document-row,body.night .has_children .sub-menu,body.night .post-tags-meat,body.night .none-comment,body.night .topic-comments,body.night #filter-top ul li + li,body.night .b2-b-t,body.night .circle-widget-button,body.night .list-footer,body.night .vip-faq-list + .vip-faq-list,body.night .custom-page-row + .custom-page-row,body.night .no-request,body.night .request-box li{
        border-top: 1px solid #212425!important;
    }
    body.night .post-user-info,body.night .po-topic-textarea textarea:first-child,body.night .my-circle-list,body.night .user-w-rw,body.night .shop-single-attr-title,body.night .single-bottom h3,body.night .shop-single-data li,body.night .dmsg-header,body.night .message-list li,body.night .box-header,body.night .author-links,body.night .custom-page-title,body.night .entry-header{
        border-bottom: 1px solid rgba(114, 114, 114, 0.1);
    }
    body.night .my-circle-list > div + div {
        border-left: 1px solid #202634;
    }
    body.night .post-5 ul.b2_gap > li {
        border-right: 1px solid #202634;
    }
    body.night .shop-single-img-box,body.night .shop-single-data-count button,body.night .shop-single-data-count input,body.night .content-ds,body.night .post-tags-meat a,body.night .po-topic-tools-right button,body.night .widget-mission-footer a {
        border: none;
    }
    body.night .post-3 .post-3-li .item-in:hover {
        background-color: #212425;
        color: #ff6800;
    }
    body.night .entry-content,body.night .comment-content-text p,body.night .shop-single-data-count input,body.night .news-header .banner .banner-text h2,body.night .message-content p.comment span{
        color: #adb5bd;
    }
    body.night .comment-list .children article .comment-item {
        border: none;
    }
    body.night .block-logo,body.night .banner-img {
        display: none;
    }
    body.night .news-header .banner{
        display: block;
        margin: 50px 0;
    }
    body.night .news-header .banner .banner-text{
        width: auto;
    }
    .logo .light-logo{
        display: none;
    }
    body.night .light-logo {
        display: block;
    }
    body.night .entry-content > hr {
        background-image: -webkit-linear-gradient(left, #202634, #8c8b8b, #202634);
        background-image: -moz-linear-gradient(left, #202634, #8c8b8b, #202634);
        background-image: -ms-linear-gradient(left, #202634, #8c8b8b, #202634);
        background-image: -o-linear-gradient(left, #202634, #8c8b8b, #202634);
    }
    body.night .shop-single-data li.shop-single-data-price{
        background-image:none;
    }
    body.night .content-hidden-info {
        border: 1px dashed rgba(178, 186, 194, 0.17);
    }
    body.night .buy-vip__hover-block,body.night .buy-vip__popover,body.night .buy-vip__popover--btn{
        background-color: #0058ff!important;
    }
    body.night .buy-vip__popover--btn,body.night .header-user .iconday,body.night .b2-widget-hot-circle .b2-widget-title button{
        color: #fff;
    }
    body.night .buy-vip__popover--desc{
        color:#0058ff ;
    }
    body.night .modal-content {
        background-image: url(https://www.xtuku.com/pic/night1.png);
        background-repeat: no-repeat;
        background-size: 100%;
    }
    body.night .top-user-info-box {
        background-image: url(https://www.xtuku.com/pic/night2.jpg);
    }
    body.night .header-search-select .select,body.night .header-search-select a:hover {
        background: #272a2b;
    }
    body.night .b2-menu-3 a:after{
    background: linear-gradient(225.08deg,#292a2d 20%,#ffc107 90.09%);
    }
    /*加载中背景*/body.night .gujia .bg,body.night .widget .widget-gujia-hot-circle .widget-circle-info h2,body.night .widget-gujia-hot-circle .widget-circle-icon,body.night .widget-gujia-hot-circle .widget-circle-meta span,body.night .topic-guess-box,body.night .post-thumb,body.night .widget-gujia-user .user-w-announcement>div,body.night .mission-gujia .user-w-qd>div,body.night .mission-gujia .user-mission-info-left,body.night .mission-gujia .avatar-parent,body.night .dmsg-self .my-dmsg-content,body.night .my-dmsg-content,body.night table td {
        background: #272a2b;
    }
    body.night .preloader {
        background-color: rgb(0 0 0 / 80%);
    }
    body.night .preloader-loding {
        color: #ffc107;
    }
    body.night .preloader-lod,body.night .large-square {
        background: #ffc107;
    }
    body.night .header-banner{
        background-color: #292a2d;
    }
    body.night .social-top .header{
        border-top: 1px solid #292a2d;
    margin-top: -2px;
    }
    /*灰白色字体*/body.night .change-theme button i,body.night .button.empty,body.night .home-first .hf-widget,body.night .home-first .hf-widget .hf-widget-title a,body.night .ceo-cat-switcher h5,body.night #container-box-1,body.night .searchs input[type="text"],body.night .bar-item i,body.night .site-footer,body.night .item-in.box.b2-radius:hover,body.night .u-backgroundColorWhite,body.night .authorCard--description,body.night .authorCard--meta,body.night .authorCard--title,body.night .button, body.night button,body.night .vip-faq .vip-faq-list h2,body.night .vip-faq .vip-faq-list p,body.night .post-list-item:hover .post-list-meta-box,body.night .insert-post h2,body.night .file-down h2,body.night .content-ds-count{
        color: #adb5bd!important;
    }
    /*背景色*/body.night .home-first .hf-widget,body.night .home-first .hf-widget-4 .hf-widget-content ul,body.night .site-footer,body.night .item-in.box.b2-radius:hover,body.night li.b2-widget-box.widget-post.widget-post-small:hover,body.night .u-backgroundColorWhite,body.night .w-a-count,body.night .write-select-row-top textarea,body.night .login-form-item input,body.night .forget-pass-info,body.night .vip-faq .vip-faq-list p,body.night .vip-faq .vip-faq-list{
        background-color: #323335!important;
    color:#adb5bd
    }
    /*鼠标移上去字体变白*/body.night .button.empty:hover{
        color: #FFF!important;
        transition: all .3s;
    }
    /*夜间圆角*/body.night #author .author-page-right{
        border-radius: 20px!important;
    }
    body.night .home-first .hf-widget{
        border: 1px solid rgba(114, 114, 114, 0.1);
    }
    body.night .home-first .hf-widget .hf-widget-title,body.night .post-3 .post-3-li .item-in{
        border-bottom: 1px solid rgba(114, 114, 114, 0.1);
    }
    body.night .index-header,body.night .single-top-html,body.night #html-box-ad{
        opacity: 0.5;
    }
    body.night img{
        opacity: 0.7;
    }
    body.night .login-form-item input:focus + span:after,body.night .login-form-item input[class="active"] + span:after,body.night .login-form-item input:valid + span:after,body.night .po-ask button span{
        background: #292a2d!important;
    }
    body.night .recaptcha-button{
        border-top: 1px solid #292a2d;
    }
    body.night .recaptcha-button .recaptcha-send{
        border-left: 0;
    }
    body.night .vip-footer .vip-faq{
        background: none!important;
    }
    body.night textarea.topic-title{
        border-radius: 20px 20px 0 0;
    }
    body.night code,body.night .entry-content p > code{
        color: #ff3c98;
        background-color: rgba(253,153,153,.2)!important;
        font-weight: 600;
    }
    body.night .common-button{
        color: #FFF!important;
    }
    body.night #banner_wave_1 {
        width: auto;
        height: 65px;
        _filter: alpha(opacity=80);
    display: none;
        position: absolute;
        bottom: 0;
        width: 400%;
        left: -236px;
        z-index: 1;
        opacity: 1;
        transiton-property: opacity, bottom;
        transition-duration: .4s, .4s;
        animation-name: move2;
        animation-duration: 240s;
        animation-fill-mode: backwards;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        top: 537px;
    }
    body.night #banner_wave_2 {
        width: auto;
        height: 65px;
        _filter: alpha(opacity=80);
    display: none;
        position: absolute;
        bottom: 0;
        width: 400%;
        left: -236px;
        z-index: 1;
        opacity: 1;
        transiton-property: opacity, bottom;
        transition-duration: .4s, .4s;
        animation-name: move2;
        animation-duration: 240s;
        animation-fill-mode: backwards;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        top: 537px;
    }
    body.night .parallax{
    display:none
    }
    body.night .user-tools .menu-new{
        font-size: 12px!important;
        background:#FF3355;
        color: #fff!important;
        position: absolute;
        right: 12px;
        line-height: 1;
        padding: 2px 4px;
        border-radius: 2px;
        margin-top: 2px;
        transform-origin:top top;
        transform: perspective(1px) scale(.74);
        font-style:inherit
    }
    body.night .write-thumb label {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    background:#fff;
        color: rgba(26,26,26,.2);
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        cursor: pointer;
        flex-flow: column;
    }
    /*黑夜模式结束*/

    子主题的child.js加入代码

    /*夜间模式开始*/(function(){
        if(document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") === ''){
            if(new Date().getHours() > 22 || new Date().getHours() < 6){
                document.body.classList.add('night');
                document.cookie = "night=1;path=/";
                    $(lmtdcn).removeClass("bd-taiyang-");
                $(lmtdcn).addClass("bd-yewanshuimian");
               
            }else{
                document.body.classList.remove('night');
                  $(lmtdcn).removeClass("bd-yewanshuimian");
                $(lmtdcn).addClass("bd-taiyang-");
                document.cookie = "night=0;path=/";
              
            }
        }else{
            var night = document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0';
        if(night == '0'){
            document.body.classList.remove('night');
              $(lmtdcn).removeClass("bd-yewanshuimian");
                $(lmtdcn).addClass("bd-taiyang-");
              
        }else if(night == '1'){
            document.body.classList.add('night');
                $(lmtdcn).removeClass("bd-taiyang-");
                $(lmtdcn).addClass("bd-yewanshuimian");
             
            }
        }
        })();
        function switchNightMode(){
            var night = document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0';
            if(night == '0'){
                document.body.classList.add('night');
                $(lmtdcn).removeClass("bd-taiyang-");
                $(lmtdcn).addClass("bd-yewanshuimian");
                document.cookie = "night=1;path=/"
              
            }else{
                document.body.classList.remove('night');
                $(lmtdcn).removeClass("bd-yewanshuimian");
                $(lmtdcn).addClass("bd-taiyang-");
                document.cookie = "night=0;path=/"
                
            }
        }
        // 页面宽度按钮
        (function(){
        if(document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") === ''){
            if(new Date().getHours() > 22 || new Date().getHours() < 6){
                document.body.classList.add('night');
                    $(lmtdcn).removeClass("bd-taiyang-");
                $(lmtdcn).addClass("bd-yewanshuimian");
                document.cookie = "night=1;path=/";
            }else{
                document.body.classList.remove('night');
                  $(lmtdcn).removeClass("bd-yewanshuimian");
                $(lmtdcn).addClass("bd-taiyang-");
                document.cookie = "night=0;path=/";
            }
        }else{
            var night = document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0';
        if(night == '0'){
            document.body.classList.remove('night');
              $(lmtdcn).removeClass("bd-yewanshuimian");
                $(lmtdcn).addClass("bd-taiyang-");
        }else if(night == '1'){
            document.body.classList.add('night');
                $(lmtdcn).removeClass("bd-taiyang-");
                $(lmtdcn).addClass("bd-yewanshuimian");
            }
        }
        })();
        function switchwidth(){
            var night = document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0';
            if(night == '0'){
                document.body.classList.add('night');
                    $(lmtdcn).removeClass("bd-taiyang-");
                $(lmtdcn).addClass("bd-yewanshuimian");
                document.cookie = "night=1;path=/"
            }else{
                document.body.classList.remove('night');
                  $(lmtdcn).removeClass("bd-yewanshuimian");
                $(lmtdcn).addClass("bd-taiyang-");
                document.cookie = "night=0;path=/"
            }
        }
     
    /*夜间模式结束*/

    有的用户浏览器闪白问题修改B2-header.php第16行

    <body <?php body_class(b2_get_option('template_top','top_type')); ?>>

    替换为

    <?php
    if ($_COOKIE['night']==1)
    $fssp="night";
    else 
    $fssp="";
    ?>
    <body <?php body_class($fssp); ?><?php body_class(b2_get_option('template_top','top_type')); ?>>

    最后在网站根目录放入pic文件夹

  • 【7B2主题美化】弹窗公告美化

    效果图

    放入主题的style.css文件中,或自行引入。

    Css代码:

    .gg-box .modal-content {
    width: 28rem;
    overflow: hidden
    margin-top: 0;
    }
    .gg-box-title .gg-title {
    width: 100%;
    text-align: center;
    padding: 0!important;
    }
    .modal-content .gg-box-title h2 {
    font-size: 22px;
    margin-bottom: 0;
    text-align: center;
    font-weight:bold;
    }
    .gg-box-title .gg-title span {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    }
    .title-bg {
    border: 0;
    }
    .modal-content .gg-title {
    padding: 20px 30px 0px 30px;
    }
    .modal-content .gg-title a {
    font-size: 16px;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
    display: block;
    font-family: Arial;
    text-decoration:none
    }
    .modal-content .gg-desc {
    padding: 20px 30px;
    font-size: 14px;
    letter-spacing: .5px;
    padding-bottom: 0;
    }
    .modal-content .gg-desc p {
    color: #909399;
    font-family: Arial;
    background: #f8f8f8;
    padding: 20px;
    line-height: 24px;
    }
    .gg-button a {
    border: 0;
    display: inline-block;
    padding: 8px 12px;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: .5px;
    background-color: #206aff;
    background-image: -webkit-gradient(linear, left top, right top, from(#006eff), to(#13adff));
    background-image: -webkit-linear-gradient(left, #006eff, #13adff);
    background-image: -o-linear-gradient(left, #006eff 0, #13adff 100%);
    background-image: linear-gradient(90deg, #006eff, #13adff);
    -webkit-box-shadow: 0 5px 10px 0 rgb(16 110 253 / 30%);
    box-shadow: 0 5px 10px 0 rgb(16 110 253 / 30%);
    }