b2主题美化教程

弹窗公告美化

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

CSS样式添加至主题根目录的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%);
}

导航菜单添加彩色渐变的文字

以下代码放到菜单

<span class="meihua">你的菜单名称</span>

以下代码放入css样式

CSS样式添加至主题根目录的style.css或外观-自定义-额外CSS

.meihua {
background: linear-gradient(90deg, rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 33.3%, rgba(252, 176, 69, 1) 66.6%, rgba(131, 58, 180, 1) 100%);
-webkit-background-clip: text;
color: transparent !important;
background-size: 300% 100%;
animation: text 4s infinite linear
}
@media (max-width:768px) {
span.ua-info {
display: none
}
.comment-author .user-title {
width: 40% !important
}
}
.comment-author .user-title {
font-size: 13px;
background: linear-gradient(90deg, rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 33.3%, rgba(252, 176, 69, 1) 66.6%, rgba(131, 58, 180, 1) 100%);
-webkit-background-clip: text;
color: transparent !important;
background-size: 300% 100%;
animation: text 4s infinite linear
}
@keyframes text {
0% {
background-position: 0 0
}
100% {
background-position: -150% 0
}
}
.b2-qr-code-fill {
background: linear-gradient(90deg, rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 33.3%, rgba(252, 176, 69, 1) 66.6%, rgba(131, 58, 180, 1) 100%);
-webkit-background-clip: text;
color: transparent !important;
background-size: 300% 100%;
animation: text 4s infinite linear
}

文章加载更多BUTTON美化

CSS代码：

颜色可自定义

CSS样式添加至主题根目录的style.css或外观-自定义-额外CSS

.post-list .load-more .post-load-button:hover {
    transform: translateY(-3px);
}
.post-list .load-more .post-load-button {
    width: auto;
    border: 0;
    transition: all .3s;
    padding: 12px 40px;
    font-size: 15px;
    letter-spacing: .5px;
    background-color: var(--primary-color);
    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%);
    color: #fff!important;
}

7b2主题打赏按钮自定义颜色

css代码：

CSS样式添加至主题根目录的style.css或外观-自定义-额外CSS

#TA-con{/*修改按钮颜色*/
    background-color: #3478F7;
}
#TA-con:hover {/*修改按钮颜色——鼠标移动至按钮*/
    background-color: #3478F7;
}
#orange-mask path{/*修改动态的条颜色*/
    stroke: #f7ed34;
}
#mask path{/*修改条颜色 —— 长条*/
    stroke: rgb(52 120 247);
}
#mask ellipse{/*修改条颜色 —— 点*/
    fill: rgb(52 120 247);
}
#mask rect{/*修改条颜色 —— 短条*/
    fill: rgb(52 120 247);
}

文章底部增加声明

将html代码放入B2主题设置->模块管理 ->文章内页 ->文章低部广告位代码

html代码：

<fieldset style="border: 1px dashed #e8b235; padding: 10px; border-radius: 5px; line-height: 2em; font-size: 12px; color: #bdbdbd; text-align: center">
<legend style="color: #ffffff; width: 30%; text-align: center; background-color: #e8b235; border-radius: 5px;" align="center">声明</legend> 本站上的部份代码及教程来源于互联网，仅供网友学习交流，若您喜欢本文可<b>附上原文链接</b>随意转载。无意侵害您的权益，请发送邮件至 <a href="mailto:邮箱地址">邮箱地址</a> 或点击右侧 <i class="b2font b2-mail-send-line"></i> 私信：鹿泽笔记 反馈，我们将尽快处理。
</fieldset>

广告位

主题设置-首页-添加模块-调用内容：自定义

<div class="n_banner_inner">
  <div class="img-info">!
    <div class="info">也想出现在这里？
      <a rel="nofollow noopener noreferrer" href="转跳Url" target="_blank">联系我们</a>吧</div>
  </div>
  <a href="前往Url" target="_blank" rel="noopener noreferrer">
    <div class="Banner-adTag">广告</div>
    <img class="tirr" src="图片Url" alt="信息">
  </a>
