Ripro-v2美化未登录时评论框–zpro主题开发记录

效果图：

主要CSS

.comment-overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, .3);
     -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px);
    z-index: 2;
}
.comment-must-login{
    display: block;
    text-align: center;
    font-size: 14px;
}
.comment-form{
    overflow:visible;
}

主要的html

放到comments.php  的comment-form的must_log_in下 class=”must_log_in”后，注意</div>放登录提醒的后面。至于登录提醒可以按照自己的需求来制作。比如加入第三方快捷登录按钮等

<div class="comment-overlay"></div>