Jump to content

Background login ajuda


Daniel R. Mebs

Recommended Posts

Daniel R. Mebs

Oi @CarlosLima queria saber se vc pode me ajudar. Recentemente comecei a me aventurar nessa área de customização do EMBY e me de parei com alguns problemas

gostaria se vc poderia me ajudar na medida do possível eu não entendo muito de inglês e de HTML e CSS só o básico do básico.

Os problemas são:

* background do login repete na pagina de configuração e na tela de filmes. 

* Gostaria de saber se tem alguma forma de manter os arquivos modificados ou de uma forma eficiente de manter eles atualizados. Pra não ter que refazer o que fiz toda vez que o Emby tiver um Update

Vou mandar umas fotos da customização que fiz.

Desde agradeço, um grande abraço. Daniel R. Mebs

1 Logo.png

2 Tray icon.png

3 Login.png

4 Icon Logo.png

5 icon start.png

6 Icone.png

7 Start Buton.png

8 start.png

9 Mobile icon.jpg

10 Mobile Logo.jpg

11 Mobile Login.jpg

12 Mobile App.jpg

Link to comment
Share on other sites

CarlosLima

Oi Daniel, em português como pediu.
Você não perderá as customização usando o código CSS, apenas uma ou outra podem quebra em atualização do EmbyServer, mas por precaução recomendo guardar o seu código CSS em um arquivo texto.

Já as customização que utilizar códigos HTML, essas sim você perderá todas quando o EmbyServer for atualizado. Nesse caso recomendo que se organize de forma que tenha todas as partes dos arquivos que você faça as modificações, pois será necessário refazer todo o processo em cada uma dos arquivos.
É importante saber que não é recomendado você sobrepor o arquivo em si mas refazer as alterações no arquivo original do novo Emby.

Também existe o fato de algumas coisas mudarem de lugar, ser renomeado ou até deixar de existir, então customizar o Emby é uma tarefa de retrabalho constante.

Com relação ao background que está em duplicidade, você precisa exibir o código que está usando acompanhando de imagens, para mais fácil compreensão e consequente ajuda.

Link to comment
Share on other sites

Happy2Play
1 hour ago, Daniel R. Mebs said:

image.png.8202272e31429d2987aa660e48fcd319.png

Don't really under stand what all the images in first post are trying to show.

But this code is not targeted so it applies everywhere.  Since Emby has removed most pageids you have to be more creative.

So something like this.

.flex-direction-column.scrollFrameY.flex-grow.emby-scroller.page.scrollY:not(.skinBody-withFullDrawer .page, .itemView) {
	background: url(https://imgur.com/eGfYBvk.jpg);
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center;
}

Don't really see a way to exclude settings.html (user icon).

 

Link to comment
Share on other sites

Daniel R. Mebs

@Happy2PlayI would like the background to be unique to the login screen. I don't know if you understood what I meant, I'm doing this text via google translator

Link to comment
Share on other sites

Happy2Play
Just now, Daniel R. Mebs said:

@Happy2PlayI would like the background to be unique to the login screen. I don't know if you understood what I meant, I'm doing this text via google translator

That is what that code more less does, it excludes that custom background from item view and dashboard.  Otherwise you have to add a pageid to the login.html and manuallogin.html and apply that id in your css code.

 

Link to comment
Share on other sites

Daniel R. Mebs

Now I get it. Thank you very much. The modification to the code line worked. I hadn't noticed. hahah Thaks

Link to comment
Share on other sites

Daniel R. Mebs

@Happy2PlayOnly here still remains the background. This is bad because of the light theme default on a new device

Settings.thumb.jpg.7ee0cb994a95e42fbce28ba840043dd5.jpg

Edited by Daniel R. Mebs
Link to comment
Share on other sites

Happy2Play
1 minute ago, Daniel R. Mebs said:

@Happy2PlayOnly here still remains the background. This is bad because of the light theme 

Settings.thumb.jpg.7ee0cb994a95e42fbce28ba840043dd5.jpg

That is what I mentioned above as I currently do not see a way to exclude settings.html (user icon).  So a different method needs to be found or additional file modification is needed.

Link to comment
Share on other sites

Daniel R. Mebs
27 minutes ago, Happy2Play said:

Isso é o que mencionei acima, pois atualmente não vejo uma maneira de excluir configurações.html (ícone do usuário). Portanto, um método diferente precisa ser encontrado ou é necessário uma modificação adicional do arquivo.

understood. Anyway, thank you very much for your help.

Link to comment
Share on other sites

Happy2Play
12 minutes ago, Daniel R. Mebs said:

understood. Anyway, thank you very much for your help.

As mentioned it is more work requiring update with server update but adding pagid "id="manualloginPage"" to manuallogin.html would resolve the issue.

With the edited html the code would be this, it only applies to that page

#manualloginPage {
	background: url(https://imgur.com/eGfYBvk.jpg);
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center;
}

example showing the edit to manuallogin.html.

Spoiler

<div id="manualloginPage" 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;">${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">
                <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">
                <span>${Cancel}</span>
            </button>


            <div style="margin-top:2em;">
                <button is="emby-button" type="button" class="raised cancel block btnForgotPassword">
                    <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>

        </form>
    </div>
</div>

 

Edited by Happy2Play
Link to comment
Share on other sites

Daniel R. Mebs
55 minutes ago, Happy2Play said:

As mentioned it is more work requiring update with server update but adding pagid "id="manualloginPage"" to manuallogin.html would resolve the issue.

With the edited html the code would be this, it only applies to that page


#manualloginPage {
	background: url(https://imgur.com/eGfYBvk.jpg);
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center;
}

example showing the edit to manuallogin.html.

  Hide contents

<div id="manualloginPage" 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;">${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">
                <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">
                <span>${Cancel}</span>
            </button>


            <div style="margin-top:2em;">
                <button is="emby-button" type="button" class="raised cancel block btnForgotPassword">
                    <span>${HeaderForgotPassword}</span>
                </button>

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

<span>${HeaderChangeServer}</span><>/button>

<p class="disclaimer" estilo="text-align: center; margem-topo: 2em;"
></p></div>


 

 

unfortunately it didn't work. But it's okay. Thanks for everything. 😄

Link to comment
Share on other sites

Happy2Play
5 minutes ago, Daniel R. Mebs said:

unfortunately it didn't work. But it's okay. Thanks for everything. 😄

Did you clear your browser cache, but with the html edit and that css I only get the backdrop on the manuallogin page (no where else).

image.thumb.png.490e941a7232668d0fc7b94df17849e6.png

image.thumb.png.645773bace3d37dff12e1c1e409feb46.png

Edited by Happy2Play
Link to comment
Share on other sites

Daniel R. Mebs
7 minutes ago, Happy2Play said:

Você limpou o cache do seu navegador, mas com a edição html e esse css eu só recebo o pano de fundo na página de manulogina manual (não onde mais).

image.thumb.png.490e941a7232668d0fc7b94df17849e6.png

image.thumb.png.645773bace3d37dff12e1c1e409feb46.png

Yes! It worked. thanks man. For all your help.

Edited by Daniel R. Mebs
  • Like 1
Link to comment
Share on other sites

Happy2Play
13 minutes ago, Daniel R. Mebs said:

can use in url: /web/modules/themes/Netflix.fw.png work?

Have you tried it?

#manualloginPage {
	background: url(/web/modules/themes/Netflix.fw.png);
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center;
}

 