</div>
<style>
    /*定位*/
    .n_banner_inner {
        position: relative;
    }

    /*提示信息*/
    .n_banner_inner .img-info {
        position: absolute;
        right: 12px;
        top: 9px;
        padding: 0;
        text-align: right;
        color: #fff;
    }

    .n_banner_inner .img-info i {
        position: relative;
        display: inline-block;
        color: #007bff;
        font-size: 20px;
        line-height: 19px;
        text-align: center;
        z-index: 9;
        font-style: inherit;
    }

    .n_banner_inner .img-info .info {
        position: absolute;
        bottom: 5px;
        right: 0;
        width: 0;
        padding: 5px 0;
        overflow: hidden;
        background: #007bff;
        border-radius: 10px;
        line-height: 10px;
        text-align: center;
        font-size: 10px;
        color: #fff;
        white-space: nowrap;

        -webkit-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important;
        -moz-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important;
        -ms-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important;
        -o-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important;
        transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important;
    }

    .n_banner_inner .img-info .info a {
        color: #fff;
    }

    .n_banner_inner .tirr {
        max-width: 100%;
        height: auto;
        transition: 0.5s;
        border-radius: 5px;
    }

    /*触发Hover*/
    .n_banner_inner:hover .info {
        width: auto;
        padding: 5px 23px 5px 12px;
        -webkit-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important;
        -moz-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important;
        -ms-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important;
        -o-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important;
        transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important;
        font-size: 12px;
        z-index: 1;
    }

    .n_banner_inner img:hover {
        filter: brightness(50%);
    }

    /*出发声明hover*/
    .n_banner_inner .info:hover a {
        color: red;
        text-decoration: none;
    }

    /*左下角广告*/
    .n_banner_inner .Banner-adTag {
        position: absolute;
        left: 5px;
        bottom: 5px;
        width: 50px;
        border: 1px solid #ebebeb;
        border-radius: 3px;
        color: #ebebeb;
        opacity: 0.5;
        font-size: 12px;
        line-height: 20px;
        text-align: center;
    }

    @media screen and (max-width: 768px) {
        .n_banner_inner .img-info {
            display: none;
        }
    }
</style>

手机左侧菜单

CSS样式添加至主题根目录的style.css或外观-自定义-额外CSS

@media screen and (max-width: 768px){
.logo-left .mobile-box {
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url();/*背景图片*/
    opacity: 0.95!important;
    width: 80%!important;/*宽度*/
}

.top-menu ul li.depth-0 > a, .logo-top .top-menu ul li.depth-0 > a {
    background: #9a9a9a26!important;
    border-radius: 12px;
}

.sub-menu {
    background: #ffffff00;
    backdrop-filter: blur(0px);
}

.top-menu-ul>li.depth-0 > a i.b2-arrow-down-s-line {
    background: #ffffff00;
}

.header-tools {
    background: none!important;
    background-image: none!important;
}

}

PC区块菜单

主题设置-首页-添加模块-调用内容：自定义

<div class="home-section-division header_fixed_from_here">
  <div class="containers">
    <div class="home-division">
    <ul>
      <li><div class="item item_3"><a href="#">
      <div class="item-thumb"><i class="b2font b2-landscape-line"></i> </div>
      <h3>菜单<span class="go">go<i class="ico-go"></i></span> </h3>
      <p>正版原创设计作品集</p>
      </a></div></li>
      <li><div class="item item_1"><a href="/vips">
      <div class="item-thumb"><i class="b2font b2-profile-fill"></i> </div>
      <h3>VIP会员<span class="go">go<i class="ico-go"></i></span></h3>
      <p>高级资源抢先使用</p>
      </a></div></li>
      <li><div class="item item_2"><a href="#">
      <div class="item-thumb"><i class="b2font b2-bar-chart-fill"></i> </div>
      <h3>菜单<span class="go">go<i class="ico-go"></i></span></h3>
      <p>玩转潮流，体验快乐</p>
      </a></div></li>
      <li class="li_4"><div class="item item_4"><a href="#">
        <div class="item-thumb"><i class="b2font b2-heart-pulse-line"></i> </div>
      <h3>菜单<span class="go">go<i class="ico-go"></i></span></h3>
      <p>品牌聚集地</p>
      </a></div></li>
    </ul>
    </div>
  </div>
  </div>

