Jump to content

login screen - manuallogin.html file


CarlosLima
Go to solution Solved by Happy2Play,

Recommended Posts

CarlosLima

Hi,

The embyserver 4.3.0.30 update broke several CSS and HTML codes that I used in version 4.2.1.0.

I would like to know how to remove the 4 highlighted fields.

Thank you

5ddfeaecb2583_Screenshot.png

Link to comment
Share on other sites

Happy2Play

Have you tried adding the page id back to the html to allow previous code to work?

 

https://emby.media/community/index.php?/topic/79505-login-page-background-image-43-change/?p=810395

 

Otherwise I believe you have to use the entire element selector.

Edited by Happy2Play
Link to comment
Share on other sites

CarlosLima

I have read the topic 3 or 4 times and I must confess I don't understand how to proceed.

The curious thing is that I also have on a local machine, the same version I use for testing and on it, the changes had the effect.

I even copied the manuallogin.html file to the vps machine and it doesn't work.

 

5de0fbaa7661f_Capturar.png

Link to comment
Share on other sites

  • Solution
Happy2Play

The previous version used a form, now it has its own html page.  But there is no page id so it is harder to target.  So you can attempt to uses the entire selector for the element or add a page id like I linked to.

body > div.mainAnimatedPages.skinBody > div:nth-child(1) > div > form > h1 {display: none;}
body > div.mainAnimatedPages.skinBody > div:nth-child(1) > div > form > label {display: none;}
body > div.mainAnimatedPages.skinBody > div:nth-child(1) > div > form > button.raised.block.buttonCancel.emby-button {display: none;}
body > div.mainAnimatedPages.skinBody > div:nth-child(1) > div > form > div:nth-child(7) > button.raised.cancel.block.btnForgotPassword.emby-button  {display: none;}

If you add a page id="manualloginPage" to the manuallogin.html then
 
5de974688b8e4_manual.jpg

#manualloginPage h1 {display: none;}
#manualloginPage label.checkboxContainer {display: none;}
#manualloginPage button.raised.block.buttonCancel.emby-button {display: none;}
#manualloginPage button.raised.cancel.block.btnForgotPassword.emby-button {display: none;}
Edited by Happy2Play
  • Like 1
Link to comment
Share on other sites

CarlosLima

Hi, thanks for all your help and patience.

I tried the first alternative. Did not work.

Tried the second alternative, also did not work.

I used these CSS codes in version 4.2 and were working fine.
 

/*Remove o botão Esqueci a Senha na tela de login*/
.btnForgotPassword.emby-button{
visibility: hidden !important;
}

/*Remove o botão Cancelar na tela de login*/
.buttonCancel.emby-button{
visibility: hidden !important;
}

/* #12 - Remove a texto Por favor, Entre na tela de login */
#loginPage h1 {display: none }


/* #13 - Remove a caixa Lembrar de mim */
#loginPage .emby-checkbox-label {display: none;}
Edited by CarlosLima
Link to comment
Share on other sites

CarlosLima

Updating list ...
 

Now I applied these old CSS codes above all others and it worked ...

 

/*Remove o botão Esqueci a Senha na tela de login*/
.btnForgotPassword.emby-button{
visibility: hidden !important;
}

/*Remove o botão Cancelar na tela de login*/
.buttonCancel.emby-button{
visibility: hidden !important;
}

... however, these other codes are not even working at all.

/* Remove a texto Por favor, Entre na tela de login */
#loginPage h1 {display: none }


/* Remove a caixa Lembrar de mim */
#loginPage .emby-checkbox-label {display: none;}

5de279d70d7ee_Capturar.png

Link to comment
Share on other sites

Happy2Play

I guess you could edit the manualllogin.html directly, but everything in post 4 worked for me.

  • Like 1
Link to comment
Share on other sites

CarlosLima

I guess you could edit the manualllogin.html directly, but everything in post 4 worked for me.

 

In that case, I certainly applied this code wrong.

Can you indicate where I should add?

Thank you so much

 

 

5de2d53eaaed0_Capturar.png

