博客后台登录美化

梓逸
2021-07-01 / 0 评论 / 4 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2021年11月18日,已超过13天没有更新,若内容或图片失效,请留言反馈。

无插件美化,主要替换CSS和HTML就可以了
后台美化的样式如下,git图片我给它压缩了,太大的图片不能直接被调用,给我整懵逼了,我丢 表情 表情

[tabs]
[item title="PC端效果"]dn[/item]
[item title="手机端效果"]sj[/item]
[/tabs]


进入build/admin/login.php,复制替换即可

<?php
include 'common.php';

if ($user->hasLogin()) {
    $response->redirect($options->adminUrl);
}
$rememberName = htmlspecialchars(Typecho_Cookie::get('__typecho_remember_name'));
Typecho_Cookie::delete('__typecho_remember_name');

$bodyClass = 'body-100';

include 'header.php';
?>
<style>
.typecho-login{
    border-radius: 25px;
    border: 2px solid #999;
    padding: 20px; 
    width: 280px;
    height: 280px;
    background: rgb(255 255 255 / 22%);
    }
.body-100{
      background-image: url("你要的登录界面的背景,自己填");
}
.input .textarea{
    background: #ffffff21;
}
</style>
<div class="typecho-login-wrap">
    <div class="typecho-login">
        <h1>沐北の后台</h1>
        <form action="<?php $options->loginAction(); ?>" method="post" name="login" role="form">
            <p>
                <label for="name" class="sr-only"><?php _e('用户名'); ?></label>
                <input type="text" id="name" name="name" value="<?php echo $rememberName; ?>" placeholder="<?php _e('用户名'); ?>" class="text-l w-100" autofocus />
            </p>
            <p>
                <label for="password" class="sr-only"><?php _e('密码'); ?></label>
                <input type="password" id="password" name="password" class="text-l w-100" placeholder="<?php _e('密码'); ?>" />
            </p>
         <p align="left">
                <label for="remember" ><input type="checkbox" name="remember" class="checkbox" value="1" id="remember" /> <?php _e('记住密码'); ?></label>
            </p>
           
            <p class="submit">
                <button type="submit" class="btn btn-l w-100 primary"><?php _e('登录'); ?></button>
                <input type="hidden" name="referer" value="<?php echo htmlspecialchars($request->get('referer')); ?>" />
            </p>
           
        </form>
        
        <!--<p class="more-link">-->
        <!--    <a href="<?php $options->siteUrl(); ?>"><?php _e('返回首页'); ?></a>-->
        <!--    <?php if($options->allowRegister): ?>-->
        <!--    &amp;bull;-->
        <!--    <a href="<?php $options->registerUrl(); ?>"><?php _e('用户注册'); ?></a>-->
        <!--    <?php endif; ?>-->
        <!--</p>-->
    </div>
</div>
<?php 
include 'common-js.php';
?>
<script>
$(document).ready(function () {
    $('#name').focus();
});
</script>
<?php
include 'footer.php';
?>

CSS下载替换-路劲build/admin/css
后台的CSS放在了下方,还不冲吗
[hide]
[button color="success" url="https://wwt.lanzoui.com/ipFW8wmg4nc" outline="" target="_blank"]login.css[/button]
[/hide]

0

评论

博主关闭了所有页面的评论