CSS样式添加至主题根目录的style.css或外观-自定义-额外CSS

.item-thumb i{
    font-size: 50px;
}
    
.home-section-division {
    background: #fff;
}

.containers {
    width: 100%;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    zoom: 1;
}

@media (min-width: 768px) {
   .containers {
      overflow: visible;
    max-width: 1280px;
    }
}
.home-section-division .home-division {
    overflow: hidden;
}

.home-section-division .home-division a {
    color: #005aff;
    display: block;
    padding: 20px 0 10px;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    text-align: center
}

@media (min-width:768px) {
    .home-section-division .home-division a {
        text-align: left;
        padding: 22px 10px 30px 50px
    }

}

@media (min-width:1330px) {
    .home-section-division .home-division a {
        /*padding-right: 60px;*/
        padding-left: 106px
    }
     
}

.home-section-division .home-division a:hover .item-thumb {
    color: #3385ff
}

.home-section-division .home-division a:hover .icon-inspiration-nav-1:before {
    content: "\e82c"
}

.home-section-division .home-division a:hover .icon-tool-nav-1:before {
    content: "\e82a"
}

.home-section-division .home-division a:hover .icon-course-nav-1:before {
    content: "\e82e"
}

.home-section-division .home-division ul {
    margin: 0 -14px;
    overflow: hidden
}

.home-section-division .home-division li {
    float: left;
    line-height: 1;
    width: 25%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 0px 0 4px;
}

.home-section-division .home-division li h3 {
    font-size: 13px;
    line-height: 1;
    margin: 10px 0;
    color: #005aff;
    font-weight: 400
}

@media (min-width:768px) {
    .home-section-division .home-division li h3 {
        font-size: 18px;
        font-weight: 700
    }
}

.home-section-division .home-division li h3 .go {
    background: #3385ff;
    display: none;
    height: 20px;
    line-height: 20px;
    padding: 0px 0px 3px 8px;
    -webkit-border-radius: 14px;
    border-radius: 14px;
    color: #fff;
    font-weight: 400;
    font-size: 12px;
    text-transform: uppercase;
    vertical-align: top
}

@media (min-width:1024px) {
    .home-section-division .home-division li h3 .go {
        display: inline-block
    }
}

.home-section-division .home-division li h3 .go i {
    vertical-align: middle;
    margin: -2px 3px 0
}

.home-section-division .home-division li p {
    font-size: 13px;
    color: #9a9a9a;
    display: none
}

@media (min-width:1024px) {
    .home-section-division .home-division li p {
        display: block
    }
}

.home-section-division .home-division li .item-thumb {
    font-size: 28px
}

@media (max-width:1023px) {
    .home-section-division .home-division li .item-thumb {
        color: #3385ff
    }
}

@media (min-width:768px) {
    .home-section-division .home-division li .item-thumb {
        position: absolute;
        left: 5px;
        top: 20px;
        font-size: 40px
    }
}

@media (min-width:1330px) {
    .home-section-division .home-division li .item-thumb {
        top: 30px;
        left: 50px
    }
}

@media (min-width:1024px) {
    .home-section-division .home-division li.li_4 .item {
/*        background: #f3f8ff;*/
        -webkit-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s;
        color: #3385ff
    }

    .home-section-division .home-division li.li_4 .item .item-thumb,.home-section-division .home-division li.li_4 .item h3 {
        color: #3385ff
    }

    .home-section-division .home-division li.li_4 .item:hover {
        background: #3385ff;
        -webkit-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s;
        color: #fff
    }

    .home-section-division .home-division li.li_4 .item:hover h3,.home-section-division .home-division li.li_4 .item:hover i,.home-section-division .home-division li.li_4 .item:hover p {
        color: #fff
    }
    
    
    .home-section-division .home-division li .item {
/*        background: #f3f8ff;*/
        -webkit-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s;
        color: #3385ff
    }

    .home-section-division .home-division li .item .item-thumb,.home-section-division .home-division li .item h3 {
        color: #3385ff
    }

    .home-section-division .home-division li .item:hover {
        background: #3385ff;
        -webkit-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s;
        color: #fff
    }

    .home-section-division .home-division li .item:hover h3,.home-section-division .home-division li .item:hover i,.home-section-division .home-division li .item:hover p {
        color: #fff
    }
}