Link to comment
Share on other sites

CarlosLima

SORTED OUT

 

I certainly made some mistake with so many attempts.

You are the best. Extremely grateful to you.

Link to comment
Share on other sites

Happy2Play

Here is the manuallogin.html with the code added directly to it, if you are not getting the css to work.

 

<div is="emby-scroller" class="view flex flex-direction-column scrollFrameY flex-grow" data-mousewheel="true" data-horizontal="false" data-centerfocus="card">

    <div class="scrollSlider flex-grow flex-direction-column padded-left padded-right padded-top-page padded-bottom-page">

        <form style="margin:0 auto;">

            <h1 style="text-align: left;margin-top:0; visibility: hidden;">${HeaderPleaseSignIn}</h1>

            <div class="inputContainer">

                <input is="emby-input" class="txtUserName" type="text" id="txtUserName" autocomplete="off" label="${LabelUsername}" required />

            </div>

            <div class="inputContainer">

                <input is="emby-input" class="txtPassword" type="password" id="txtPassword" autocomplete="off" label="${LabelPassword}" />

            </div>

            <label class="checkboxContainer" style="display: none;">

                <input is="emby-checkbox" type="checkbox" class="chkRememberLogin" checked />

                <span>${RememberMe}</span>

            </label>

            <button is="emby-button" type="submit" class="raised block paperSubmit">

                <span>${HeaderSignIn}</span>

            </button>

            <button is="emby-button" type="button" class="raised block buttonCancel" style="display: none;">

                <span>${Cancel}</span>

            </button>

 

            <div style="margin-top:2em;">

                <button is="emby-button" type="button" class="raised cancel block btnForgotPassword" style="display: none;">

                    <span>${HeaderForgotPassword}</span>

                </button>

                <button is="emby-button" type="button" class="raised hide block btnSelectServer">

                    <span>${HeaderChangeServer}</span>

                </button>

                <p class="disclaimer" style="text-align: center; margin-top: 2em;"></p>

            </div>

            <p class="disclaimer hide" style="text-align: center; margin-top: 2em;"></p>

        </form>

    </div>

</div

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

CarlosLima

Here is the manuallogin.html with the code added directly to it, if you are not getting the css to work.

 

 

Hi,

Yes, CSS worked the 4 fields, but taking advantage of your new tip, for embyserver performance, is there any better way to use between the CSS and HTML you created now?

Link to comment
Share on other sites

CarlosLima

... and here is my login screen, thanks for your patience, thanks.

5de2e742d0d3b_Screenshot.png

One more nuisance, it's possible for me to have my "ESQUECI A SENHA / Forgot Password" link look like the "ENTRAR / Sign In" button, with a gray background like a button, or even turn my link into a button, to follow the EmbyServer standard?

Edited by CarlosLima
Link to comment
Share on other sites

Happy2Play

... and here is my login screen, thanks for your patience, thanks.

 

5de2e742d0d3b_Screenshot.png

 

One more nuisance, it's possible for me to have my "ESQUECI A SENHA / Forgot Password" link look like the "ENTRAR / Sign In" button, with a gray background like a button, or even turn my link into a button, to follow the EmbyServer standard?

 

Don't know what code you used to create your link, but see how I changed the Emby link on the Dashboard to a button.  Changed button-link to raised block.

 

5de2f3ab85e9d_button.jpg

  • Like 1
Link to comment
Share on other sites

Happy2Play

Hi,

Yes, CSS worked the 4 fields, but taking advantage of your new tip, for embyserver performance, is there any better way to use between the CSS and HTML you created now?

As for performance I don't think there would be much difference.  Custom css just requires less manual intervention with every update.  With code evolving it is just a matter on knowing all the changes you have to maintain.

  • Like 1
Link to comment
Share on other sites

CarlosLima

Don't know what code you used to create your link, but see how I changed the Emby link on the Dashboard to a button.  Changed button-link to raised block.

 

5de2f3ab85e9d_button.jpg

 

 

5de307842f858_Screenshot2.png

 

Extremely grateful for all your help.

