Jump to content


Photo

CSS Branding Examples?


  • Please log in to reply
34 replies to this topic

#1 pir8radio OFFLINE  

pir8radio

    NGINX

  • Members
  • 2901 posts
  • Local time: 03:27 PM
  • LocationChicago

Posted 07 May 2015 - 07:22 PM

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, 07 May 2015 - 07:24 PM.

  • Jambercob, Poptartica and supermau like this

#2 Koleckai Silvestri OFFLINE  

Koleckai Silvestri

    Advanced Member

  • Alpha Testers
  • 3735 posts
  • Local time: 01:27 PM

Posted 07 May 2015 - 07:36 PM

http://emby.media/co...web-client-css/

 

http://emby.media/co...ew-server-beta/


  • Angelblue05 likes this

#3 pir8radio OFFLINE  

pir8radio

    NGINX

  • Members
  • 2901 posts
  • Local time: 03:27 PM
  • LocationChicago

Posted 07 May 2015 - 08:14 PM

:o   I didnt know there was already a section...   Well can a forum admin move this post to the proper forum please.

 



#4 bigjohn OFFLINE  

bigjohn

    Edge Case

  • Administrators
  • 972 posts
  • Local time: 03:27 PM
  • LocationArkansas, USA

Posted 07 May 2015 - 09:49 PM

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

 

Sure thing.

 

Nice job with your customization.


  • Angelblue05 likes this

#5 Jambercob OFFLINE  

Jambercob

    Advanced Member

  • Members
  • 58 posts
  • Local time: 04:27 PM
  • LocationColumbus, OH

Posted 13 April 2017 - 02:03 PM

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, 11 November 2017 - 10:47 PM.


#6 CarlosLima OFFLINE  

CarlosLima

    Advanced Member

  • Members
  • 465 posts
  • Local time: 05:27 PM
  • LocationSao Paulo

Posted 13 April 2017 - 04:24 PM

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

 

58efde7a5da5c_telaloginhp.png


  • Jambercob, romdawg, bh7net and 4 others like this

#7 Luke OFFLINE  

Luke

    System Architect

  • Administrators
  • 136163 posts
  • Local time: 04:27 PM

Posted 13 April 2017 - 04:24 PM

Bravo !


  • CarlosLima likes this

#8 pir8radio OFFLINE  

pir8radio

    NGINX

  • Members
  • 2901 posts
  • Local time: 03:27 PM
  • LocationChicago

Posted 13 April 2017 - 08:33 PM

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, 13 April 2017 - 08:47 PM.


#9 Happy2Play OFFLINE  

Happy2Play

    Trial and Error

  • Moderators
  • 15365 posts
  • Local time: 01:27 PM
  • LocationWashington State

Posted 13 April 2017 - 10:22 PM

Why not this @pir8radio?

#loginPage h1 {display: none }

  • Jambercob and pir8radio like this

#10 pir8radio OFFLINE  

pir8radio

    NGINX

  • Members
  • 2901 posts
  • Local time: 03:27 PM
  • LocationChicago

Posted 13 April 2017 - 10:49 PM

 

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, 13 April 2017 - 10:54 PM.


#11 Happy2Play OFFLINE  

Happy2Play

    Trial and Error

  • Moderators
  • 15365 posts
  • Local time: 01:27 PM
  • LocationWashington State

Posted 13 April 2017 - 10:57 PM

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.



#12 Jambercob OFFLINE  

Jambercob

    Advanced Member

  • Members
  • 58 posts
  • Local time: 04:27 PM
  • LocationColumbus, OH

Posted 13 April 2017 - 11:35 PM

 

Why not this @pir8radio?

#loginPage h1 {display: none }

That worked perfectly! Thank you very much Happy2Play  :D



#13 hjason7812 OFFLINE  

hjason7812

    Advanced Member

  • Members
  • 253 posts
  • Local time: 09:27 PM

Posted 11 August 2017 - 09:10 PM

 

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



#14 pir8radio OFFLINE  

pir8radio

    NGINX

  • Members
  • 2901 posts
  • Local time: 03:27 PM
  • LocationChicago

Posted 11 August 2017 - 10:22 PM

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



#15 RafaG OFFLINE  

RafaG

    Advanced Member

  • Members
  • 43 posts
  • Local time: 10:27 PM

Posted 01 January 2018 - 02:56 PM

 

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


#16 CarlosLima OFFLINE  

CarlosLima

    Advanced Member

  • Members
  • 465 posts
  • Local time: 05:27 PM
  • LocationSao Paulo

Posted 05 March 2018 - 07:41 PM

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

Attached Files


Edited by CarlosLima, 05 March 2018 - 07:53 PM.

  • romdawg, Leandro221 and BillOatman like this

#17 lassais OFFLINE  

lassais

    Newbie

  • Members
  • 1 posts
  • Local time: 05:27 PM
  • LocationBarbacena - MG

Posted 05 March 2018 - 08:39 PM

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



#18 EdsonPitta OFFLINE  

EdsonPitta

    Newbie

  • Members
  • 1 posts
  • Local time: 06:27 PM

Posted 09 May 2018 - 02:52 PM

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



#19 Leandro221 OFFLINE  

Leandro221

    Newbie

  • Members
  • 7 posts
  • Local time: 06:27 PM

Posted 14 May 2018 - 12:14 AM

 

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!

 



#20 CarlosLima OFFLINE  

CarlosLima

    Advanced Member

  • Members
  • 465 posts
  • Local time: 05:27 PM
  • LocationSao Paulo

Posted 14 May 2018 - 11:03 AM

@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 


  • vannessa likes this




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users