Jump to content

How to change emby new user welcome Title


sadaruwan12

Recommended Posts

sadaruwan12

Hello,

 

I'm new to emby just got started using it on 21st of this month. I'm using this magnificent software to create a media library in my office and I would like to customize it give a bit of local feel but I don't want to change the entire ui of the software I like the default setup I just want to do 3 things,

 

  1. Change the emby logo our company logo which I think is can be done using the below code
    /* Image Files */
    h3.libraryMenuButtonText.headerButton img {
      content: url(https://cdn.rawgit.com/BenZuser/Emby-Dark-Themes-Resources/master/images/logos-and-icons/BLUE/logo.png) !important; }
    
    img.imgLogoIcon {
      width: 0;
      height: 0;
      padding: 40px 0 0 131px;
      background: url(https://cdn.rawgit.com/BenZuser/Emby-Dark-Themes-Resources/master/images/logos-and-icons/BLUE/logo.png);
      background-size: 100% 100%; }
    
    h3 img {
      width: 0;
      height: 0;
      padding: 0 0 0 66px;
      background: url(https://cdn.rawgit.com/BenZuser/Emby-Dark-Themes-Resources/master/images/logos-and-icons/BLUE/logo.png);
      background-size: 100% 100%; }
    
    .
  2. Would like to change the default welcome to Emby massage which is displayed on the home screen when a new user signs in.
  3. Like to add a Powered By Emby logo and a link to the site on every page as the footer or at the top bar58fd8d5983ebd_emby.png

I know my way around CSS but don't know anything about emby's CSS so can some help me please.

  • Like 1
Link to comment
Share on other sites

Swynol

so to change the logo on the login page i use

#loginPage:before {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    top: 15px;
    content: " ";
    background: url(https://imgur.com/xxxxxx.png);
    background-size: 100% 100%;
    width: 583px;
    height: 196px;
}

and then to change the little emby icon on the homepage (top left corner)

 

i use 

.imgLogoIcon, .adminDrawerLogo img, #loginPage img.imgLogoIcon, body > div.skinHeader > div > div.primaryIcons > h3 > img {
  content: url(https://imgur.com/xxxxxx.png) !important;
height: 45px !important; }

thats about my limited knowledge of CSS. I'm not sure how you would add a footer as there is no footer there, there will probably be a way to add it to the top bar along side the current emby logo.

Link to comment
Share on other sites

  • 1 year later...
Oracle

How can I incorporate this? I put it in the custom CSS section of my dashboard setting & nadda.

Link to comment
Share on other sites

Happy2Play

How can I incorporate this? I put it in the custom CSS section of my dashboard setting & nadda.

 

How are you connecting to Emby Server?  If by Connect, custom CSS does not work.  Only  local/ddns connections support this customization.

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

  • 2 years later...
30000watts

I could have modded the css I guess. I opted just to download the Emby logo image that was there and just use it's size for the logo I built for myself. After that I just went to Emby-Server\system\dashboard-ui\modules\themes and replaced the emby logo images with my own (light & dark). Leaves the css as the designer intended, and helps ensure your new logo isn't going to look strange or cause odd behavior.

I also changed my favicon which is in Emby-Server\system\dashboard-ui

I realize that other apps and devices use png's as favicons pulled from elsewhere, but we're only connecting to it with browsers, so that doesn't matter to me. If it matters to you, then go to Emby-Server\system\dashboard-ui\images and replace the images there with your logo. You'll need to create a version of your logo to match each size there and ensure you save as png with exactly the same file name.

I suggest keeping a backup of the original images in a folder somewhere as well. In the future should you decide to change you logo, you'll have all the sizes and files names you need.

___________________________________________________________________________________________________

If you're running Emby on a linux machine, you can open the terminal and go to: cd /opt/Emby-Server/system/dashboard-ui/modules/themes
Then the same process as described above.
you'll need to have superuser privileges to delete and add images though so to delete: sudo rm logowhite.png

To add the images, i was lazy and just uploaded them to one of my webservers and used: sudo wget https://the-url-of-your-logo

------------------------------------------------------------------------------------------------------------------------------------------------------------------

If you're connecting to Emby with browsers like we are, then you may have to empty the cache by holding down ctrl and pressing F5 before your spiffy new logo will appear.

Once I got my logo changed, I headed to videobolt to make some quick nice spiffy intros to play before movies. Once I made my 1st one, I realized the size of my logo was too small and looked bad. I went to PhotoEnlarger which is a free site that uses AI to increase the resolution of your image. Made some sweet magic after that.

cheers 🍻

Edited by 30000watts
Added linux info
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...