Thank you very much.

 

Link to comment
Share on other sites

CarlosLima

As for performance I don't think there would be much difference.  Custom css just requires less manual intervention with every update.  With code evolving it is just a matter on knowing all the changes you have to maintain.

 

I understand perfectly. I will always keep CSS when possible, in fact it provides less manual work. Thank you.

Link to comment
Share on other sites

As for performance I don't think there would be much difference. Custom css just requires less manual intervention with every update. With code evolving it is just a matter on knowing all the changes you have to maintain.

Carlos,

 

I thought I might mention, that inorder to change some of the styles with the new layout I have had to use both intersection Observer and mutationObserver to change items and lazy load changes.

 

I use the index.html to add script changes and I only use custom css to do global style changes to items that can be affected: buttons, lists, etc.

 

If you really wanted to make changes to layout then I would use a program like visual studio code, to open the entire web app solution and make changes that way.

 

Do a solution wide search and replace for '!important', and look for html pages like 'loginPage', and library layouts and give them IDs inorder to target them easier.

 

But again, using JavaScript to target elements with Observers.

 

 

Get to know the different buttons styles, paperList style that emby uses, and you can make changes that look like they fit.

 

Using the 'raised' property in the buttons class will give you the look you want.

 

Also, embys css now uses global variables for themes under 'root:' which changes the entire color scheme.

Edited by chef
Link to comment
Share on other sites

CarlosLima

Hi, reading other topics, I understand that it is no longer working to apply a background image on the login screen and the alternative found seems not appropriate.

In this case, is it possible to use CSS only to change the background color to full black (# 000000) ?

Link to comment
Share on other sites

Happy2Play

Hi, reading other topics, I understand that it is no longer working to apply a background image on the login screen and the alternative found seems not appropriate.

 

In this case, is it possible to use CSS only to change the background color to full black (# 000000) ?

 

Without a page id, I don't see a way to target it.  So either add a page id or apply directly to the page html.

Link to comment
Share on other sites

Hi, reading other topics, I understand that it is no longer working to apply a background image on the login screen and the alternative found seems not appropriate.

 

 

  It IS working. Like Happ2Play said  adding a page id in the login.html and the manuallogin.html  works fine for me. Ok you have   to do it manually every server update and I understand that it is  annoying in a beta cycle.

Link to comment
Share on other sites

  • 2 months later...
Moisés Oliveira

Pode passar codigo 

I understand perfectly. I will always keep CSS when possible, in fact it provides less manual work. Thank you.

 

5de307842f858_Screenshot2.png

 

Extremely grateful for all your help.
Thank you very much.
 

Link to comment
Share on other sites

Moisés Oliveira

Como fazer para alterar o tamanho dos capos 

 

 

5de307842f858_Screenshot2.png

 

Extremamente grato por toda a sua ajuda.
Muito obrigado.
 

Edited by vannessa
Link to comment
Share on other sites

  • 2 months later...
KalashDOG

Hi,

 

The embyserver 4.3.0.30 update broke several CSS and HTML codes that I used in version 4.2.1.0.

 

I would like to know how to remove the 4 highlighted fields.

 

Thank you

 

5ddfeaecb2583_Screenshot.png

 

Qual comando coloco ou qual arquivo edito para colocar um LOGO abaixo do campos de login? 

e como funciona esse "Pedir teste gratuito"? 

pretendo colocar isso no meu.

Link to comment
Share on other sites

CarlosLima

Oi, sobre o último botão é um link que vai para uma página determinada.
A edição é no arquivo manuallogin.html. Basta adicionar o código abaixo alterando os campos, URL_PAGE, XXXXXX e TEXT_BUTTON

<p><center><a is="emby-linkbutton" class="raised block emby-button" href="URL_PAGE" style="text-decoration: none;color: #XXXXXX;" target="_self"><font size=3>TEXT_BUTTON</font></a></center></p>

Sobre o "logo abaixo do login" eu não o utilizo mais e sinceramente não lembro o código, mas você o encontrará aqui no fórum com certeza.

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
×
×
  • Create New...