首页菜单（手机版）

主题设置-首页-添加模块-调用内容：自定义

<div class="mrxu_link">
  <dl>
    <dd class="xu_link_1"><a href="#"><i></i>
        <p>海报</p>
      </a></dd>
    <dd class="xu_link_2"><a href="#"><i></i>
        <p>插画</p>
      </a></dd>
    <dd class="xu_link_3"><a href="#"><i></i>
        <p>电商</p>
      </a></dd>
    <dd class="xu_link_4"><a href="#"><i></i>
        <p>品牌</p>
      </a></dd>
    <dd class="xu_link_5"><a href="#"><i></i>
        <p>logo</p>
      </a></dd>
    <dd class="xu_link_6"><a href="#"><i></i>
        <p>包装</p>
      </a></dd>
    <dd class="xu_link_7"><a href="#"><i></i>
        <p>视频</p>
      </a></dd>
    <dd class="xu_link_8"><a href="#"><i></i>
        <p>画册</p>
      </a></dd>
    <dd class="xu_link_9"><a href="#"><i></i>
        <p>ip</p>
      </a></dd>
    <dd class="xu_link_10"><a href="#"><i></i>
        <p>全部</p>
      </a></dd>
  </dl>
</div>

CSS样式添加至主题根目录的style.css或外观-自定义-额外CSS

   .mrxu_link {
     border-radius: 17px;
     box-shadow: 1px 0px 7px #94cbfb66;
      padding: 5px;
    }
    .mrxu_lin1k dl {
      box-shadow: 1px 1px 1px #e7f4ff;
      border-radius: 12px;
      background-color: #fff;
      margin-top: 10px;
      margin-bottom: 10px;
     border-radius: 17px;
    }
    .mrxu_link dl dd {
      display: inline-block;
      width: 18.5%;
      margin-bottom: 6px;
      margin-top: 6px;
    }
    .mrxu_link dl dd a {
      display: block;
    }
    .mrxu_link dl dd a i {
      display: block;
      width: 45px;
      height: 45px;
      margin: 0 auto 5px;
    }
    .mrxu_link dl dd a p {
      height: 20px;
      line-height: 20px;
      font-size: 12px;
      color: #666;
      text-align: center;
      overflow: hidden;
    }
    .mrxu_link dl dd.xu_link_1 i {
      background: url(image/10019.png) center no-repeat;
      background-size: 45px;
    }
    .mrxu_link dl dd.xu_link_2 i {
      background: url(image/100255.png) center no-repeat;
      background-size: 45px;
    }
    .mrxu_link dl dd.xu_link_3 i {
      background: url(image/10028.png) center no-repeat;
      background-size: 45px;
    }
    .mrxu_link dl dd.xu_link_4 i {
      background: url(image/10018.png) center no-repeat;
      background-size: 45px;
    }
    .mrxu_link dl dd.xu_link_5 i {
      background: url(image/10022.png) center no-repeat;
      background-size: 45px;
    }
    .mrxu_link dl dd.xu_link_6 i {
      background: url(image/10021.png) center no-repeat;
      background-size: 45px;
    }
    .mrxu_link dl dd.xu_link_7 i {
      background: url(image/10025.png) center no-repeat;
      background-size: 45px;
    }
    .mrxu_link dl dd.xu_link_8 i {
      background: url(image/zx.png) center no-repeat;
      background-size: 45px;
    }
    .mrxu_link dl dd.xu_link_9 i {
      background: url(image/10018.png) center no-repeat;
      background-size: 45px;
    }
    .mrxu_link dl dd.xu_link_10 i {
      background: url(image/10020.png) center no-repeat;
      background-size: 45px;
    }
