XF 1.4 Unreadable Text on Selected Account Item Dropdowns

Amaury

Well-known member
#1
I always run into this problem on light styles when the navigation bar is dark (e.g., #646464), but the sub-navigation bar is light (e.g., #F0F0F0).

When the username, Inbox, or Alert dropdowns are selected (when you're on /account), the text is unreadable:

KHF White 1.PNG

I know what the problem is. It's because of this CSS I have:

Code:
.navTabs .navTab.PopupClosed .navLink {
    color: @secondaryDarker;
}

.navTabs .navTab.PopupClosed .navLink:hover {
    color: @secondaryDarker;
}
However, I need that for the navigation items in general, such as Members, including the account-related dropdowns when not on the account page, so I'm conflicted.

And I can sort of fix it, at least for the username, if I add this:

Code:
.navTabs .navTab.account .navLink .accountUsername {
    color: @contentText;
}
But then it's still that color even when the account dropdowns aren't selected, which I obviously don't want:

KHF White 2.PNG

KHF White 3.PNG
 
Last edited:

batpool52!

Well-known member
#2
Code:
.navTabs .navTab.account .navLink
{
    /** color when the {username} is not selected **/
    color: #ffffff;
}

.navTabs .navTab.account.selected .navLink
{
    /** color when the {username} is selected **/
    color: #ffffff;
}
 

Amaury

Well-known member
#3
You're awesome!

Now, that took care of the username; how about Inbox? (Looks like Alerts defaults to the username, so we can ignore that one.)

KHF Convo.PNG
 

batpool52!

Well-known member
#4
Just replace .account with .inbox but I think this will most suitable code in your case
Code:
.navTabs .navTab .navLink
{
    /** normal tab link color **/
    color: red;
}

.navTabs .navTab.selected .navLink
{
    /** selected tab color **/
    color: blue;
}

.navTabs .navTab.PopupOpen .navLink
{
    /** tab color when the menu thing shows **/
    color: orange;
}
 

Amaury

Well-known member
#5
Looks like all I needed was this, actually, because it specifically targets the areas when they're selected and therefore doesn't affect them when I'm not on /account.

Code:
.navTabs .navTab.account.selected .navLink, .navTabs .navTab.inbox.selected .navLink {
    color: @contentText;
}
Thanks for the help!
 

Amaury

Well-known member
#7
I had to add the custom class to that one. :)

Code:
.KHFlare .navTabs .visitorTabs .selected .navLink {
    color: @contentText;
}

.KHFlare .navTabs .visitorTabs .selected .navLink:hover {
    color: @contentText;
}
Additionally, I have a specific CSS template for it on the light style and am calling it on the framework (same for the dark version, but for other stuff). :)
 
Top