自定义下拉登录框美化-记录

简介

这是一个登录框美化教程，详细记录了本站美化的关键修改点，主要防止自己遗忘、修改了哪些内容，哪些对应哪些，从而、确保能够轻松恢复原状。🤭😁

效果预览

代码部署

在主题根目录inc/functions/zib-header.php 搜索以下代码可快速定位：

$href .= '<a href="javascript:;" class="signin-loader">
$href .= '<a href="javascript:;" class="signin-loader">
$href .= '<a href="javascript:;" class="signin-loader">

将以下代码注释：“ // ”

        $href .= '<div class="flex jsa header-user-href">';
        $href .= '<a href="javascript:;" class="signin-loader"><div class="badg mb6 toggle-radius c-blue">' . zib_get_svg('user', '50 0 924 924') . '</div><div class="c-blue">登录</div></a>';
        $href .= !zib_is_close_signup() ? '<a href="javascript:;" class="signup-loader"><div class="badg mb6 toggle-radius c-green">' . zib_get_svg('signup') . '</div><div class="c-green">注册</div></a>' : '';
        $href .= '<a target="_blank" rel="nofollow" href="' . add_query_arg('redirect_to', esc_url(zib_get_current_url()), zib_get_sign_url('resetpassword')) . '"><div class="badg mb6 toggle-radius c-purple">' . zib_get_svg('user_rp') . '</div><div class="c-purple">找回密码</div></a>';
        $href .= '<div class="flex jsa header-user-href">';
        $href .= '<a href="javascript:;" class="signin-loader"><div class="badg mb6 toggle-radius c-blue">' . zib_get_svg('user', '50 0 924 924') . '</div><div class="c-blue">登录</div></a>';
        $href .= !zib_is_close_signup() ? '<a href="javascript:;" class="signup-loader"><div class="badg mb6 toggle-radius c-green">' . zib_get_svg('signup') . '</div><div class="c-green">注册</div></a>' : '';
        $href .= '<a target="_blank" rel="nofollow" href="' . add_query_arg('redirect_to', esc_url(zib_get_current_url()), zib_get_sign_url('resetpassword')) . '"><div class="badg mb6 toggle-radius c-purple">' . zib_get_svg('user_rp') . '</div><div class="c-purple">找回密码</div></a>';
        $href .= '<div class="flex jsa header-user-href">';
        $href .= '<a href="javascript:;" class="signin-loader"><div class="badg mb6 toggle-radius c-blue">' . zib_get_svg('user', '50 0 924 924') . '</div><div class="c-blue">登录</div></a>';
        $href .= !zib_is_close_signup() ? '<a href="javascript:;" class="signup-loader"><div class="badg mb6 toggle-radius c-green">' . zib_get_svg('signup') . '</div><div class="c-green">注册</div></a>' : '';
        $href .= '<a target="_blank" rel="nofollow" href="' . add_query_arg('redirect_to', esc_url(zib_get_current_url()), zib_get_sign_url('resetpassword')) . '"><div class="badg mb6 toggle-radius c-purple">' . zib_get_svg('user_rp') . '</div><div class="c-purple">找回密码</div></a>';

在注释的下方添加以下代码：二选一即可，如下图

$href .= '<img src="你的图片链接" class="mascot signin-loader"><p>主人，请点击头像登录后查看哦~</p><div class="flex jsa header-user-href">';
$href .= '<img src="你的图片链接" class="mascot signin-loader"><p>主人，请点击头像登录后查看哦~</p><div class="flex jsa header-user-href">';
$href .= '<img src="你的图片链接" class="mascot signin-loader"><p>主人，请点击头像登录后查看哦~</p><div class="flex jsa header-user-href">';

$href .= '<img src="你的图片链接" class="mascot signin-loader"><p class="explain">主人，请点击头像登录后查看哦~</p><div class="flex jsa header-user-href">';
$href .= '<img src="你的图片链接" class="mascot signin-loader"><p class="explain">主人，请点击头像登录后查看哦~</p><div class="flex jsa header-user-href">';
$href .= '<img src="你的图片链接" class="mascot signin-loader"><p class="explain">主人，请点击头像登录后查看哦~</p><div class="flex jsa header-user-href">';

自定义css

.mascot {
    display: block;
    height: auto;
    width: 150px;
    margin: 0 auto 20px;
}
.explain {
    height: 20px;
    font-size: 12px;
    line-height: 20px;
    color: #999999;
    display: block;
    text-align: center;
    white-space: nowrap;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    overflow: hidden;
}
.mascot {
    display: block;
    height: auto;
    width: 150px;
    margin: 0 auto 20px;
}
.explain {
    height: 20px;
    font-size: 12px;
    line-height: 20px;
    color: #999999;
    display: block;
    text-align: center;
    white-space: nowrap;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    overflow: hidden;
}
.mascot {
    display: block;
    height: auto;
    width: 150px;
    margin: 0 auto 20px;
}
.explain {
    height: 20px;
    font-size: 12px;
    line-height: 20px;
    color: #999999;
    display: block;
    text-align: center;
    white-space: nowrap;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    overflow: hidden;
}

将自定义css添加到后台，至此不出意外就能达到上述预览图效果

󠄐󠄹󠅀󠄪󠄡󠄨󠄞󠄢󠄢󠄡󠄞󠄡󠄩󠄠󠄞󠄧󠄩󠄬󠅒󠅢󠄟󠄮󠄐󠅅󠄹󠄴󠄪󠄾󠅟󠅤󠄐󠄼󠅟󠅗󠅙󠅞󠄬󠅒󠅢󠄟󠄮󠅄󠅙󠅝󠅕󠄪󠄡󠄧󠄤󠄤󠄢󠄡󠄧󠄦󠄤󠄥󠄬󠅒󠅢󠄟󠄮󠇕󠆬󠅰󠇕󠆯󠅳󠇕󠆞󠆍󠄐󠇗󠅹󠅸󠇖󠆍󠅳󠇖󠅹󠅰󠇖󠆌󠅹󠄬󠅒󠅢󠄟󠄮