.justify a img{
        float: left;
}
.load-more.box-in.box.b2-radius.mg-t {
    background: none;
}
.post-list .load-more .post-load-button {
    width: auto;
    border: 0;
    transition: all .3s;
    padding: 12px 40px;
    font-size: 15px;
    letter-spacing: .5px;
    background-color: var(--primary-color);
    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 rgba(16, 110, 253, .3);
    box-shadow: 0 5px 10px 0 rgba(16, 110, 253, .3);
    color: #fff!important;
}

.mrxu_link a {
    color: inherit;
    text-decoration: none;
    vertical-align: top;
}

修改文章的随机阅读数量

打开b2/Modules/Common/Post.php文件的第553行上方加入下方代码：

$viewa = rand(4000,8000);

代码意思是：随机在4000-8000里面输出一个数（例如：5653），最低4000，最高8000，这个最低和最高自定义。

首页搜索模块

主题设置-首页-添加模块-调用内容：自定义

<div class="page-section-content">
  <div class="page-section-background">
  </div>
  <div class="n-box">
    <div class="n-text">
      <h1 class="index-title">
        <!--标题--> 搜索标题
      </h1>
      <h2 class="index-subtitle">
        <!--副标题--> //搜索一下会有你想要的 //
      </h2>
    </div>
    <div class="n-search">
      <form method="get" id="searchform">
        <div class="container">
          <div id="searchs">
            <input type="text" placeholder="搜索是提高效率的开始" name="s" id="s" class="searchInput" autocomplete="off">
            <input class="n-button" type="submit" value="搜索">
          </div>
        </div>
      </form>
    </div>
    <div class="remensousuo">
      <div class="sousuocenter">
        <span>热门搜索：</span>
        <ul>
          <li><a href="#" class="shejipsd">我是菜单</a></li>
          <li><a href="#" class="shejixd">我是菜单</a></li>
          <li><a href="#" class="shejifigma">我是菜单</a></li>
          <li><a href="#" class="shejisketch">我是菜单</a></li>
          <li><a href="#" class="shejisketch">我是菜单</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

样式CSS代码放入主题目录的style.css或外观-自定义-额外CSS

.page-section-content {
    height: 366px;
    margin: -80px 0px 0px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.page-section-content {
    /* background-color: #fcfcfc; */
    background-image: url(图片url链接地址);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    /* background-attachment: fixed; */
    color: #fff;
}

.page-section-background {
    height: 250px;
    left: 0;
    position: absolute;
    right: 0;
    z-index: 1;
    background-color: inherit;
    background-size: 480px;
    background-blend-mode: overlay;
}


.n-box {
    padding: 20px;
    position: absolute;
    z-index: 1;
}
.n-text {
    text-align: center;
}
.n-text .index-title {
    font-size: 36px;
}
.n-text .index-subtitle {
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 24px;
    text-align: center;
}

.n-search {
    text-align: center;
}

.container {
    margin: 30px auto -37px auto;
    width: 900px;
    text-align: center;
    position: relative;
}

.container:after, .container:before {
    content: "";
    height: 0;
    line-height: 0;
    display: block;
    visibility: none;
    clear: both;
}

.container:after, .container:before {
    content: "";
    height: 0;
    line-height: 0;
    display: block;
    visibility: none;
    clear: both;
}

#searchs input[type="text"] {
    overflow: hidden;
    margin: 0 auto;
    padding-left: 19px;
    width: 600px;
    height: 48px;
    border: 1px solid #ffffff14;
    border-radius: 4px;
    background: #ffffff38;
    box-shadow: none;
    color: #fff;
    font-size: 14px;
    line-height: 32px;
    font-family: Avenir, -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
}
.n-box input[type="text"], .n-box input[type="password"] {
    font-size: 13px;
    min-height: 32px;
    margin: 0;
    padding: 7px 8px;
    outline: none;
    color: #333;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: right center;
    border: 1px solid #ccc;
    border-radius: 3px;
    box-shadow: inset 0 1px 2px rgb(0 0 0 / 8%);
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    transition: all 0.15s ease-in;
    -webkit-transition: all 0.15s ease-in 0;
    vertical-align: middle;
}

