Changing the Emby Login screen

[fernsm 2]

We are using Emby as our media streaming server in our school and it works really well, it replaced Microsoft Windows 2008 Streaming Media Server! We are running it on an Ubuntu server, so if we have to edit config files we will need to know the Linux file paths as opposed to Windows.

 

The way it has been setup is that staff and students have a restricted login account with no password, and we use the school's crest as the icon like the screenshot below

 

 

The problem is that staff and students (despite being told) are trying to login manually rather than clicking in the school crest. We then get people phoning IT asking us for the login details. Whilst ideally we would love LDAP/ Active directory integration, I appreciate this is not a priority.

 

We would like to be able to edit the wording on the login page so it's clear that users who only wish to view content should click on the school crest.

 

As a secondary requirement we would also like to remove the Forgot password option because our other login accounts are shared and hidden (need to know basis only) e.g. we have one where users can login to schedule the recording of a TV program (EmbyTV) where it would be inappropriate for users to change the password. Same with the Admin account which is also shared.

 

The simple question is how do we go about customising the layout of the login page?

 

[Happy2Play 8279]

If you users not logging in via Connect, then you can modify everything via CSS.  There is a custom CSS box you enter all the code you want.

 

We would like to be able to edit the wording on the login page so it's clear that users who only wish to view content should click on the school crest.

 

 

 

There is a custom Login Disclaimer box also.

 

Dashboard-Settings-Branding

[fernsm 2]

I found this post https://emby.media/community/index.php?/topic/21146-css-branding-examples/

 

How do I find out the names of the css elements that make up the pages of the Web App? Is this documented somewhere?

[bfir3 113]

This will hide the forgot password button:

.btnForgotPassword {
    display: none !important;
}

[Happy2Play 8279]

I found this post https://emby.media/community/index.php?/topic/21146-css-branding-examples/

 

How do I find out the names of the css elements that make up the pages of the Web App? Is this documented somewhere?

 

I just use the console (F12) in Chrome, or any browser.  But primary development is done on Chrome.

[fernsm 2]

Thanks to bfir3 I've managed to remove the forgot password button :-) and thanks to Happy2Play I can see the code used to construct the page in Chrome console and established that the .visualLoginForm is the element I need (I did this by setting the display to none which I guess is one way of testing elements although not ideal) but I've not worked out how to change the text !

 

 

I think the issue is I do not understand how the Branding option in Emby interacts with the css on the website. I assume there is some sort of substitution being used, however and explanation of how this works for those of us who are not web developers would be really useful along with some common examples of removing elements, adding elements and changing text. Emby is easy to configure, but this is one area where documentation is really needed.

 

I've already discovered that entering:

 

.visualLoginForm {
    display: none !important;
}

 

completely wipes the login buttons :-), not something you really want to do! However, if you do make such an mistake, and we all do from time to time, it would be really useful to know how to edit the back-end files to remove this sort of coding mistake which would prevent you from login in to Emby.

 

Like all things in IT, when you know how something works making changes is generally it's quite simple. But if you don't know, making changes can be a complete nightmare and at times dangerous without guidance.