Happy2Play 8144 Posted February 12, 2020 Share Posted February 12, 2020 And for the stable version? Something like this. input.emby-checkbox:checked+span+span+.checkboxOutline .checkboxIcon-checked {background-color: #4285F4; } input.emby-checkbox:checked+span+span+.checkboxOutline {border-color: #4285F4; } 1 Link to comment Share on other sites More sharing options...
Emby Tower 33 Posted February 13, 2020 Share Posted February 13, 2020 Thanks a lot! Is it possible to make all the green elements in Emby Server blue like this? Link to comment Share on other sites More sharing options...
Happy2Play 8144 Posted February 13, 2020 Share Posted February 13, 2020 Thanks a lot! Is it possible to make all the green elements in Emby Server blue like this? Yes it was done here. https://emby.media/community/index.php?/topic/28743-emby-dark-themes-in-different-accent-colors/ But it is dated and no longer updated. So there would have to be updated to the current code for 4.3.1.0, but will change some more in 4.4.x.x. I currently use a bat file and a program called Find and Replace (fnr) and replace everything green with blue (#0C57D6) FNR program and Emby path dependant "C:\Users\Media\Desktop\Script\fnr.exe" --cl --dir "Y:\Emby-Server\system\dashboard-ui" --fileMask "*.*" --excludeFileMask "*.dll, *.exe,*.png, *.gif, *.jpg, *.woff, *.woff2, *.ico" --includeSubDirectories --useRegEx --find ":green" --replace ":#0C57D6" "C:\Users\Media\Desktop\Script\fnr.exe" --cl --dir "Y:\Emby-Server\system\dashboard-ui" --fileMask "*.*" --excludeFileMask "*.dll, *.exe,*.png, *.gif, *.jpg, *.woff, *.woff2, *.ico" --includeSubDirectories --useRegEx --find "#52b54b|#2bc253|#54f054|#5EC157|#009F00|#00B32C" --replace "#0C57D6" "C:\Users\Media\Desktop\Script\fnr.exe" --cl --dir "Y:\Emby-Server\system\dashboard-ui" --fileMask "*.css" --includeSubDirectories --find "rgba(82,181,75" --replace "rgba(12,87,214" "C:\Users\Media\Desktop\Script\fnr.exe" --cl --dir "Y:\Emby-Server\system\dashboard-ui" --fileMask "*.css" --includeSubDirectories --find "rgba(82, 181, 75" --replace "rgba(12, 87, 214" as for logos you can find them here and use them via url as you can see in the base code https://github.com/BenZuser/Emby-Dark-Themes-Resources/tree/master/images/logos-and-icons But I just maintain a local copy and replace the image with every update in my bat file. copy Y:\Emby-Server\logowhite.png Y:\Emby-Server\system\dashboard-ui\bower_components\emby-webcomponents\themes\logowhite.png /y Not necessarily pretty but does what I need. 2 Link to comment Share on other sites More sharing options...
PenkethBoy 2063 Posted February 16, 2020 Share Posted February 16, 2020 @@Happy2Play the latest beta .14 has stopped a couple of things working - could you give me a idea what to change please /*Remove Scroll from - Seasons*/ #childrenCollapsible div.scrollSlider { flex-wrap: wrap; padding-right: 2.5%; padding-left: 2.5%; } #childrenCollapsible .scrollbuttoncontainer-right {display: none; } and /* ----- Smaller Movie/Series Cast Pictures Beta Server----*/ .card.portraitCard.personCard{width: 9.5em !important; height: auto;} i had a quick play but with no luck Thanks Link to comment Share on other sites More sharing options...
Happy2Play 8144 Posted February 16, 2020 Share Posted February 16, 2020 @@Happy2Play the latest beta .14 has stopped a couple of things working - could you give me a idea what to change please /*Remove Scroll from - Seasons*/ #childrenCollapsible div.scrollSlider { flex-wrap: wrap; padding-right: 2.5%; padding-left: 2.5%; } #childrenCollapsible .scrollbuttoncontainer-right {display: none; } and /* ----- Smaller Movie/Series Cast Pictures Beta Server----*/ .card.portraitCard.personCard{width: 9.5em !important; height: auto;} i had a quick play but with no luck Thanks Looks like /*Remove Scroll from - Seasons*/ div.childrenSection-x div.scrollSlider { flex-wrap: wrap; padding-right: 2.5%; padding-left: 2.5%; } div.childrenSection-x div.scrollbuttoncontainer.scrollbuttoncontainer-right {display: none; } /* ----- Smaller Movie/Series Cast Pictures Beta Server----*/ div.peopleSection div.portraitCard {width: 9.5em; height: auto;} 1 Link to comment Share on other sites More sharing options...
PenkethBoy 2063 Posted February 17, 2020 Share Posted February 17, 2020 @@Happy2Play Thanks again work great! Link to comment Share on other sites More sharing options...
ITTechNut 0 Posted March 16, 2020 Share Posted March 16, 2020 Changing Fonts A simple one to get some folks started. You can adjust the fonts the WebUI uses. Currently by default this is - body { font-family: Roboto,Arial,Helvetica,sans-serif; } You could delete the "Roboto" and change your font to Arial, or change it for any other font you have available. You could even import fonts available on the web. @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700); body { font-family: 'Open Sans', sans-serif; } Here I've imported the Open Sans font from google fonts. is there a way to import a font thats not hosted on googles api webfonts. If so could you please explain how to do so with a dafont font .ttf or a webfontkit Link to comment Share on other sites More sharing options...
Thuzad 42 Posted March 18, 2020 Share Posted March 18, 2020 Hello, On my homepage my icons of the number of episodes (picture 1) left to watch is displayed well but when I go to a series it is displayed in the middle (picture 2).Do you have a workaround to solve the problem? /* Make Played Indicator into Ribbon RHS */ .cardIndicators {right: -21px !important; top: 4px !important; left: initial;} .card .playedIndicator, .card .countIndicator {width: 75px; height: 25px; border-radius: 0%; transform: rotate(45deg) !important; border-style: solid; border-width: 1px; background-color: #94131E; border-color: rgba(255, 255, 255, 1); display: flex; align-items: center; justify-content: center; left: 110px; right: unset;} div.playedIndicator i {transform: rotate(-45deg);} .listItemIndicators {top: 4px !important; right: -21px !important;} .playedIndicator {width: 75px !important; height: 25px !important; border-radius: 0% !important; transform: rotate(45deg) !important; border-style: solid !important; border-width: 1px !important; background-color: #94131E; border-color: rgba(255, 255, 255, 1) !important; display: flex !important; align-items: center !important; justify-content: center !important;} .progressring {right: 28px;} /* Ribbon For Video Indicator LHS */ .videoIndicator {background: #c33 !important; left: -21px !important; top: 4px !important; width: 75px !important; height: 25px !important; border-radius: 0% !important; transform: rotate(-45deg) !important; border-style: solid !important; border-width: 1px !important; border-color: rgba(255, 255, 255, 1) !important; display: flex !important; align-items: center !important; justify-content: center !important;} div.videoIndicator i {transform: rotate(45deg);} Link to comment Share on other sites More sharing options...
Happy2Play 8144 Posted March 18, 2020 Share Posted March 18, 2020 Hello, On my homepage my icons of the number of episodes (picture 1) left to watch is displayed well but when I go to a series it is displayed in the middle (picture 2). Do you have a workaround to solve the problem? /* Make Played Indicator into Ribbon RHS */ .cardIndicators {right: -21px !important; top: 4px !important; left: initial;} .card .playedIndicator, .card .countIndicator {width: 75px; height: 25px; border-radius: 0%; transform: rotate(45deg) !important; border-style: solid; border-width: 1px; background-color: #94131E; border-color: rgba(255, 255, 255, 1); display: flex; align-items: center; justify-content: center; left: 110px; right: unset;} div.playedIndicator i {transform: rotate(-45deg);} .listItemIndicators {top: 4px !important; right: -21px !important;} .playedIndicator {width: 75px !important; height: 25px !important; border-radius: 0% !important; transform: rotate(45deg) !important; border-style: solid !important; border-width: 1px !important; background-color: #94131E; border-color: rgba(255, 255, 255, 1) !important; display: flex !important; align-items: center !important; justify-content: center !important;} .progressring {right: 28px;} /* Ribbon For Video Indicator LHS */ .videoIndicator {background: #c33 !important; left: -21px !important; top: 4px !important; width: 75px !important; height: 25px !important; border-radius: 0% !important; transform: rotate(-45deg) !important; border-style: solid !important; border-width: 1px !important; border-color: rgba(255, 255, 255, 1) !important; display: flex !important; align-items: center !important; justify-content: center !important;} div.videoIndicator i {transform: rotate(45deg);} firefox_RaLvGu0GLa.png firefox_hXO7cWltyC.png Did you see this? You will need to add borders back in. https://emby.media/community/index.php?/topic/36755-some-css-fixes-tweaks/?p=858211 1 Link to comment Share on other sites More sharing options...
Thuzad 42 Posted March 19, 2020 Share Posted March 19, 2020 Did you see this? You will need to add borders back in. https://emby.media/community/index.php?/topic/36755-some-css-fixes-tweaks/?p=858211 Really cool, thank ! Link to comment Share on other sites More sharing options...
danergo 28 Posted May 11, 2020 Share Posted May 11, 2020 Guys, I know this is not possible directly from CSS, but most users in this topic is involved in some customization and I didn't want to open a new topic. I'd like to add a new link (a href...) to the sidebar, let's say between "Sign out" and "Settings", what shall be the easiest way doing it? Link to comment Share on other sites More sharing options...
Happy2Play 8144 Posted May 11, 2020 Share Posted May 11, 2020 Guys, I know this is not possible directly from CSS, but most users in this topic is involved in some customization and I didn't want to open a new topic. I'd like to add a new link (a href...) to the sidebar, let's say between "Sign out" and "Settings", what shall be the easiest way doing it? Similar to this https://emby.media/community/index.php?/topic/85931-emby-server-4508-hamburger-menu-usability-defect/page-2&do=findComment&comment=880823 Link to comment Share on other sites More sharing options...
danergo 28 Posted June 20, 2020 Share Posted June 20, 2020 Thanks, Happy2Play! One more question regarding custom CSS: is there any way to put "@media (min-size: xy)" config? Does not seem to be taken into account if I do that. Link to comment Share on other sites More sharing options...
gtxr24 4 Posted November 8, 2020 Share Posted November 8, 2020 (edited) Hi all I've had a look round but cannot find anything specific to what I'm looking for but is it possible to add a notes field/text box into my user accounts either when creating a user or an already created user via CSS or other method, thank you Edited November 8, 2020 by gtxr24 Link to comment Share on other sites More sharing options...
Prism16 1 Posted December 20, 2020 Share Posted December 20, 2020 On 08/11/2020 at 22:06, gtxr24 said: Hi all I've had a look round but cannot find anything specific to what I'm looking for but is it possible to add a notes field/text box into my user accounts either when creating a user or an already created user via CSS or other method, thank you Not possible via css alone, would need injecting into the html by javascript i think which isn't my area, maybe one of the lads can assist though.. Link to comment Share on other sites More sharing options...
pjkottke 0 Posted June 10, 2022 Share Posted June 10, 2022 I have been looking at using spectrograms to help locate positions in movies. My current solution is to use the custom CSS to have the logo (which contains the spectrogram image, attached) span the full width (attached). It would look better/be more function if I could instead show the spectrogram behind the seekbar. Is there a way with custom CSS to add the logo image to the seekbar element? Link to comment Share on other sites More sharing options...
pjkottke 0 Posted June 10, 2022 Share Posted June 10, 2022 3 hours ago, pjkottke said: I have been looking at using spectrograms to help locate positions in movies. My current solution is to use the custom CSS to have the logo (which contains the spectrogram image, attached) span the full width (attached). It would look better/be more function if I could instead show the spectrogram behind the seekbar. Is there a way with custom CSS to add the logo image to the seekbar element? Got it close to what I want, just need to figure out the way to link to the correct logo based on the current video. Any ideas? .emby-slider { background-image: url("http://lontra:8096/emby/Items/72650/Images/Logo?tag=6811076dab7e29c60d9d7a7b9083042c&quality=90") !important; opacity: 1 !important; background-size: 100% 100% !important; } Link to comment Share on other sites More sharing options...
King Pin 28 Posted June 15, 2022 Share Posted June 15, 2022 @Happy2Play Man you are a total beast in this thread. Great job helping everyone out. 1 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