sadaruwan12 1 Posted April 24, 2017 Share Posted April 24, 2017 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, 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%; } . Would like to change the default welcome to Emby massage which is displayed on the home screen when a new user signs in. Like to add a Powered By Emby logo and a link to the site on every page as the footer or at the top bar I know my way around CSS but don't know anything about emby's CSS so can some help me please. 1 Link to comment Share on other sites More sharing options...
Swynol 375 Posted April 27, 2017 Share Posted April 27, 2017 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 More sharing options...
Oracle 74 Posted August 3, 2018 Share Posted August 3, 2018 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 More sharing options...
Happy2Play 8139 Posted August 3, 2018 Share Posted August 3, 2018 (edited) 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 August 3, 2018 by Happy2Play 1 Link to comment Share on other sites More sharing options...
30000watts 0 Posted July 11, 2021 Share Posted July 11, 2021 (edited) 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 July 11, 2021 by 30000watts Added linux info Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now