XF 2.2 New alert dropdown text color

TheGroove

Member
I am looking to change this text color for new alerts, it looks like it's white and it feels like I've tried every setting on the board to no avail. I'll gladly take some manual css here if anyone can help out.

alerts_png.png
 

Brogan

XenForo moderator
Staff member
Try this:
Less:
[data-xf-init="alerts-list"]
{
    .fauxBlockLink-blockLink
    {
        color: black;
    }
}

Change the colour/styling to suit.

You can use the same approach to target other elements in that block - use the browser inspector (F12) to determine what needs to be changed.
 

TheGroove

Member
Try this:
Less:
[data-xf-init="alerts-list"]
{
    .fauxBlockLink-blockLink
    {
        color: black;
    }
}

Change the colour/styling to suit.

You can use the same approach to target other elements in that block - use the browser inspector (F12) to determine what needs to be changed.
Unfortunately, this isn't working, that same block of text that says "there may be more posts after this" is always white not matter what I try. The thing is I've looked at every property (literally for hours) that I can think of showing white text and cannot find it. It's as if I'm overriding it somewhere.
 

Dermot

Active member
Unfortunately, this isn't working, that same block of text that says "there may be more posts after this" is always white not matter what I try. The thing is I've looked at every property (literally for hours) that I can think of showing white text and cannot find it. It's as if I'm overriding it somewhere.
Be nice if you highlighted the white part so we can see which alert it is
 

TheGroove

Member
Here is what it looks like when I highlight it vs without highlight. The text "replied to the thread" and "there may be more posts after this" is white, I cannot change this for the life of me.

Greenshot 2020-10-26 09.07.49.png
Greenshot 2020-10-26 09.08.09.png
 

Brogan

XenForo moderator
Staff member
Just style the additional elements - possibly contentRow-main.

The post I linked to explains in detail how to identify and target elements.
 

TheGroove

Member
Just style the additional elements - possibly contentRow-main.

The post I linked to explains in detail how to identify and target elements.
I did and came up with what you did (this is a great piece of advice BTW), I also tried with the alert_post_insert template with no luck. At this point if I can even change the background color that would work, I've been able to make every tweak so far (with a ton of digging) but this particular one escapes me.

Code:
[data-template="alert_post_insert"]
{
    .fauxBlockLink-blockLink
    {
        color: #000000 !important;
    }
}
 

Dermot

Active member
maybe play around with..

CSS:
.contentRow-main.contentRow-main--close {
    background-color: red;
}

.alert {
    background-color: red;
}

alert js-alert menu-row menu-row--separated menu-row--clickable{
    background-color: red
}

these three should do the same thing
 
Top