• 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

Amaury

Well-known member
#1
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.
 

Dylan V

Well-known member
#2
Hi,

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

Amaury

Well-known member
#5
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)
 

Amaury

Well-known member
#7
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
 

Dylan V

Well-known member
#8
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:

View attachment 111954 View attachment 111955

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:

View attachment 111956 View attachment 111957
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

Well-known member
#12
@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: