XF 2.2 Style bug or...?

[beerForo]

In my login pop-up, in the block footer it says "Don't have an account?" in black text. I am looking to change this to white. When I inspect it, it says it is getting the black from .overlay, but my overlay text is already set to white, I also tried various block texts and none affected this.
Thanks

 

[beerForo]

If not a bug, where to control this color?

 

[Paul B]

It's unlikely to be a bug.

You just need to find the correct selector to override the styling, or edit the template directly to apply inline styling/your own class.

 

[Paul B]

The easiest way to find what classes are being applied in a case like this is:

1. Search for the phrase text in the phrases - Don't have an account?
2. That will return the actual phrase name - dont_have_account_question
3. Search for that phrase in the templates
4. That will return the template - login
5. Searching in the template for dont_have_account_question returns this

<div class="block-outer block-outer--after">
    <div class="block-outer-middle">
        {{ phrase('dont_have_account_question') }} <xf:button href="{{ link('register') }}">{{ phrase('register_now') }}</xf:button>
    </div>
</div>

You can try targeting those classes in the extra.less template, but if those classes are used elsewhere and you only want to alter the styling of this element then you need to be more specific, such as using data-template to only apply to a specific template, like this:

[data-template="login"]
{
    .block-outer-middle
        {
            color: orange;
        }
}

That doesn't work in this case so you can use one of the following options.

You can apply inline styling like this:

<div class="block-outer block-outer--after">
    <div class="block-outer-middle" style="color: orange">
        {{ phrase('dont_have_account_question') }} <xf:button href="{{ link('register') }}">{{ phrase('register_now') }}</xf:button>
    </div>
</div>

Or you can edit the phrase instead.

 

[beerForo]

Oh wow!

Bookmarked. Thx.