.n-button {
    position: relative;
    top: 2px;
    right: -6px;
    /* display: block; */
    width: 120px;
    height: 48px;
    border: 1px solid #ffffff14;
    border-radius: 5px;
    background: #504bcc;
    cursor: pointer;
    font-size: 16px;
    color: #fff;
    font-family: Avenir, -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
}

.remensousuo {
    display: flex;
    margin: 0 auto;
    padding-top: 30px;
    height: 80px;
    color: #fff;
    font-size: 14px;
}
.remensousuo .sousuocenter {
    position: relative;
    display: inline-block;
    margin: 0 auto;
    padding: 0 60px;
    height: 40px;
    border-radius: 73px;
    background: none;
    vertical-align: middle;
    text-align: center;
    line-height: 70px;
}

.remensousuo span {
    position: relative;
    top: 1px;
    float: left;
    color: #ffffff;
}

.remensousuo ul {
    float: left;
    margin: 0 auto;
}

.remensousuo li {
    float: left;
    margin-right: 20px;
}

.remensousuo li a {
    float: left;
    padding: 0px 9px;
    color: #ffffff;
}

@media (min-width: 768px){
.container {
    overflow: visible;
    max-width: 1280px;
}
}

B2隐藏文章底部的上下篇元素

将以下代码复制到b2子主题的style.css中，等一会强制刷新即可

.post-pre-next {
    display: none;
}

b2主题手机版底部菜单圆角美化

将以下代码放入CSS样式，强制刷新即可

/*手机底部美化*/
 @media screen and (max-width:768px) {
	.mobile-footer-menu.footer-fixed {
		border-radius: 50px;
		margin: 0 auto;
		left: 0;
		right: 0;
		width: 95%;
		bottom: 10px !important;
		box-shadow: 0px 3px 5px 5px rgb(16 16 16/10%)
	}
	.mobile-footer-menu .mobile-footer-center button i {
		right: -30%;
		position: absolute;
		line-height: 40px !important;
		height: 40px !important;
		border-radius: 50% !important;
		margin-top: -36px
	}
	.mobile-footer-menu.footer-down {
		transform: translate(0, 140%) !important
	}
}
/*美化结束*/

b2主题文章内插入B站自适应视频

将以下代码放入footer.php顶部

<script type="text/javascript"> 
if(document.getElementById("wailianvideo")){
document.getElementById("wailianvideo").style.height=document.getElementById("wailianvideo").scrollWidth*0.64+"px";
}
</script> 
<style>
@media screen and (max-width: 768px){
.entry-content iframe {
    height: 250px !important;
  }
}
</style>

然后在B站获取视频的aid

找到视频-分享-嵌入代码

会获取到如下文本

<iframe src="//b站链接/player.html?aid=数字&bvid=BV1fU4y1e7HJ&cid=数字号码3&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

其中aid=xxxxx(数字)就是视频的aid，将其复制进以下代码的相应位置

<iframe id="mcvideo" src="//player.bilibili.com/player.html?aid=获取的aid放在此处&page=1&high_quality=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" width=100%> </iframe>

在古腾堡编辑器中选择“自定义html”放入代码即可

添加logo闪动

将以下代码放入style.css

/*Logo添加闪光效果*/
    .logo {
        position: relative;
        font-size:2em;
        font-weight:700;
        line-height:39px;
        overflow:hidden;
        margin:0;
    }
    .logo::before {
        content:"";
        position: absolute;
        width: 150px;
        height: 10px;
        background-color: rgba(255, 255, 255, .5);
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        -webkit-animation: searchLights 1.5s ease-in 1.5s infinite;
        animation: searchLights 1.5s ease-in 1.5s infinite;
    }
    @-webkit-keyframes searchLights {
        0% {
            left: -90px;
            top: 0;
        }
        to {
            left: 90px;
            top: 0;
        }
    }
    /*代码结束*/

个人中心美化

放入以下代码进style.css

/*个人中心*/
.author .author-header {
    margin-top: -20px;
}
.user-panel {
    display: block;
}
.user-panel .avatar {
    margin: 0 auto;
    border-radius: 50%;
}
.user-panel-info {
    text-align: center;
    padding-top: 20px;
    padding-left: 0px;
}
.user-panel-info div{
    margin: 0 auto;
}
.user-panel-info p {
    background: rgba(0,0,0,0);
    margin-right: auto!important;
}
.mask-wrapper {
    height: 270px;
    line-height: 1;
    margin: 0 auto;
    padding: 0;
}
.editor-avatar {
    display: flex;
    align-items: center;
    flex-flow: column;
    height: 100%;
    position: absolute;
    width: 100%;
    justify-content: center;
    background: rgba(41,44,47,.4);
    color: #fff;
    font-size: 20px;
    opacity: 0;
    visibility: hidden;
    cursor: pointer;
    border-radius: 75px;
}
.user-cover-button {
    position: absolute;
    top: 30px;
    right: 20px;
}
.user-panel-info h1 span {
    margin-right: 0;
}
@media screen and (max-width: 768px){
.mask-wrapper {
    height: 150px;
}
.user-panel .avatar {
    width: 100px;
    height: 100px;
    max-width: 100px;
    min-width: 100px;
    cursor: pointer;
    border: 5px solid #ffffff;
    position: relative;
    z-index: 4;
}
}
.vip-current {
    border: initial;
}
.entry-content p > a:hover {
    text-decoration: none!important;
}
/*个人中心结束*/

文章底添加版权声明

代码放入后台-模块管理-文章内页-文章低部广告位代码，也可以单独给需要的文章设置

<fieldset style="border: 8px dashed; background: #ffffff; padding: 10px; border-radius: 5px; line-height: 1.5em; color: #595959;" data-mce-style="border: 2px dashed; background: #ffffff; padding: 10px; border-radius: 5px; line-height: 1.5em; color: #595959;">
    <legend style="color: #ffffff; width: 30%; text-align: center; background-color: #e8b235; border-radius: 5px;" align="center" data-mce-style="color: #ffffff; width: 30%; text-align: center; background-color: #e8b235; border-radius: 8px;">重要声明</legend>
    <fieldset style="border: 1px dashed #e8b235; padding: 10px; border-radius: 5px; line-height: 2em; font-size: 12px; color: #bdbdbd; text-align: center;" data-mce-style="border: 1px dashed #e8b235; padding: 10px; border-radius: 5px; line-height: 2em; font-size: 12px; color: #bdbdbd; text-align: center;">
        <p style="font-size: 12px; text-align: center;" data-mce-style="font-size: 12px; text-align: center;"><span style="color: #000000;" data-mce-style="color: #000000;">本站资源大多来自网络，如有侵犯你的权益请联系管理员，</span><span style="color: #000000;" data-mce-style="color: #000000;">我们会第一时间进行审核删除。站内资源为网友个人学习或测试研究使用，未经原版权作者许可,禁止用于任何商业途径！请在下载24小时内删除！</span></p>
        <hr>
        <p style="font-size: 12px; text-align: center;" data-mce-style="font-size: 12px; text-align: center;"><span style="color: #000000;" data-mce-style="color: #000000;">如果遇到</span><span style="color: #ff0000;" data-mce-style="color: #ff0000;">付费</span><span style="color: #000000;" data-mce-style="color: #000000;">才可</span><span style="color: #33cccc;" data-mce-style="color: #33cccc;">观看</span><span style="color: #000000;" data-mce-style="color: #000000;">的文章，建议升级</span><span style="color: #ff0000;" data-mce-style="color: #ff0000;">会员或者成为认证用户。</span><span style="color: #000000;" data-mce-style="color: #000000;">全站所有资源</span><span style="color: #ff0000;" data-mce-style="color: #ff0000;">“<span style="color: #3366ff;" data-mce-style="color: #3366ff;">任意下免费看</span>”。</span><span style="color: #ff9900;" data-mce-style="color: #ff9900;">本站资源少部分采用</span><span style="color: #00ccff;" data-mce-style="color: #00ccff;">7z压缩，</span><span style="color: #33cccc;" data-mce-style="color: #33cccc;">为防止有人压缩软件不支持7z格式</span><span style="color: #cc99ff;" data-mce-style="color: #cc99ff;">，7z</span><span style="color: #000000;" data-mce-style="color: #000000;">解压，建议下载</span><span style="color: #cc99ff;" data-mce-style="color: #cc99ff;"><em>7-zip</em></span><span style="color: #cc99ff;" data-mce-style="color: #cc99ff;">，zip、rar</span><span style="color: #000000;" data-mce-style="color: #000000;">解压，建议下载</span><span style="color: #cc99ff;" data-mce-style="color: #cc99ff;"><em>WinRAR</em></span><span style="color: #000000;" data-mce-style="color: #000000;">。</span></p>
    </fieldset>
