Jellyfin Forum
Help with Custom CSS for an 'Announcement' message to be displayed in top banner? - Printable Version

+- Jellyfin Forum (https://forum.jellyfin.org)
+-- Forum: Support (https://forum.jellyfin.org/f-support)
+--- Forum: General Questions (https://forum.jellyfin.org/f-general-questions)
+--- Thread: Help with Custom CSS for an 'Announcement' message to be displayed in top banner? (/t-help-with-custom-css-for-an-announcement-message-to-be-displayed-in-top-banner)



Help with Custom CSS for an 'Announcement' message to be displayed in top banner? - SimplifyAndAddCoffee - 2023-08-09

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.


RE: Help with Custom CSS for an 'Announcement' message to be displayed in top banner? - xaque - 2023-08-10

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.