XF 2.3 Changing color of specific nodes, without overriding style

F

flipglippy

New member
I was thinking it would be good to be able to clearly visually mark all the moderator's private forums, so that there's little chance of accidentally posting moderation-related discussion in public areas.

My first thought was to use the Override user style choice option on the category which includes all the moderation forums. After experimenting with the Style Properties of the custom style, I got this. Notice the blue background for the user avatar area. On public forums, it would be white.

Screenshot from 2026-02-16 12-39-04.webp

The problem is that some moderators on the forum, by default, might use a "Dark mode" user style or one of the other custom styles we have, and as far as I can tell, Override user style choice would make all users have the same style while they are on a specific forum, which could be quite jarring if they typically have dark mode.

Edit: I realized a forum's user style can have dark mode and light mode colors. But still, some moderators on the forum, by default, might use one of several user styles, and it could be jarring if the whole color scheme of the page changes. I was hoping for only changing one specific element.

Does anyone have any thoughts on a better way to go about this? Ideally, the only thing that would change about the style is the color of one region of the reply box while in a specific node category. Preferably it would be something like the border around the text area, since the avatar area to the left of the reply box, as above, is not visible on mobile. (Though I'm not sure if I could find a color where it would look okay no matter the style. Maybe just a small indicator that appears somewhere around the reply box?)
 
Last edited:
Sort by date Sort by votes
beerForo said:
In the node:
View attachment 334054
Click to expand...
Thank you, I'm aware of that setting.

The reason for my post is that different moderators on the forum use different styles. For example, User A has a user style that makes the whole page a yellow shade, and User B's makes the forum a blue shade. Overriding would make the whole page change color for at least one of the users, which isn't ideal.

beerForo said:
For the record, never seen this happen.
Click to expand...
It's happened a couple times for us, though not with anything very important. I think it'd be a good preventative, in addition to just being careful, to be able to clearly tell whether or not a user is in a staff area before pressing Post.
 
Upvote 0 Downvote
Pretty cool. The floating notice seems to get the job done. And it can be set to only be visible on specific forums.

I just added some custom CSS in extra.less after setting a custom CSS name in the notice settings:
CSS: 
.modAreaNotice {
    background-color: #5a66ed;
    text-align: center;
    color: white;
    font-weight: bold;
    width: 50%;
}

1771474376745.webp
 
Upvote 0 Downvote
Another option, based on a hint from this page, is to set CSS for a specific element based on the <html> tag containing a specific node ID.

For example, this makes the reply button green on two specific forums, 2 and 5:
CSS: 
[data-container-key="node-2"],
[data-container-key="node-5"]
{
  .button--icon--reply
  {
    background-color: green;
  }
}

1771475603053.webp

I'm not sure if there's a way to set the CSS to be active for a category of nodes, instead of listing every node individually in the CSS, but that shouldn't be a big deal.
 
Last edited:
Upvote 0 Downvote
You must log in or register to reply here.
Back
Top Bottom