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

XF 1.4 Inbox/Alerts Hover

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

Tags:
  1. Amaury

    Amaury Well-Known Member

    So I have this CSS for hovering over links in the Inbox and Alerts dropdowns:

    Code:
    .KHFlare .navPopup a:hover, .navPopup .listItemText a:hover {
        color: @contentText;
        text-decoration: none;
    }
    What CSS can I use to change the link color when the Inbox and Alerts dropdown menus' hover background is active, but the link itself isn't being hovered over?

    Hover.PNG

    In this example, Test Conversation.
     
  2. Dylan V

    Dylan V Well-Known Member

    Hi,

    Add this in EXTRA.css:
    Code:
    .navPopup .PopupItemLinkActive:hover .PopupItemLink
    {
            color: #000000;
    }
    Change #000000 with the color of your choice.
     
    Amaury likes this.
  3. Amaury

    Amaury Well-Known Member

    Worked, thanks!

    How about usernames under Alerts?

    KHF Alerts.PNG
     
  4. Dylan V

    Dylan V Well-Known Member

    Code:
    .navPopup .PopupItemLinkActive:hover .subject
    {
            color: #000000;
    }
     
    Amaury likes this.
  5. Amaury

    Amaury Well-Known Member

    You're the man!

    For better organization, I combined the two CSS pieces you gave me:

    Code:
    .KHFlare .navPopup .PopupItemLinkActive:hover .PopupItemLink, .PopupItemLinkActive:hover .subject {
        color: @contentText;
    }
    (y)
     
  6. Dylan V

    Dylan V Well-Known Member

    Yes, it's cleaner. :)
     
  7. Amaury

    Amaury Well-Known Member

    Sorry, @Dylan V! One more thing! :p

    This is how I currently have it, using @contentText for the color in the CSS you gave me:

    KHF Dropdown 1.PNG KHF Dropdown 2.PNG

    For consistency, I want the text to be white on both styles when hovering there, which I can do by changing @contentText to @secondaryDarker, but as you'll see below in the screenshots, it looks like I need some more CSS to cover the plain text and the date/time stamp:

    KHF Dropdown 3.PNG KHF Dropdown 4.PNG
     
  8. Dylan V

    Dylan V Well-Known Member

    For me, everything changes when hovering the element:

    Screenshot_1.png

    For the date, add this:
    Code:
    .navPopup .PopupItemLinkActive:hover .muted
    {
            color: #000000;
    }
    Full code:
    Code:
    .navPopup .PopupItemLinkActive:hover .PopupItemLink,
    .navPopup .PopupItemLinkActive:hover .subject,
    .navPopup .PopupItemLinkActive:hover .muted
    {
            color: #000000;
    }
     
    Amaury likes this.
  9. Amaury

    Amaury Well-Known Member

    Likely because it's the default style:

    KHF Dropdown 6.PNG KHF Dropdown 5.PNG

    Try making your color palette the same as mine and then having a look:

    Color Palette.PNG
     
  10. Dylan V

    Dylan V Well-Known Member

  11. Amaury

    Amaury Well-Known Member

    I gave @Dylan V administrator access and he resolved it with this CSS:

    Code:
    .navPopup .PopupItemLinkActive:hover h3
    Thank you, Dylan! You're the best! ;)
     
    Dylan V likes this.
  12. Amaury

    Amaury Well-Known Member

    @Dylan (and anyone else), I was playing around with the styling, and it turns out that for the plain text, such as "replied to the thread," all I needed to do was to add a color value here. :oops:

    Code:
    .navPopup .listItemText .muted {
        font-size: 11px;
    }
    
    .navPopup .PopupItemLinkActive:hover {
        color: @secondaryDarker;
        background-color: @inlineMod;
    }
    
    .navPopup .PopupItemLinkActive:hover .PopupItemLink,
    .navPopup .PopupItemLinkActive:hover .subject,
    .navPopup .PopupItemLinkActive:hover .muted,
    .navPopup .PopupItemLinkActive:hover .username {
        color: @secondaryDarker;
    }
    That's what my code now looks like for the Inbox/Alerts dropdown area. The code shown in my post above was not needed.

    Edit: This is what I previously had, which you can see is a bit messier:

    Code:
    .navPopup .listItemText .muted {
        font-size: 11px;
    }
    
    .navPopup .PopupItemLinkActive:hover {
        background-color: @inlineMod;
    }
    
    .navPopup .PopupItemLinkActive:hover .PopupItemLink, .PopupItemLinkActive:hover .subject {
        color: @secondaryDarker;
    }
    
    .navPopup a:hover, .navPopup .listItemText a:hover {
        color: @secondaryDarker;
    }
    
    .navPopup a:hover {
        color: @contentText;
    }
    
    .navPopup .PopupItemLinkActive:hover .muted {
        color: @secondaryDarker;
    }
    
    .navPopup .PopupItemLinkActive:hover h3 {
        color: @secondaryDarker;
    }
    
    .navPopup .PopupItemLinkActive:hover .username {
        color: @secondaryDarker;
    }
     
    Last edited: Jul 26, 2015

Share This Page