• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

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