宝塔面板登录美化

查看 13|回复 0
作者:鸵鸟的梦想   
其实我也不知道为什么要美化宝塔的登录面板,因为我的面板都是追求隐藏、加密等操作的。但是求助我的还是一位52结实的朋友,索性就把这次美化的过程分享一下。    献丑啦,前端大神一笑就好
    0x1:首先找到面板登login.html   /www/server/panel/BTPanel/templates/default/login.html
    0x2:因为style样式都是在该页面内,直接添加一个.login_bg (因为他要动态背景)
[CSS] 纯文本查看 复制代码.login_bg {
                                    position: fixed;
                            top:0;
                            left: 0;
                            width: 100%;
                            height: 100%;
                            z-index: -10;
                            object-fit: cover;
                                }
    0x3:body中插入video
[HTML] 纯文本查看 复制代码   
    0x4:保存文件,重启宝塔面板
[i]
其它修改:
01:登录框透明 大概在65行(.login)   background-color: rgba(0,0,0,0.3);    //登录框实现半透明效果
02:登录框标题 大概在149行(.form_title)    color: #fff;    //登录框标题文字颜色
03:登录按钮     大概在216行(.login.btn)background-color: rgba(0,0,0,0.5);     //按钮半透明
                                                                       border-radius: 15px;    //按钮圆角
/*border: 1px solid #20a53a;*/    //清除边框线   
/*box-shadow: inset 0 1px 2px #30ad42;*/    //清除边框线
并且注释了.login.btn:hover
[i]
最终效果:
[i]
[i]
朋友不需要扫码登录所以注释了部分代码
在这里贴一下
[HTML] 纯文本查看 复制代码{{data['lan']['N13']}}-->
注释掉找回密码
[HTML] 纯文本查看 复制代码-->
                                        -->
                                        -->
                                        -->
                                        切换扫码登录-->
                                        -->
                                        -->
注释掉扫码登录
[HTML] 纯文本查看 复制代码如果不需要宝塔logo
大概在494行中的img标签也可以删除
[i]

宝塔, 面板

您需要登录后才可以回帖 登录 | 立即注册

返回顶部