</fieldset>

文章顶部“新春/活动倒计时模块

将以下代码全部复制到想展示的位置即可，一般主题自带的顶部广告位

		<div class="card" style="background: url(图片URL地址) no-repeat; background-size: cover;"><br>
		<center><b> <h4><p><span style="color: #ffffff;">2022年-新春倒计时</span></p></h4></b></center>
		<div class="gn_box">
		<center>
		<div id="CountMsg" class="HotDate text-light">
		<span style="color: #ffffff;"><span id="t_d">157 天</span>
		<span id="t_h">9 时</span>
		<span id="t_m">7 分</span>
		<span id="t_s">42 秒</span></span>
		</div><br>
		</center><br>
		<script type="text/javascript"> function getRTime() {
		var EndTime = new Date('2022/02/01 00:00:00');
		var NowTime = new Date();
		var t = EndTime.getTime() - NowTime.getTime();
		var d = Math.floor(t / 1000 / 60 / 60 / 24);
		var h = Math.floor(t / 1000 / 60 / 60 % 24);
		var m = Math.floor(t / 1000 / 60 % 60);
		var s = Math.floor(t / 1000 % 60);
		document.getElementById("t_d").innerHTML = d + " 天";
		document.getElementById("t_h").innerHTML = h + " 时";
		document.getElementById("t_m").innerHTML = m + " 分";
		document.getElementById("t_s").innerHTML = s + " 秒";
		}
		setInterval(getRTime, 1000);
		</script>
		</div>
		</div><style>
		.copyright {
		margin-top: 10px;
		padding: 10px;
		background: #5f9ea0;
		border-radius: 5px;
		color : #f0ffff;
		}
		.copyright .copyright-title {
		padding: 5px;
		text-align: center;
		}
		.copyright .copyright-title h3 {
		font-size: 18px;
		}
		.copyright .copyright-text {
		font-size: 15px;
		line-height: 25px;
		}
		.copyright .copyright-url {
		margin: 5px 0;
		}
		</style>

👋 感谢您的观看！

版权声明 1、文章版权归作者所有，未经允许请勿转载。
2、本站所有文章，如无特殊说明或标注，均为本站原创发布。任何在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们邮箱：526009505@qq.com进行处理。
3、咨询请联系QQ：526009505

THE END

产品项目
# WordPress

弹窗公告美化

导航菜单添加彩色渐变的文字

文章加载更多BUTTON美化

7b2主题打赏按钮自定义颜色

文章底部增加声明

广告位

手机左侧菜单

PC区块菜单

首页菜单（手机版）

修改文章的随机阅读数量

首页搜索模块

B2隐藏文章底部的上下篇元素

b2主题手机版底部菜单圆角美化

b2主题文章内插入B站自适应视频

添加logo闪动

个人中心美化

文章底添加版权声明

文章顶部“新春/活动倒计时模块

DuckDuckGo搜索引擎使用方法

网站出现403 Forbidden错误原因以及解决方法

欢迎关注[鹿泽笔记]微信公众号

深圳SEO优化技术如何对网站进行调整

seo网页排名下降的原因是什么？

电脑显示器尺寸汇总，显示器屏幕大小一览表

小红书营销策略流量分发逻辑（CES评分流量分发模型）解析

优良中差五个等级是怎么分的？

自媒体平台图片尺寸汇总

1688关键词优化四大步骤，1688怎么优化产品排名？