Yep!

Just load an HTML widget with this as the content:

Code:
<xf:include template="xb_sidebar_login" />

Make sure to check the "advanced" option at the bottom of the widget setup to avoid a double container.
 
Can I make the two login/register buttons on the same line?

At least to me, it looks kind of funny the way it currently is.

9449
 
Probably going to actually change this in an update to them being next to each other.

For now, open xb_sidebar_login.

Find:
Code:
                    <xf:submitrow icon="login" />
                  
                <xf:if is="$xf.options.registrationSetup.enabled">
                    <div class="block-outer block-outer--after block-outer--register">
                        <div class="block-outer-middle">
                            {{ phrase('dont_have_account_question') }} <xf:button href="{{ link('register') }}">{{ phrase('register_now') }}</xf:button>
                        </div>
                    </div>
                </xf:if>

Replace with:
Code:
                    <div class="login-buttons">
                        <xf:button type="submit" class="button--primary button button--icon button--icon--login"><span class="button-text">{{ phrase('log_in') }}</span></xf:button>
                        <xf:button href="{{ link('register') }}" class="register-button button--icon button--icon--user">{{ phrase('register_now') }}</xf:button>
                    </div>

Then add this in your extra.less:

Code:
.login-buttons
{
    display: flex;
    margin-top: 10px;
    > *
    {
        display: block;
        flex-grow: 1;
        margin: 0 5px;
    }
}
 
Last edited:
Probably going to actually change this in an update to them being next to each other.

For now, open xb_sidebar_login.

Find:
Code:
                    <xf:submitrow icon="login" />
                 
                <xf:if is="$xf.options.registrationSetup.enabled">
                    <div class="block-outer block-outer--after block-outer--register">
                        <div class="block-outer-middle">
                            {{ phrase('dont_have_account_question') }} <xf:button href="{{ link('register') }}">{{ phrase('register_now') }}</xf:button>
                        </div>
                    </div>
                </xf:if>

Replace with:
Code:
                    <div class="login-buttons">
                        <xf:button type="submit" class="button--primary button button--icon button--icon--login"><span class="button-text">{{ phrase('log_in') }}</span></xf:button>
                        <xf:button href="{{ link('register') }}" class="register-button">{{ phrase('register_now') }}</xf:button>
                    </div>

Then add this in your extra.less:

Code:
.login-buttons
{
    display: flex;
    margin-top: 10px;
    > *
    {
        display: block;
        flex-grow: 1;
        margin: 0 5px;
    }
}
Yeah man, that looks (at least to me) so much better.

Reason number 1012 why you would be foolish not to be using Pixelexit designs.

EDIT.. I know this is trivial but, there is a icon next to the login button, Shouldnt there be one next to the register button as well?
 

Pre-Sale Questions

If you have any questions or concerns you want to ask before you make a purchase don't hesitate to use one of our multiple support channels for your convenience.

Back