WordPressB2主题美化之登陆弹窗

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

效果图

WordPressB2主题美化之登陆弹窗

美化教程

1.放置js代码

  • 有子主题就放在child.js文件中
$(function(){
/*弹窗登录效果-www.xiaohuli.vip*/
$("#login-box .login-box-content").addClass("b2-radius");
$('.login-box-content').prepend(''+
''+
''+
'懒人资源网-www.lrzy8.com'+
'❤ 日常办公、行业软件完备全套'+
'❤ 影视动漫、学习教程应有尽有'+
'❤ 通通高速网盘分享、拒绝百度云盘'+
''+
''+
''
);
})

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

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

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

wp_enqueue_script( 'b2-jquery','https://img.ahap.cn/file/ahap/jquery.min.js', array(), null , false );

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

3.css样式代码:

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

/*登陆弹窗美化-www.xiaohulizyw.cn*/
.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.xiaohulizyw.cn/wp-content/uploads/2021/12/dl.webp);
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%;
}
}

 

温馨提示:本站提供的一切软件、教程和内容信息都来自网络收集整理,仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负,版权争议与本站无关。用户必须在下载后的24个小时之内,从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序和内容,请支持正版,购买注册,得到更好的正版服务。我们非常重视版权问题,如有侵权请邮件【 lrzy8@qq.com 】与我们联系处理。敬请谅解!

给TA打赏
共{{data.count}}人
人已打赏
杂七杂八

中药大全(海量中医知识-针对男科妇科有奇效)

2025-7-28 20:30:33

Wordpress

WordPress网站B2主题用户等级、圈子用户等级美化

2025-7-28 21:19:28

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
购物车
优惠劵
今日签到
有新私信 私信列表
搜索