B2登陆弹窗美化-WordPress美化

适用于WordPress网站7B2主题的登陆弹窗界面美化教程

效果图展示

教程开始

1.放置js代码

  • 有子主题就放在child.js文件中
$(function(){
/*弹窗登录效果*/
$("#login-box .login-box-content").addClass("b2-radius");
$('.login-box-content').prepend('<div class="aibk_com_login">'+
'<div class="wxlogin-sidebar">'+
'<div>'+
'<h3>图酷网-TUKUV.COM</h3>'+
'<p>❤ 专注LOGO设计、版权登记</p>'+
'<p>❤ 设计素材、学习教程应有尽有</p>'+
'<p>❤ 免费字体设计神器实时更新</p>'+
'</div>'+
'</div>'+
'</div>'
);
})

如果没有子主题可以在网站根目录自己建一个dl.js文件,在主题目录footer.php文件中底的 <?php wp_footer() ; ?> 上面填写以下代码即可

<script src="/dl.js"></script>

2.引入jquery

主题根目录functions.php文件中插入下方代码:

wp_enqueue_script( 'b2-jquery','https://www.tukuv.com/jquery.min.js', array(), null , false );

其中jquery.min.js文件可以自己下载到服务器

3.css样式代码:

加入到主题文件目录的style.css中,代码中的图片自行替换我的是375 × 500 像素

/*登陆弹窗美化-www.tukuv.com*/
.login-box-content {
margin-top: 0;
width: auto;
display: flex;
position: relative;
background: #fff;
min-width: 750px;
}
.aibk_com_login {
width: 50%;
position: relative;
background: url(https://www.tukuv.com/wp-content/uploads/2022/01/1641544677-fmtk_画板-1.png);
background-size: cover;
background-position: center 0;
}
.login-box-content .login-box-top {
width: 50%;
padding: 30px 30px 25px;
}
.wxlogin-sidebar {
position: absolute;
bottom: 0;
width: 100%;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.8) 100%);
}
.wxlogin-sidebar h3{
color: #fff;
font-size: 18px;
margin-bottom: 10px;
}
.wxlogin-sidebar p{
color: rgba(255, 255, 255, 0.7);
font-size: 14px;
}
.wxlogin-sidebar>div {
padding: 30px;
}
@media screen and (max-width: 768px){
.aibk_com_login {
display: none;
}
.login-box-content{
min-width: auto;
}
.login-box-content .login-box-top{
width: 100%;
}
}

下载权限

查看
  • 免费下载
    评论并刷新后下载
    登录后下载

查看演示

  • {{attr.name}}:
您当前的等级为
登录后免费下载登录 小黑屋反思中,不准下载! 评论后刷新页面下载评论 支付以后下载 请先登录 您今天的下载次数(次)用完了,请明天再来 支付积分以后下载立即支付 支付以后下载立即支付 您当前的用户组不允许下载升级会员
您已获得下载权限 您可以每天下载资源次,今日剩余
图酷网温馨提示:

1.本站大部分内容均收集于网络!若内容若侵犯到您的权益,请发送邮件至:group@tucool.cn,我们将第一时间处理!

2.素材所需价格并非资源售卖价格,是收集、整理、编辑详情以及本站运营的适当补贴,并且本站不提供任何免费技术支持。

3.所有素材仅限于参考和学习,版权归原作者所有,更多请阅读图酷网络服务协议。

给TA打赏
共{{data.count}}人
人已打赏
精选教程

B2主题添加小图标-WordPress美化

2022-1-5 16:53:54

WordPress精选教程

底部半透明固定区块 - WordPress区块

2022-1-14 18:45:09

⚠️
版权声明:图酷网所提供的文章、教程等内容均为用户发布整理而来,仅供学习参考,。
若您的权利被侵害,请联系站长 QQ: 57143067 或 点击右侧 私信:图酷V 反馈,我们将尽快处理。
17 条回复 A文章作者 M管理员
  1. 优麦兔

    酷酷酷

  2. Earnest

    666

  3. 强子

    这个效果非常不错,稍后给我站也美化下

  4. 九折

    大哥你这不能右键,只能Ctrl+c很影响体验手感啊?

  5. RYAN

    酷酷酷

  6. RYAN

    酷酷酷?

  7. ☀️

    棒!

  8. 初心

    666

  9. 黑渊

    niubi

  10. 风

    ……..

  11. 阿清

    666

  12. 叶萌

    支持一下吧

  13. 3322072

    来看看