XF 1.4 Inbox/Alerts Hover

[Amaury]

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

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



In this example, Test Conversation.

 

[Dylan V]

Hi,

Add this in EXTRA.css:

.navPopup .PopupItemLinkActive:hover .PopupItemLink
{
        color: #000000;
}

Change #000000 with the color of your choice.

 

[Amaury]

Worked, thanks!

How about usernames under Alerts?

 

[Dylan V]

.navPopup .PopupItemLinkActive:hover .subject
{
        color: #000000;
}

 

[Amaury]

You're the man!

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

.KHFlare .navPopup .PopupItemLinkActive:hover .PopupItemLink, .PopupItemLinkActive:hover .subject {
    color: @contentText;
}

 

[Dylan V]

You're the man!

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

.KHFlare .navPopup .PopupItemLinkActive:hover .PopupItemLink, .PopupItemLinkActive:hover .subject {
    color: @contentText;
}

Yes, it's cleaner.

 

[Amaury]

Sorry, @Dylan V! One more thing!

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



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:

 

[Dylan V]

Sorry, @Dylan V! One more thing!

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:



For the date, add this:

.navPopup .PopupItemLinkActive:hover .muted
{
        color: #000000;
}

Full code:

.navPopup .PopupItemLinkActive:hover .PopupItemLink,
.navPopup .PopupItemLinkActive:hover .subject,
.navPopup .PopupItemLinkActive:hover .muted
{
        color: #000000;
}

 

[Amaury]

Likely because it's the default style:



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

 

[Dylan V]

Likely because it's the default style:

View attachment 111961 View attachment 111959

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

View attachment 111960

Can you give me your current code?

 

[Amaury]

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

.navPopup .PopupItemLinkActive:hover h3

Thank you, Dylan! You're the best!

 

[Amaury]

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

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

.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;
}