Help with Custom CSS for an 'Announcement' message to be displayed in top banner?

[SimplifyAndAddCoffee]

I found a thread with info on how to do this a while back on reddit but it is gone now or I can't find it. 

I want to inject prominent text at the top of the home/library pages e.g. "The Server will be Offline Aug 12-14 for maintenance" etc to notify users of upcoming changes or expected outages. 

How can I accomplish this in the most simple manner (using the Custom CSS Code field in General settings)

EDIT: I figured it out, so here's the answer for anyone else searching for it:

Code:

.skinHeader::after {
    content: "NOTICE: This is your Notice Text. Thank You For Noticing.";
    display: block;
    position: relative;
    background-color: gold;
    color: #000;
    text-align: center;
    padding: 10px 0;
    font-weight: bold;
}

This creates a yellow banner below "Home" and "Favorites" on the main library pages, with black text for your message. Edit text and colors to your liking.

[xaque]

Very nice, I'll definitely be using this in the future if I can work it into the current css I'm using. Cool idea and very useful indeed.

[wayne]

Super cool. Works great with one little issue.
Tha banner is visible in the media player on top of all the footage.
Any ideas?

[daYMAN007]

The solution I cooked up some years ago should still work:
https://www.reddit.com/r/jellyfin/commen..._to_users/

[Klakh]

Thanks so much for this <3

[aichan]

I found a thread with info on how to do this a while back on reddit but it is gone now or I can't find it. 

I want to inject prominent text at the top of the home/library pages e.g. "The Server will be Offline Aug 12-14 for maintenance" etc to notify users of upcoming changes or expected outages. 

How can I accomplish this in the most simple manner (using the Custom CSS Code field in General settings)

EDIT: I figured it out, so here's the answer for anyone else searching for it:

Code:

.skinHeader::after {
    content: "NOTICE: This is your Notice Text. Thank You For Noticing.";
    display: block;
    position: relative;
    background-color: gold;
    color: #000;
    text-align: center;
    padding: 10px 0;
    font-weight: bold;
}

This creates a yellow banner below "Home" and "Favorites" on the main library pages, with black text for your message. Edit text and colors to your liking.

I made my own implementation based on yours (disclaimer: assisted by AI  ): https://gist.github.com/AitorAstorga/668...notice-css
It shows with an animation and a loading bar, and after a preset time in vanishes. It looks a bit weird when the loading bar finishes but it's so quick I don't mind it that much. Hope its of use for someone