Change the login style of the forum list page

[admin]

Find template: forum_view

<xf:if is="!$forum.canCreateThread()">
            <div class="block-outer-opposite">
                <xf:if is="$xf.visitor.user_id">
                    <span class="button button--wrap is-disabled">
                        {{ phrase('no_permission_to_post') }}
                        <!-- this is not interactive so shouldn't be a button element -->
                    </span>
                <xf:else />
                    <xf:button href="{{ link('login') }}" class="button--link button--wrap" overlay="true">
                        {{ phrase('log_in_or_register_to_post') }}
                    </xf:button>
                </xf:if>
            </div>
        </xf:if>

Replace code:

<xf:css src="login_register_widget.less" />
<div class="cxf-lrotv-block">
<p class="cxf-lrotv-title">Create an account or login to comment</p>
<p class="cxf-lrotv-description">You must be a member in order to leave a comment</p>
<div class="cxf-lrotv-container">
<div class="cxf-lrotv-grid-block left">
<p class="cxf-lrotv-title-minor">Create account</p>
<p class="cxf-lrotv-description">Create an account on our community. It's easy!</p>
<div class="cxf-lrotv-button">
<a href="/register/" class="cxf-lrotv-register button" rel="nofollow" data-xf-click="overlay">Register</a>
</div>
</div>
<div class="cxf-lrotv-grid-block right">
<p class="cxf-lrotv-title-minor">Log in</p>
<p class="cxf-lrotv-description">Already have an account? Log in here.</p>
<div class="cxf-lrotv-button">
<a href="/login/" class="cxf-lrotv-login button" rel="nofollow" data-xf-click="overlay">Log in</a>
</div>
</div>
</div>
</div>

add login_register_widget.less

.cxf-lrotv-block{background:#E6E8EB;border-radius:3px;padding:15px;text-align:center;margin-top:40px;}
.cxf-lrotv-container{display:flex}.cxf-lrotv-grid-block{display:flex;flex-direction:column;flex:1 1 250px;margin-left:1%;padding:15px}
.cxf-lrotv-grid-block:first-of-type{margin-left:0}
.cxf-lrotv-grid-block.left{background:#ffffff;border:1px solid #e0e0e0;border-radius:3px;box-shadow:0px 1px 0px rgba(0,0,0,0.1);text-align:center}
.cxf-lrotv-grid-block.right{background:#ffffff;border:1px solid #e0e0e0;border-radius:3px;box-shadow:0px 1px 0px rgba(0,0,0,0.1);text-align:center}
.cxf-lrotv-title{font-size:28px;color:#000000;margin:0}.cxf-lrotv-description{font-size:14px;color:#8d9aa6;margin:0;margin-bottom:15px}
.cxf-lrotv-grid-block.left .cxf-lrotv-title-minor{font-size:20px;color:#000000;margin:0}.cxf-lrotv-grid-block.right .cxf-lrotv-title-minor{font-size:20px;color:#000000;margin:0}
.cxf-lrotv-grid-block.left .cxf-lrotv-description{font-size:14px;color:#8d9aa6;margin:0;margin-bottom:15px}
.cxf-lrotv-grid-block.right .cxf-lrotv-description{font-size:14px;color:#8d9aa6;margin:0;margin-bottom:15px}
.cxf-lrotv-register.button,.cxf-lrotv-login.button{width:100%;max-width:350px}
.cxf-lrotv-register.button:before{font-family:'Font Awesome 5 Pro';font-size:inherit;font-style:normal;font-weight:400;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:"\f084";margin-right:4px}
.cxf-lrotv-login.button:before{font-family:'Font Awesome 5 Pro';font-size:inherit;font-style:normal;font-weight:400;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:"\f090";margin-right:4px}@media (max-width:650px){.cxf-lrotv-block{margin-left:-10px;margin-right:-10px}
.cxf-lrotv-container{display:block !important}
.cxf-lrotv-title{font-size:20px}
.cxf-lrotv-grid-block.left{margin-left:0;margin-bottom:15px;padding-bottom:15px}
.cxf-lrotv-grid-block.right{margin-left:0}}