XF 1.4 Unreadable Text on Selected Account Item Dropdowns

[Amaury]

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:



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

.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:

.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:

 

[TickTackk]

.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]

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

 

[TickTackk]

Just replace .account with .inbox but I think this will most suitable code in your case

.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]

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.

.navTabs .navTab.account.selected .navLink, .navTabs .navTab.inbox.selected .navLink {
    color: @contentText;
}

Thanks for the help!

 

[Steve F]

Or a little shorter form

.navTabs .visitorTabs .selected .navLink {
    color: red;
}

 

[Amaury]

I had to add the custom class to that one.

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