Jump to content

CSS Branding Examples?


pir8radio

Recommended Posts

pir8radio

I wanted to start a thread to see what other Emby users are doing with the "Branding" settings...

 

Below are the things I have in place, first and second items hide the Emby logo..   :D  The third moves the manual login page down a bit so I can squeeze my own logo in..   The fourth item injects my logo image as a div background..  I'm sure there are better ways to go  about this, but this worked for me..  At the end of the post is a screenshot of the end result.    What are you guys doing with this feature???

 

.logoLibraryMenuButtonText {
  display: none;
}
img[src*=css/images/mblogoicon.png] {
    display: none;
}
#loginPage {
    padding-top: 30px;
}
#loginPage:before {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    top: 15px;
    content: " ";
    background: url(URLTOIMAGE.png);
    background-size: 100% 100%;
    width: 240px;
    height: 52px;
}
 
554bf39df16ac_Capture.png
Edited by pir8radio
  • Like 3
Link to comment
Share on other sites

Well can a forum admin move this post to the proper forum please.

 

Sure thing.

 

Nice job with your customization.

  • Like 1
Link to comment
Share on other sites

  • 1 year later...
Jambercob

I actually love this code. Any chance you know how to hide the Please Sign In? I know I could make the image smaller and have it displayed below the logo but would rather just hide it. Thanks!

 

top-logo-login.PNG

Edited by Jambercob
Link to comment
Share on other sites

CarlosLima

Here's my custom login page. If administrators allow, I can share my CSS code.

 

58efde7a5da5c_telaloginhp.png

  • Like 8
  • Thanks 1
Link to comment
Share on other sites

pir8radio

I actually love this code. Any chance you know how to hide the Please Sign In? I know I could make the image smaller and have it displayed below the logo but would rather just hide it. Thanks!

 

no but you should be able to cover it up, I have not tried this but try adding line in red:

You might also have to edit your logo to have a solid background instead of the transparent one you use today. 

 

#loginPage:before {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    top: 15px;
    content: " ";
    background: url(URLTOIMAGE.png);
    background-size: 100% 100%;
    width: 240px;
    height: 52px;
    z-index: 50;
}
Edited by pir8radio
Link to comment
Share on other sites

pir8radio

 

Why not this @@pir8radio?

#loginPage h1 {display: none }

 

There you go, I guess Yes you can lol...   I was thinking there were more than one h1 tags but i guess not...  Good call. 

Edited by pir8radio
Link to comment
Share on other sites

Happy2Play

There you go, I guess Yes you can lol...   I was thinking there were more than one h1 tags but i guess not...  Good call. 

 

That only targets the login page.  So no worries about h1 anywhere else.

Link to comment
Share on other sites

  • 3 months later...
hjason7812

 

I wanted to start a thread to see what other Emby users are doing with the "Branding" settings...

 

Below are the things I have in place, first and second items hide the Emby logo..   :D  The third moves the manual login page down a bit so I can squeeze my own logo in..   The fourth item injects my logo image as a div background..  I'm sure there are better ways to go  about this, but this worked for me..  At the end of the post is a screenshot of the end result.    What are you guys doing with this feature???

 

.logoLibraryMenuButtonText {
  display: none;
}
img[src*=css/images/mblogoicon.png] {
    display: none;
}
#loginPage {
    padding-top: 30px;
}
#loginPage:before {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    top: 15px;
    content: " ";
    background: url(URLTOIMAGE.png);
    background-size: 100% 100%;
    width: 240px;
    height: 52px;
}
 
554bf39df16ac_Capture.png

 

 

Could you make me one of these except with my logo?

I am not a coder so i don't know where to begin.

Thanks

Link to comment
Share on other sites

pir8radio

Could you make me one of these except with my logo?

I am not a coder so i don't know where to begin.

Thanks

 

you just put all of that in the CSS section of emby, then change the "background: url(URLTOIMAGE.png);" to the url of your logo image like "background: url(https://imgbb.com/image.jpg);"

Link to comment
Share on other sites

  • 4 months later...

 

