XF 2.2 Background color of 'navgroup'

SavageInMe

New member
Can someone tell me where to change the background color of these buttons/tabs?

Screenshot_36.png

Not the background color behind the tabs but of the tabs themselves.

Thanks very much for your time ;)
 
add this code to your EXTRA.LESS template

CSS:
.p-nav-list .p-navEl.is-selected {
    color: blue;
    }

change blue to the color you like.

you can also use HEX for more colors e.g.

CSS:
.p-nav-list .p-navEl.is-selected {
    color: #ffffff;
    }

change #ffffff to the hex color code you want.
 
Alternatively you can navigate to

Appearance > style property> Header and navigation >Navigation row - selected tab > background color
 
Alternatively you can navigate to

Appearance > style property> Header and navigation >Navigation row - selected tab > background color

That changes the color behind those tabs... but it shows me also that those tabs are mostly transparent so that's why it's taking on the color behind them.
 
thank you very much.

I have another question, I'm not sure if you can answer it, but you see the Avatar the board gave me, the purple S.. is there a way to change the color of this?
 
I have another question, I'm not sure if you can answer it, but you see the Avatar the board gave me, the purple S.. is there a way to change the color of this?
As stated, you can't easily change it... I'm sure that an add-on could be coded to defeat the dynamic application of colors. The other option is to turn off dynamic avatars and assign a set avatar for all users that have not uploaded a custom one.
 
I want to change the color of text and background without changing the color properties from page setup links.
Hopefully someone can chime in.. I don't have time to look at it right now as I'm in the middle of setting up a new VM instance and installing TimeTrex on it and trying to import the DB from the old TimeTrex install into it.
 
Last edited:
This extra.less code might get you close (change the colors to whatever you want):
Code:
.p-body-sideNavContent {
    .block-container { background: orange; }
    .blockLink { color: red }
}
 
Top Bottom