+- Jellyfin Forum (https://forum.jellyfin.org)
+-- Forum: Support (https://forum.jellyfin.org/f-support)
+--- Forum: Themes & Styles (https://forum.jellyfin.org/f-themes-styles)
+--- Thread: Customizing Toast Notifications Position and Duration in Docker Container (/t-customizing-toast-notifications-position-and-duration-in-docker-container)
Customizing Toast Notifications Position and Duration in Docker Container - BoBBer446 - 2024-01-17
Hello everyone,
I'm currently running Jellyfin in a Docker container and was wondering if there's a way to customize the position and behavior of toast notifications. Specifically, I'm looking to center the notifications on the screen with the option for users to click them away or adjust the display duration for better visibility and user interaction. Any guidance or tips on achieving this within the Docker environment would be greatly appreciated.
Thank you in advance for your help!
RE: Customizing Toast Notifications Position and Duration in Docker Container - tmsrxzar - 2024-01-17
these are independent of docker or server; need to know what client(s) are being used
i assume custom CSS would be used but this only works on clients that use the web interface (jellyfin mp/jellyfin web)
RE: Customizing Toast Notifications Position and Duration in Docker Container - BoBBer446 - 2024-01-17
I wanted to discuss the customization of toast notifications across various clients. Specifically, when my child or any user is watching on a tablet or laptop. In my case, the child is using a laptop.
I've managed to achieve a centered toast notification using custom CSS in the web interface settings like so:
css
.toastVisible {
position: fixed !important; /* Fixed position */
top: 50% !important; /* Vertically centered */
left: 50% !important; /* Horizontally centered */
transform: translate(-50%, -50%) !important; /* Offset for the exact center */
z-index: 100 !important; /* Ensures the toast is above other elements, 1000 seems too high */
/* The following styles are optional to enhance the toast's appearance */
background-color: #303030 !important; /* Dark background */
color: #ffffff !important; /* Light text */
border: 1px solid #000 !important; /* Black border */
padding: 10px !important; /* Padding */
box-shadow: 0 0 10px rgba(0,0,0,0.5) !important; /* Shadow for better contrast */
text-align: center !important; /* Centered text */
max-width: 300px !important; /* Maximum width of the toast */
min-width: 150px !important; /* Minimum width of the toast */
word-wrap: break-word !important; /* Breaks the text if it's too long */
}
This method works, but it seems quite fragile. For instance, changing the border to 5px red occasionally causes the notification not to appear at all. However, the above code works for the time being.
My question to the community is: has anyone found a more robust solution for customizing the position and appearance of toast notifications that works across all clients, not just the web-based ones? Any suggestions or shared experiences would be greatly appreciated.
Best regards