Why not this @@pir8radio?

#loginPage h1 {display: none }

 

 

I don't have any knowledge about CCS code and I've use this way to hide the message from login screen but display-none "colapse" rest of the elements of the page. I've trying another approach that work better for me:


#loginPage h1 {  visibility: hidden; }
Link to comment
Share on other sites

  • 2 months later...
CarlosLima

Hello everyone,

This image is from my current custom login screen.

I leave the CSS code to be useful to some.

I remember the need to change the link in the image.

I'm available for any questions.

 

5a9dd6a79e59a_Capturar.jpg

/* Custom login screen */
.logoLibraryMenuButtonText {
  display: none;
}

.imgLogoIcon {
    display: none;
}

img[src*="css/images/mblogoicon.png"] {
    display: none;
}
#loginPage {
    padding-top: 100px;
}
#loginPage {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    top: 0px;
    content: " ";
    background: url(IMAGE LINK);
    background-size: 100% 100%;
    width: 1920px;
    height: 1080px;
}

post-26813-0-90349100-1520293391_thumb.png

Edited by CarlosLima
  • Like 3
Link to comment
Share on other sites

lassais

Hello Carlos! Would you specifically have this code here? I am looking to change the size of the logo that is in the upper left corner or replace with a centralized image as you apparently did here

 

Here's my custom login page. If administrators allow, I can share my CSS code.

 

58efde7a5da5c_telaloginhp.png

Link to comment
Share on other sites

  • 2 months later...
EdsonPitta

Não consigo alterar minha tela de login, mesmo colocando o código CSS em configurações, alguém poderia me ajudar?

Link to comment
Share on other sites

Leandro221

 

Hello everyone,

This image is from my current custom login screen.

I leave the CSS code to be useful to some.

I remember the need to change the link in the image.

I'm available for any questions.

 

5a9dd6a79e59a_Capturar.jpg

/* Custom login screen */
.logoLibraryMenuButtonText {
  display: none;
}

.imgLogoIcon {
    display: none;
}

img[src*="css/images/mblogoicon.png"] {
    display: none;
}
#loginPage {
    padding-top: 100px;
}
#loginPage {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    top: 0px;
    content: " ";
    background: url(IMAGE LINK);
    background-size: 100% 100%;
    width: 1920px;
    height: 1080px;
}


OLÁ SOU NOVO POR AQUI COMO FAZER ESSAS EDIÇÃO NO EMBY, AGRADECERIA SE ME PASSASSE ALGUMAS DICAS DESDE DE JÁ OBRIGADO!

 

Link to comment
Share on other sites

CarlosLima

@@Leandro221 basta colar o código que postei acima, alterando apenas o endereço url da sua imagem.
Esse código deve ser aplicado em Servidor / Ajustes / Css personalizado 

  • Like 1
Link to comment
Share on other sites

Moisés Oliveira

@@Leandro221 basta colar o código que postei acima, alterando apenas o endereço url da sua imagem.

Esse código deve ser aplicado em Servidor / Ajustes / Css personalizado 

tem como passar como fazer a mudança do icone e fundo

Link to comment
Share on other sites

Moisés Oliveira

@@Leandro221 basta colar o código que postei acima, alterando apenas o endereço url da sua imagem.

Esse código deve ser aplicado em Servidor / Ajustes / Css personalizado 

pode passar passo a passo para mi como personalizar 

Link to comment
Share on other sites

Leandro221

pode passar passo a passo para mi como personalizar 

Eu ainda também não sei estou ha 3 meses tentando fazer isso o que eles fazem, mas sem sucesso, um dia eu aprendo, eu coloco o codigo no css personalizado mas não acontece nada na web page

Link to comment
Share on other sites

CarlosLima

Olá amigos, qual a dúvida que está havendo sobre o código da tela de login????

Link to comment
Share on other sites

Leandro221

Olá amigos, qual a dúvida que está havendo sobre o código da tela de login????

não estou conseguindo fazer nada no CSS, já coloquei o codigo e não funciona!

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