Post Notice Visibility Control

Theme component
,
1
:information_source: Summary Customize visibility and style of post notices by type and age
:hammer_and_wrench: Repository GitHub - moin-Jana/post-notice-visibility-control: Customize visibility and style of post notices by type and age
:question: Install Guide How to install a theme or theme component
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

Install this theme component

This component lets you control how each type of post notice (new user, returning user, and official) appears on new and older posts. You can choose whether they are highlighted, visible, or hidden - and set custom highlight colors independently for each type.

The screenshots show examples of how the different types can look on new posts (left) and older posts (right):

On the left you can see an official notice with a red background, a new user notice with a green background and a returning user notice with a gray background. On the right the official notice still has a red background, the new user notice doesn't have a background and the returning user notice is not visible
On the left you can see an official notice with a red background, a new user notice with a green background and a returning user notice with a gray background. On the right the official notice still has a red background, the new user notice doesn't have a background and the returning user notice is not visible1372×746 39.7 KB

Configuration example 1 
"custom_new": "highlighted"
"custom_old": "highlighted"
"custom_highlight_color": "var(--danger-low-mid)"

"new_user_new": "highlighted"
"new_user_old": "visible"
"new_user_highlight_color": "var(--success-low)"

"returning_user_new": "highlighted"
"returning_user_old": "hidden"
"returning_user_highlight_color": "var(--primary-200)"

On the left you can see an official notice with a golden background, a new user notice without a background and a returning user notice without a background. On the right the official notice doesn't have a background, the new user notice and the returning user notice are not visible
On the left you can see an official notice with a golden background, a new user notice without a background and a returning user notice without a background. On the right the official notice doesn't have a background, the new user notice and the returning user notice are not visible1372×746 42 KB

Configuration example 2 
"custom_new": "highlighted"
"custom_old": "visible"
"custom_highlight_color": "var(--gold)"

"new_user_new": "visible"
"new_user_old": "hidden"
"new_user_highlight_color": "var(--tertiary-low)"

"returning_user_new": "visible"
"returning_user_old": "hidden"
"returning_user_highlight_color": "var(--tertiary-low)"

For each notice type and age combination, you can choose whether the notice should be highlighted, visible (without highlight), or hidden. If you choose “highlighted”, you can optionally define a custom background color.

I recommend using a color variable like var(--quaternary-low). These variables reference colors from the active color palette, so they automatically adapt when a user switches between different palettes (for example, light and dark mode). This makes them a more flexible option than hardcoded colors. While most color palettes show only a few base colors, Discourse generates shades of these colors that you can use as well. You can explore many of the available color variables using the styleguide, which you can enable via the styleguide enabled site setting. Alternatively, you can inspect your site in the browser - open developer tools, go to the Styles tab, and scroll to the bottom to see all available color variables.

You can also use hex values like #EE8888, RGB values like rgb(255, 200, 200), or named colors like red.

If no color is provided, the component falls back to var(--tertiary-low). The default settings of the component replicate the standard Discourse behavior - so simply enabling it won’t change anything until you configure it.

The number of days after which a post notice is considered “old” is defined by the old post notice days site setting. This applies to all three types of notices.
:warning: Important: The age is based on when the post was created - not when the notice was added.
You can temporarily set the value to 0 to easily preview how notices will appear in their “old” state.

12 Likes
2

Old post notices are no longer rendered in the latest version of Discourse, which means they can’t be styled via CSS. As a result, all _old settings no longer have any effect.

3

With the latest updates to Discourse, the old class which the component used to apply different styles to new and old notices, has been removed. Post notices for new and returning users will now be automatically removed after the old post notice days setting, while official notices remain permanently visible and highlighted.

As a result, this component has become largely obsolete. The only remaining customization options are related to the general color settings for post notices. These can easily be adjusted via CSS, as shown below:

.post-notice.custom {
    background-color: var(--danger-low-mid);
}
.post-notice.new-user {
    background-color: var(--success-low);
}
.post-notice.returning-user {
    background-color: var(--primary-200);
}

If you wish to remove the background highlight for a specific notice type, simply use background-color: unset;

1 Like