Login Widget

[Blatchy]

Is it possible to use the sidebar login as a widget on other pages, like xenporta?

 

[Russ]

Yep!

Just load an HTML widget with this as the content:

<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.

 

[Blatchy]

Yep!

Just load an HTML widget with this as the content:

<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.

You da man. Thank you.

 

[Blatchy]

Anyone looking to use this.. use a html widget then use as your template

<xf:if is="!$xf.visitor.user_id"><xf:include template="xb_sidebar_login" /></xf:if>

 

[Blatchy]

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.

 

[Russ]

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

For now, open xb_sidebar_login.

Find:

                    <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:

                    <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:

.login-buttons
{
    display: flex;
    margin-top: 10px;
    > *
    {
        display: block;
        flex-grow: 1;
        margin: 0 5px;
    }
}

 

[Blatchy]

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

For now, open xb_sidebar_login.

Find:

                    <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:

                    <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:

.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?

 

[Russ]

I've edited my post, specifically added classes:

button--icon button--icon--user

next to register-button

 

[Blatchy]

I've edited my post, specifically added classes:

button--icon button--icon--user

next to register-button

I like the way you think.