Link to comment
Share on other sites

Daniel R. Mebs
7 minutes ago, Happy2Play said:

Have you tried it?




#manualloginPage {
	background: url(/web/modules/themes/Netflix.fw.png);
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center;
}

 

I just tested it. It worked. Thanks man. You are awesome.

Edited by Daniel R. Mebs
Link to comment
Share on other sites

Happy2Play
Just now, Daniel R. Mebs said:
2 minutes ago, Happy2Play said:

Have you tried it?



#manualloginPage {
	background: url(/web/modules/themes/Netflix.fw.png);
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center;
}

 

Expand  

Yes

Seems to work for me as I tested adding the online url used previously and naming it custom.jpg

#manualloginPage {
	background:url(/web/modules/themes/custom.jpg);
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center;
}

image.png.6d93096cebf685ed4d17cee052b23166.png

test.thumb.jpg.5f78efb2d79594af0493c2fdc19efa36.jpg

Link to comment
Share on other sites

Daniel R. Mebs
3 minutes ago, Happy2Play said:

Parece funcionar para mim como testei adicionar a url on-line usada anteriormente e nomeá-la sob medida.jpg


#manualloginPage {
	background:url(/web/modules/themes/custom.jpg);
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center;
}

image.png.6d93096cebf685ed4d17cee052b23166.png

test.thumb.jpg.5f78efb2d79594af0493c2fdc19efa36.jpg

Yes. Worked. Thanks man for your help. You are awesome. 

Link to comment
Share on other sites

  • 2 months later...

I have the css code, see the pictures but it doesn't work for me because I deleted the cache completely and restarted the server and browser but nothing. ask for an explanation

did I do something wrong ???

ftp.PNG

css.PNG

Link to comment
Share on other sites

Happy2Play
14 minutes ago, Georg22 said:

I have the css code, see the pictures but it doesn't work for me because I deleted the cache completely and restarted the server and browser but nothing. ask for an explanation

did I do something wrong ???

ftp.PNG

css.PNG

https://emby.media/community/index.php?/topic/100704-background-login-ajuda/&do=findComment&comment=1055101

Page IDs were removed a long time ago.  And the only way for the code to work it readding page id so the code only effects that page.

Remember the page id will have to be readded with every server update.

In your case /opt/emby-server/system/dashboard-ui/startup/manullogin.html

Spoiler

<div id="manualloginPage" 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;">${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">
                <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">
                <span>${Cancel}</span>
            </button>


            <div style="margin-top:2em;">
                <button is="emby-button" type="button" class="raised cancel block btnForgotPassword">
                    <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>

        </form>
    </div>
</div>

 

Edited by Happy2Play
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...