WordPress 7B2主题弹窗登录框美化代码教程

释放双眼,带上耳机,听听看~!

子主题css文件增加以下代码

/*登录弹窗样式*/
@media (min-width: 768px){
 .login-box-content{
 background-image: url(https://img.2binarys.com/2020/08/20200706041055174.png);
 background-position: 146px bottom;
 background-repeat: no-repeat;}
 .modal-content{width:800px}
 .aibk_com_login {width: 400px;
 height:auto;
 float: left;
 }
 .login-box-content .login-box-top{ width: 400px;
 float: left;}
 .aibk_com_login .wxlogin-sidebar{
 padding: 50px 50px 0;}
 .aibk_com_login .wxlogin-sidebar h2 {
 font-size: 22px;
 margin-bottom: 30px;
 color:#fff;
 }
 .aibk_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;
 }
 .aibk_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;}
}
@media (max-width: 768px) {
 .aibk_com_login {
 display:none
 }
}

子主题child.js文件内增加以下代码

  1. $(function(){
  2. /*追加登录弹窗效果*/
  3. $(‘.login-box-content’).prepend(‘<div class=“dungei_com_login”>‘+
  4. <div class=“wxlogin-sidebar”>‘+
  5. <h2>在盾给网你可以获得</h2>‘+
  6. <ul>‘+
  7. <li><i class=“ri-checkbox-circle-fill”></i> 全站精品资源 </li>‘+
  8. <li><i class=“ri-checkbox-circle-fill”></i> 持续更新,免费资源不断更 </li>‘+
  9. <li><i class=“ri-checkbox-circle-fill”></i>让站长不在愁资源</li>‘+
  10. <li><i class=“ri-checkbox-circle-fill”></i> 社群交流,结识志同道合站长好友 </li>‘+
  11. </ul>‘+
  12. </div>‘+
  13. </div>‘);
  14. })

引入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 );

 

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

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

 

为TA充电
共{{data.count}}人
人已赞赏
网站源码

狂雨小说带自动采集规则加俩套模板

2020-10-2 22:50:05

网站源码

彩虹易支付插件后台结算、会员中心秒提现源码下载

2020-10-8 11:55:25

资源下载说明

请使用百度网盘下载资源,请不要在线解压!

1、请记住本站永久网址发布页:http://www.di4.top
2、本站资源大多存储在云盘,如发现链接失效请在下方评论留言,作者看到后会第一时间更新补链。
3、关于解压密码错误或者资源损坏,请查看解压教程:[必看]关于资源教程及常见问题
4、如果有资源想投稿的会员请仔细阅读:投稿指南教程
5、本站大部分资源解压密码均为: di4.top 如密码有误,请查看原帖的资源说明!

2 条回复 A文章作者 M管理员
  1. 赤潮

    感谢大佬分享

评论已经关闭

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索