Jump to content

Notice box that can be closed


Jambercob
 Share

Go to solution Solved by Happy2Play,

Recommended Posts

Jambercob

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;
}

 

alert-box.JPG

Edited by Jambercob
  • Like 1
Link to comment
Share on other sites

  • 1 month later...
carlosmi

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

Link to comment
Share on other sites

  • 1 year later...
Rafick

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;
}

 

alert-box.JPG

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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

Edited by Rafick
Link to comment
Share on other sites

  • Solution
Happy2Play

@@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.

 

5ca547619a45f_page.jpg

 

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>

5ca54826f2055_lp.jpg

 

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.

 

5ca54c0d67603_home.jpg

5ca54c1d141f4_home2.jpg

Edited by Happy2Play
  • Like 1
Link to comment
Share on other sites

Jambercob

@@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  ;)

Link to comment
Share on other sites

  • 2 months later...
Shidapu

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!

Link to comment
Share on other sites

  • 2 years later...
CarlosLima

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

 

 

download111.png

Edited by CarlosLima
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...