2024-01-17, 08:03 PM
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:
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
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