Npcink Blog
切换菜单

弹窗登录框美化 - B2 美化

一个模仿优优教程网的登录框美化内容， B2 的默认登录框已经不错了，如果能再弄的好看一点，锦上添花，也不错

最后更新于
本页目录3 节

这是一个模仿优优教程网的登录框美化内容， B2 的默认登录框已经不错了，如果能再弄的好看一点，锦上添花，也不错。

主要参考了秋叶资源的代码并进行了一些改进，例如：

  • 适配移动端隐藏
  • 添加代码注释
  • 修复文本错误
  • 修复位置错误（新）
  • 代码精简
  • 结构优化
  • ……

火狐浏览器、QQ 浏览器、Safari 浏览器下有严重兼容问题，不推荐使用

效果如下：

登录框美化后的效果

如何使用？

纯 CSS 实现，只需要在您主题的 style.css 文件(推荐子主题)下添加以下 CSS 代码保存即可。可按照自己的需要进行相关资源的适配。

/*
 * 登录弹窗美化 - Npcink
 * 版本：1.2
 */
.login-box-content:before{
  content: "Npcink提供：";/*自定义标题*/
  position: absolute;
  padding: 50px 30px;
  font-size: 1.4em;
  width: 25rem;
    height:77%;/*自定义高度，兼容火狐浏览器*/
  height: -webkit-fill-available;
  left: -24rem;
  background-color: #3385ff;/*自定义背景颜色*/
  background-image: url(https://n.getimg.net/www/2020/05/1e1c8e5415e795.png);/*自定义背景图片*/
  background-position: 145px bottom;
  background-repeat: no-repeat;
  border-radius: 10px 0 0 10px;
  z-index: -1;
  color: #fff;
}
.login-title:before,.login-title:after,.login-title span:before,.login-title span:after {
  position: absolute;
  left: 0;
  margin-left: -20rem;
  color:#fff;/*文本颜色*/
}
.login-title:before {content: "❤ 全站1000+个精品资源";margin-top: 2em;}
.login-title:after {content: "❤  持续更新，免费素材不断更";margin-top: 4em;}
.login-title span:before {content: "❤让设计师不再愁资源";margin-top: 5.2em;}
.login-title span:after {content: "❤ 社群交流，结识志同道合设计好友";margin-top: 7.2em;}
.login-box-content {width: 25rem;left: 12.5rem;overflow: inherit;}
.login-box-content .login-box-top {padding: 50px 30px 30px;border-radius: 10px;}
.login-box-content .login-box-top {background-image: none;}


@media (max-width: 800px) {
  .login-box-content:before{
    display:none;
  }
  .login-title:before,
  .login-title:after,
  .login-title span:before,
  .login-title span:after {
    display:none;
  }
  .modal-content {
    width: 21rem;
    left: auto;
  }
}

图片：

PNG

代码版：

盾给社区版（兼容性好）

第一步，引入 jquery 文件。

b2 子主题，可在原来 function.php 文件底部引入下方添加如下代码：

//引入jquery
wp_enqueue_script( 'b2-jquery','//cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js', array(), null , false );

经典编辑器有关，，一旦引用上面这个 JS 可能会出现，插入网盘链接消失，插入 URL 图片链接报错。

一位群员

或者可以后台头部 HTML 标签设置的地方引入 js

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script>

第二步，子主题 child.js 文件内增加以下代码：

//您自己的js代码写到下面


$(function(){


/*追加登录弹窗效果*/


    $('.login-box-content').prepend('<div class="dungei_com_login">'+
      '<div class="wxlogin-sidebar">'+
      '<h2>在盾给网你可以获得</h2>'+
      '<ul>'+
      '<li><i class="ri-checkbox-circle-fill"></i> 全站精品资源 </li>'+
      '<li><i class="ri-checkbox-circle-fill"></i> 持续更新，免费资源不断更 </li>'+
      '<li><i class="ri-checkbox-circle-fill"></i>让站长不在愁资源</li>'+
      '<li><i class="ri-checkbox-circle-fill"></i> 社群交流，结识志同道合站长好友 </li>'+
      '</ul>'+
      '</div>'+
      '</div>');
})

第三步，子主题 css 文件增加以下代码：

/*登录弹窗样式*/


@media (min-width: 768px){
    .login-box-content{background:#fff}
    .login-box-content{
            background: #4387fd;
        background-image: url(https://dungei.oss-cn-beijing.aliyuncs.com/wp-content/uploads/2020/04/1e1c8e5415e795.png);
        background-position: 145px bottom;
        background-repeat: no-repeat;}
    .dungei_com_login {width: 400px;
        height:auto;


        float: left;
       }
    .login-box-content .login-box-top{    width: 400px;
        float: left;background: #fff;}


     .modal-content{width:800px}
    .dungei_com_login {width: 400px;
        height:auto;


        float: left;
       }
    .login-box-content .login-box-top{    width: 400px;
        float: left;background: #fff;}


     .modal-content{width:800px}
    .dungei_com_login .wxlogin-sidebar{
         padding: 50px 50px 0;}


    .dungei_com_login .wxlogin-sidebar h2 {
        font-size: 22px;
        margin-bottom: 30px;
        color:#fff;
    }
    .dungei_com_login .wxlogin-sidebar ul li{
         display: block;
        margin-bottom: 10px;
        font-size: 15px;
        color:#fff;
    }


    p.module-desc {
        border-left: 0px solid #fb5f3c;
        padding-left: 0px;
    }
    .dungei_com_login .wxlogin-sidebar ul li i{
        margin-right: 10px;
        opacity: .52;
        position: relative;
        top:2px;
    }
    .login-title span{padding:10px 10px;font-size:16px;color:#252525;}
    .login-title span b{color:#252525;}
    .login-box-content .login-box-top{padding:36px 24px}
    .header .ri-medal-line{    color: #ffd2ab;
        font-size: 18px;
        position: relative;
        top: 3px;
        margin-right: 3px;}
    .login-social-button .login-qq {
        color: #ff7a09;
    }
}


@media (max-width: 768px) {
  .dungei_com_login {
  display:none
  }
}
/*登录弹窗样式结束*/