RiPro主题美化-未登录状态网站底部提示

很多网站在底部有一个未登录状态提示浏览者登陆的一个条幅，个人认为是可以有效增加客户粘度的，下面我们一起来看看怎么美化一个出来。

第一步：上传附件中的“yite-login.php”文件到主题 /parts/文件夹中；
第二步：打开主题footer.php文件，找到“<?php get_template_part( ‘parts/off-canvas’ ); ?>”，在改行代码前面增加以下代码：

<?php get_template_part( 'parts/yite-login' ); ?>

第三步：将以下代码添加至主题 functions.php文件尾部：

//未登录状态网站底部提示
function curPageURL() 
{
    $pageURL = 'http';

    if ($_SERVER["HTTPS"] == "on") 
    {
        $pageURL .= "s";
    }
    $pageURL .= "://";

    $pageURL .= $_SERVER["SERVER_NAME"] . $_SERVER["REQUEST_URI"];
    return $pageURL;
}

第四步：进入后台—Ripro主题设置-顶部设置，将以下css样式内容添加至“自定义CSS样式代码”选项框内，保存即可！

//未登录状态网站底部提示
.site-header{
	transition: All 0.5s ease-in-out;
    -webkit-transition: All 0.5s ease-in-out;
    -moz-transition: All 0.5s ease-in-out;
    -o-transition: All 0.5s ease-in-out;
}
.wic_slogin .wp{width:100%;align-content:center;}
.wic_slogin_qq .fa-qq,.wic_slogin_wechat .fa-wechat,.loginbutton .fa-user{color:#fff;margin-right:3px;}
.wic_slogin{position:fixed;z-index:99;left:0;bottom:0;width:100%;padding:20px 0;text-align:center;height:auto;line-height:45px;background:#f9f9f9;border-top:1px solid #e6e6e6;font-family:microsoft yahei;transition: All 0.5s ease-in-out;-webkit-transition: All 0.5s ease-in-out;-moz-transition: All 0.5s ease-in-out;-o-transition: All 0.5s ease-in-out;background:#fff;}
.wic_slogin_info{display:inline-block;*zoom:1;*display:inline;font-size:22px;color:#000;letter-spacing:2px;height:40px;line-height:40px;font-weight: 300;}
.wic_slogin_info a{color:var(--accent-color)}
.wic_slogin_info a:hover{text-decoration:none;color:var(--accent-color-min)}
.wic_slogin_btn{display:inline-block;*zoom:1;*display:inline;line-height:40px;height:40px;margin:0 8px}
.wic_slogin_btn a{display:block;background: -webkit-gradient(linear,left top,right top,from(var(--accent-color)),to(var(--accent-color-min)));background: linear-gradient(90deg,var(--accent-color),var(--accent-color-min));color:#fff;padding:0 20px;border-radius:3px;font-size:16px;border-radius: 50px;}
.wic_slogin_btn a:hover{text-decoration:none}
.wic_slogin_line{display:inline-block;*zoom:1;*display:inline;width:1px;height:10px;background:#ccc}
.wic_slogin_qq{border-radius: 10%;display:inline-block;*zoom:1;*display:inline;line-height:40px;height:40px;margin:0 8px;white-space: nowrap;}
.wic_slogin_qq a{display:block;color:#fff;padding:0 20px;border-radius:3px;font-size:16px;background:#0486f5;border-radius: 50px;}
.wic_slogin_qq a:hover{background-color:#0486f5;text-decoration:none}
.wic_slogin_wechat{display:inline-block;*zoom:1;*display:inline;line-height:40px;height:40px;margin:0 8px;white-space: nowrap;}
.wic_slogin_wechat a{display:block;color:#fff;padding:0 20px;border-radius:3px;font-size:16px;background:#2bac19;border-radius: 50px;}
.wic_slogin_wechat a:hover{background-color:#2bac19;text-decoration:none}
.top_login{line-height: 30px;height: 30px;}
.top_login a{font-size:14px}
.wechat-mini{align-items: center;border-radius: 50%;cursor: pointer;display: flex;font-size: 14px;height: 30px;justify-content: center;width: 30px;margin-right: 10px;background-color: #2bac19;border: 0;color: #fff;}
.qq-mini{align-items: center;border-radius: 50%;cursor: pointer;display: flex;font-size: 14px;height: 30px;justify-content: center;width: 30px;margin-right: 10px;background-color: #0486f5;border: 0;color: #fff;}
.login-title{font-size:16px;color:#fff;}
.wic_slogin_qq.top_login{
	display: block;
    color: #fff;
    padding: 0 20px;
    border-radius: 3px;
    font-size: 16px;
    background: #0486f5;
    border-radius: 50px;
}
.wic_slogin_wechat.top_login{
	display: block;
    color: #fff;
    padding: 0 20px;
    border-radius: 3px;
    font-size: 16px;
    background: #2bac19;
    border-radius: 50px;
}
@media (max-width:768px) {
.wic_slogin_info {display:relative;font-size:16px;line-height: 30px;height: 30px;}
.wic_slogin_btn a,.wic_slogin_qq a,.wic_slogin_wechat a{font-size:12px;height: 30px;line-height: 30px;padding:0 8px;}
.wic_slogin_btn,.wic_slogin_qq,.wic_slogin_wechat{height: 30px;line-height: 30px;}
.wic_slogin{padding:5px;line-height: 35px;}
.login-title{display:none;}
.wic_slogin_qq.top_login,.wic_slogin_wechat.top_login{align-items: center;align-content:center;width:30px;padding:0px}
.top_login .fa{margin: 7px;}
.actions .wic_slogin_qq a,.actions .wic_slogin_wechat a{align-items: center;border-radius: 50%;cursor: pointer;display: flex;font-size: 14px;height: 30px;justify-content: center;width: 30px;margin-right: 5px;border: 0;}
.actions .wic_slogin_qq a i,.actions .wic_slogin_wechat a i{padding-left: 2px;}
}