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 ;)
 

KSA

Well-known member
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.
 

KSA

Well-known member
Alternatively you can navigate to

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

SavageInMe

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

SavageInMe

New member
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?
 

Tracy Perry

Well-known member
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.
 

Tracy Perry

Well-known member
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:

JRobert

Active member
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