Notice box that can be closed

[Jambercob 12]

I have been messing with the main login page a lot the past few nights to tweak a few things and make it more personalized. We wanted to implement an alert box that could be seen but also closed, our purpose for this was to alert when the server might be down for maintenance needs so family and friends don't blow up our phones.

 

I have not yet figured out how to move it from the bottom of the page yet but thought I would share anyways. (Source code came from www.w3schools.com)

 

The following HTML code goes into the Login disclaimer field

 

<div class="alert">   <span class="closebtn" onclick="this.parentElement.style.display='none';">×</span> ATTENTION! The server will be getting much needed physical upgrades Monday the 17th sometime after 6:30pm and will be down for an unspecified amount of time.</div>

 

Here's the CSS portion

 

/* The alert message box */

.alert {

    padding: 20px;

    background-color: #f44336; /* Red */

    color: white;

    margin-bottom: 15px;

}

 

/* The close button */

.closebtn {

    margin-left: 15px;

    color: white;

    font-weight: bold;

    float: right;

    font-size: 22px;

    line-height: 20px;

    cursor: pointer;

    transition: 0.3s;

}

 

/* When moving the mouse over the close button */

.closebtn:hover {

    color: black;

}

 

Edited July 26, 2017 by Jambercob

[carlosmi 0]

Great implementation, im going to put it in my production server.

Also im trying to put it in the home page to show some issues about the media, and add a section in the admin page to change the message/s

 

Thanks

[Rafick 3]

I have been messing with the main login page a lot the past few nights to tweak a few things and make it more personalized. We wanted to implement an alert box that could be seen but also closed, our purpose for this was to alert when the server might be down for maintenance needs so family and friends don't blow up our phones.

 

I have not yet figured out how to move it from the bottom of the page yet but thought I would share anyways. (Source code came from www.w3schools.com)

 

The following HTML code goes into the Login disclaimer field

 

<div class="alert">   <span class="closebtn" onclick="this.parentElement.style.display='none';">×</span> ATTENTION! The server will be getting much needed physical upgrades Monday the 17th sometime after 6:30pm and will be down for an unspecified amount of time.</div>

 

Here's the CSS portion

 

/* The alert message box */

.alert {

    padding: 20px;

    background-color: #f44336; /* Red */

    color: white;

    margin-bottom: 15px;

}

 

/* The close button */

.closebtn {

    margin-left: 15px;

    color: white;

    font-weight: bold;

    float: right;

    font-size: 22px;

    line-height: 20px;

    cursor: pointer;

    transition: 0.3s;

}

 

/* When moving the mouse over the close button */

.closebtn:hover {

    color: black;

}

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Hello, how to do this in V4.0.3.0 of emby

Edited April 3, 2019 by Rafick

[Happy2Play 9140]

@@Rafick

 

Not sure when this changed, but looks like that box is text only now.  Looks like the only way to do this is putting that html code into the login.html in the \system\dashboard-ui folder.

 

Note manually editing any item in the \system folder will need to be applied with every update as the folder is replaced.  

 

​​Location would be a admin preference also.

 

 

I put this code in the login.html

<div class="alert">   <span class="closebtn" onclick="this.parentElement.style.display='none';">×</span> ATTENTION! The server will be getting much needed physical upgrades Monday the 17th sometime after 6:30pm and will be down for an unspecified amount of time.</div>

 

Also added margin-left and margin-right to css.

/* The alert message box */
.alert {
    padding: 20px;
    background-color: #f44336; /* Red */
    color: white;
    margin-bottom: 15px;
    margin-left: 25%;
    margin-right: 25%;
}
 
/* The close button */
.closebtn {
    margin-left: 15px;
    color: white;
    font-weight: bold;
    float: right;
    font-size: 22px;
    line-height: 20px;
    cursor: pointer;
    transition: 0.3s;
}
 
/* When moving the mouse over the close button */
.closebtn:hover {
    color: black;
}

Or place it on the Home Screen (home.html).  And adjust the margin-left and margin right to your liking.

 

Edited April 4, 2019 by Happy2Play

[Rafick 3]

@Happy2Play

Thank you

[Jambercob 12]

@@Happy2Play

 

Thank you for the update! I haven't been maintaining any code for the web app since everyone in my family is using Roku's now 

[Shidapu 14]

This should be by default in Emby.. I get tons of phone calls when stuff acts up. I need this message box asap by default!

[CarlosLima 150]

I agree, having a default alert box in Emby would be great, but thanks to CSS and friends who always collaborate, here's my solution.
So I used the code created by @Happy2Play and customized it to my need, so the box size can be customized for each alert. I chose to use only the homepage to display the alerts, as the messages are only valid for them and I don't see the need to have the alert box on the login screen, which is public.
Thank you for always being willing to help, @Happy2Play

 

 

Edited July 26, 2021 by CarlosLima