XF 2.2 login popup footer color

beerForo

Well-known member
Where in Style Properties is the font color in the login popup footer? "Don't have an account?"
It is not controlled by overlay, or popup footer, block footer.
I will also settle for the background color of the footer in Style Properties. One needs to change and don't want to do it in extra.css.
 
Last edited:

Russ

Well-known member
It technically inherits from the page background property if I recall.

Why wouldn't you want to use extra.less? It's there for instances like this where there isn't really a property.
 

beerForo

Well-known member
@Russ because I have a very large extra.less and a child style that inherits it without needing to change it yet. I would like to be able to keep it as inherited and not have two custom extra.less if possible so any new changes are only in the parent. The child style is displaying this properly I was hoping to find how to change it in the parent in Style Properties
 
Last edited:

beerForo

Well-known member
Browser inspect looks like .overlay, but my Overlay colors are not this. So I don't get it.

If anyone can help with css for extra.less to make that text white in that footer, appreciated.
 
Last edited:

Russ

Well-known member
@Russ because I have a very large extra.less and a child style that inherits it without needing to change it yet. I would like to be able to keep it as inherited and not have two custom extra.less if possible.so any new changes are only in the parent. The child style is displaying this properly I was hoping to find how to change it in the parent in Style Properties

Sometimes I'd recommend creating a new template and including it inside the extra.less. For example, if your setup is like:

- Main style (light style)
-- Child style (dark style maybe? )

Create a template called "child_style.less" and include it inside of extra.less on the main style:

Code:
<xf:include template="child_style.less" />

Then any CSS you want to apply just to the child style, place it inside the template while editing the "child style". No CSS will go in it on the main style, it'll never be outdated.

Alternatively, if you're running a light/dark child setup. You can do CSS like this:

Code:
.overlay
{
    background: #CCC;
& when (@xf-styleType = dark) { background: #000; }
}

This will use the light/dark property to determine which CSS it'll use.


As for your custom CSS for the overlay. Try this in your extra.less:

Code:
.overlay
{
    background: @xf-contentAltBg;
}

You can change that to anything you'd like, but that color might work well depending on your style.
 

beerForo

Well-known member
All helpful info for the future! For now the last bit worked! Seems it was "using" that color already in dark so it only changed light. Perfect!
 
Top