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

Discussion in 'Styling and Customization Questions' started by Amaury, Jul 22, 2015.

  1. Amaury

    Amaury Well-Known Member

    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: Jul 22, 2015
  2. batpool52!

    batpool52! Well-Known Member

    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 likes this.
  3. Amaury

    Amaury Well-Known Member

    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
     
  4. batpool52!

    batpool52! Well-Known Member

    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 likes this.
  5. Amaury

    Amaury Well-Known Member

    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!
     
    batpool52! likes this.
  6. Steve F

    Steve F Well-Known Member

    Or a little shorter form
    Code:
    .navTabs .visitorTabs .selected .navLink {
        color: red;
    }
     
    Kevin, batpool52! and Amaury like this.
  7. Amaury

    Amaury Well-Known Member

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

Share This Page