本教程参考了94设计的效果,代码参考盾给网,并在原来的基础上进行了优化,网页端效果在移动端就会出现样式错乱,所以代码设定了在移动端不显示该登录效果
本教程仅修改子主题js文件和css文件,后期升级主题不受任何影响。
演示效果:
更新function
b2子主题,可在原来function文件的child.js文件引入下方添加如下代码
或者可以后台头部HTML标签设置的地方引入js
子主题js文件内增加以下代码:
第三步,子主题css文件增加以下代码:
/*登录弹窗样式*/ @media (min-width: 768px){ .login-box-content{background:#fff} .login-box-content{ background: #4387fd; background-image: url(https://img.lurending.com/2020/05/21879091822c829702c1be5dc4e6f52c.png); background-position: 145px bottom; background-repeat: no-repeat;} .luren_com_login {width: 400px; height:auto; float: left; } .login-box-content .login-box-top{ width: 400px; float: left;background: #fff;} .modal-content{width:800px} .luren_com_login {width: 400px; height:auto; float: left; } .login-box-content .login-box-top{ width: 400px; float: left;background: #fff;} .modal-content{width:800px} .luren_com_login .wxlogin-sidebar{ padding: 50px 50px 0;} .luren_com_login .wxlogin-sidebar h2 { font-size: 22px; margin-bottom: 30px; color:#fff; } .luren_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; } .luren_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) { .luren_com_login { display:none } } /*登录弹窗样式结束*/
素材图片,请自行修改css中的图片地址为自己的: