XF 2.3 How to adjust Alert background colors?

[KensonPlays]

I'm trying to color this background for read alerts, so they're readable. I can't seem to find which of the many sections for style customizations have this setting? Any help?

 

[Old Nick]

Hello

// read color
.menu-row.menu-row--separated {
    background: red;
}

// hover color
.menu-row.menu-row--separated:hover {
    background: blue;
}

// unread color
.menu-row.menu-row--separated.is-unread {
    background: black;
}

 

[KensonPlays]

Hello

// read color
.menu-row.menu-row--separated {
    background: red;
}

// hover color
.menu-row.menu-row--separated:hover {
    background: blue;
}

// unread color
.menu-row.menu-row--separated.is-unread {
    background: black;
}

I can't use the new settings menu to have separate colors for light/dark?

 

[Old Nick]

I can't use the new settings menu to have separate colors for light/dark?

Use XF colour variables...

xenForo Color Palette and Basic Colors: Chart with IDs

Aug 5, 2024

A list of XenForo Style Property colors and their @xf IDs

• Mr Lucky
• basic colors
• XenForo tips & guides [2.x]

 

[KensonPlays]

Use XF colour variables...

xenForo Color Palette and Basic Colors: Chart with IDs

Aug 5, 2024

A list of XenForo Style Property colors and their @xf IDs

• Mr Lucky
• basic colors
• XenForo tips & guides [2.x]

If you didn't read my sig, I'm not a coder, so I wouldn't know how to build that off the top of my head.

 

[Old Nick]

But if you want to set custom colour then use this syntax for alternate style:

XF 2.3 Post in thread 'Custom prefixes'

Jul 1, 2024

You'll typically want to use the .m-colorScheme mixin to target color schemes (light/dark):

.some-class
{
    // normal rules (default color scheme -- light in the default style)

    .m-colorScheme({{ $xf.style.getAlternateStyleType() }},
    {
        // alternate rules (alternate color scheme -- dark in the default style)
    });
}

However you can target specific variations if you want:

.some-class
{
    // normal rules (system or implicit default variation)

    :root[data-variation="alternate"] &
    {
        // alternate rules (explicit alternate variation -- will...

• Jeremy P

• 
• 

 

[Old Nick]

If you didn't read my sig, I'm not a coder, so I wouldn't know how to build that off the top of my head.

Well, what colour you want to use?
I can write the code for you...

 

[KensonPlays]

Well, what colour you want to use?
I can write the code for you...

I have lots of styles for various games the community plays, 9 right now so essentially 18 styles, I guess? Each with a day and night coloration and the same background.

This is the default theme's color palette though. Left being day/light, right being night/dark:

 

[Old Nick]

.menu-row.menu-row--separated {
    // colour for the light variation
    background: #FFFFFF;
    .m-colorScheme({{ $xf.style.getAlternateStyleType() }}, {
        // colour for the dark variation
        background: #000000;
    });
}

 

[Old Nick]

But in my opinion the issue does not comes from the background colour but from the text colour.

 

[KensonPlays]

But in my opinion the issue does not comes from the background colour but from the text colour.

True, I think you can use "color:#000000" if needed for text color though. I have extremely limited knowledge of CSS, and essentially nothing else, but not nearly enough to build something from scratch.

 

[KensonPlays]

.menu-row.menu-row--separated {
    // colour for the light variation
    background: #FFFFFF;
    .m-colorScheme({{ $xf.style.getAlternateStyleType() }}, {
        // colour for the dark variation
        background: #000000;
    });
}

Been busy lately, but I just tried copying and pasting that into extra.less. Ctrl F5 refreshed, no change.

Edit: Finally found the setting after weeks lol.... Style > Popup Menus.

 

[Old Nick]

Been busy lately, but I just tried copying and pasting that into extra.less. Ctrl F5 refreshed, no change.

It works fine



Pop up menus style properties does not change alerts background but menu link background.

 

[KensonPlays]

It works fine

View attachment 309105View attachment 309106

Pop up menus style properties does not change alerts background but menu link background.

View attachment 309107

It seems like it did fix it for me: