Alexwerilles 3 Posted August 28, 2020 Share Posted August 28, 2020 Any way to change the color of all texts, objects and selector boxes, from green to another color? Including the login page text and lines? On the login page I managed to change at least the color of the line of the text box and the player's osd bar, because I found a code here, but the rest didn't. Link to comment Share on other sites More sharing options...
Happy2Play 8281 Posted August 28, 2020 Share Posted August 28, 2020 I run a script file with every update as I got tired of changing code, I used a program called Find and Replace to replace the colors in the actual code and had it generate the code I put in a bat file. "C:\Users\Media\Desktop\fnr.exe" --cl --dir "C:\Users\Media\AppData\Roaming\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\fnr.exe" --cl --dir "C:\Users\Media\AppData\Roaming\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\fnr.exe" --cl --dir "C:\Users\Media\AppData\Roaming\Emby-Server\system\dashboard-ui" --fileMask "*.css" --includeSubDirectories --find "rgba(82,181,75" --replace "rgba(12,87,214" "C:\Users\Media\Desktop\fnr.exe" --cl --dir "C:\Users\Media\AppData\Roaming\Emby-Server\system\dashboard-ui" --fileMask "*.css" --includeSubDirectories --find "rgba(82, 181, 75" --replace "rgba(12, 87, 214" This changed everything from green to blue, this is dependent on my paths but can easily be updated to your if you take this route. These closest to what you want is the abandoned project here and would require current updates. But I can help looking at specific areas one by one if needed. Link to comment Share on other sites More sharing options...
Alexwerilles 3 Posted August 28, 2020 Author Share Posted August 28, 2020 I use Debian. Unfortunately I don't know how to do that Link to comment Share on other sites More sharing options...
Happy2Play 8281 Posted August 28, 2020 Share Posted August 28, 2020 8 minutes ago, Alexwerilles said: I use Debian. Unfortunately I don't know how to do that I don't really know scripting that is why I used a third party app. But we can work through specific areas you want to change and I can try to help out there. Link to comment Share on other sites More sharing options...
Alexwerilles 3 Posted August 28, 2020 Author Share Posted August 28, 2020 11 minutes ago, Happy2Play said: Eu realmente não sei scripts, por isso usei um aplicativo de terceiros. Mas podemos trabalhar em áreas específicas que você deseja alterar e posso tentar ajudar nisso. Thank you for your help! The first is the home page, the parts marked in red (main links, osd timeline and the circle when you click on the 3 points. I want to change everything to red Link to comment Share on other sites More sharing options...
Alexwerilles 3 Posted August 28, 2020 Author Share Posted August 28, 2020 the number of episodes indicator Link to comment Share on other sites More sharing options...
Alexwerilles 3 Posted August 28, 2020 Author Share Posted August 28, 2020 I want to remove the entire "links" and "media info" section Link to comment Share on other sites More sharing options...
Alexwerilles 3 Posted August 28, 2020 Author Share Posted August 28, 2020 I want to remove the "video" part and change the color of the words "Audio" and "Subtitles", and the outline of the selection box; Link to comment Share on other sites More sharing options...
Alexwerilles 3 Posted August 28, 2020 Author Share Posted August 28, 2020 I also want to remove 'Trailers' and 'Pastas' (folders) Link to comment Share on other sites More sharing options...
Happy2Play 8281 Posted August 28, 2020 Share Posted August 28, 2020 If I do not get to these tonight I will tomorrow. But some of these are already within this forum section. Link to comment Share on other sites More sharing options...
Alexwerilles 3 Posted August 28, 2020 Author Share Posted August 28, 2020 playback controls and other buttons that turn green when you click Link to comment Share on other sites More sharing options...
Alexwerilles 3 Posted August 28, 2020 Author Share Posted August 28, 2020 5 minutes ago, Happy2Play said: If I do not get to these tonight I will tomorrow. But some of these are already within this forum section. some I didn't even find ... Thank you anyway. Link to comment Share on other sites More sharing options...
Happy2Play 8281 Posted August 28, 2020 Share Posted August 28, 2020 (edited) 13 minutes ago, Alexwerilles said: I also want to remove 'Trailers' and 'Pastas' (folders) This can only be done by modifying js file for library. As this would remove different tabs in different content types. Folders can be done as it is the last item in the header but then you loose favorites from the home screen also. Edited August 28, 2020 by Happy2Play Link to comment Share on other sites More sharing options...
Happy2Play 8281 Posted August 28, 2020 Share Posted August 28, 2020 28 minutes ago, Alexwerilles said: I want to remove the entire "links" and "media info" section /*Remove Links and Media Info sections*/ div.linksSection, div.audioVideoMediaInfo {display: none;} Link to comment Share on other sites More sharing options...
Happy2Play 8281 Posted August 28, 2020 Share Posted August 28, 2020 37 minutes ago, Alexwerilles said: the number of episodes indicator What do you want changed? just the background color? Red? Link to comment Share on other sites More sharing options...
Alexwerilles 3 Posted August 28, 2020 Author Share Posted August 28, 2020 1 minute ago, Happy2Play said: O que você quer mudar? apenas a cor de fundo? Vermelho? only background color, red Link to comment Share on other sites More sharing options...
Alexwerilles 3 Posted August 28, 2020 Author Share Posted August 28, 2020 4 minutes ago, Happy2Play said: /*Remove Links and Media Info sections*/ div.linksSection, div.audioVideoMediaInfo {display: none;} worked perfectly Link to comment Share on other sites More sharing options...
Alexwerilles 3 Posted August 28, 2020 Author Share Posted August 28, 2020 13 minutes ago, Happy2Play said: This can only be done by modifying js file for library. As this would remove different tabs in different content types. Folders can be done as it is the last item in the header but then you loose favorites from the home screen also. you better leave it as it is then, right? I hope that one day they will add this option to remove, natively Link to comment Share on other sites More sharing options...
arrbee99 1560 Posted August 28, 2020 Share Posted August 28, 2020 (edited) Might as well stick this here - don't think there's anything rude in it Might be useful. The good stuff is mostly Happy2play, the crude stuff is mine. There's probably lots of unintended consequences in it and stuff thats accidentally had effects applied to it twice. Stuff that stopped working, etc, etc. Kind of made stuff blue then made it paler with grayscale. /* Increase My Media Image Size */ div.card.smallBackdropCard {width: 20.0%; !important;} /* Remove Play Indicator Button */ .cardOverlayFab-primary {display: none !important;} /* Make Alphapicker Slightly Bigger */ .alphaPicker-vertical {font-size: 115% !important;} /* Position Alphapicker Vertically */ .alphaPicker {bottom: 40px !important;} /* ---------------------------------------------------------------------------------------------------- */ /* Remove Poster Thumb */ div.detailImageContainer {display: none; } /* Move Stuff Down for Movies and Series */ div.topDetailsContainer.flex.flex-direction-row-reverse {padding-top: 30em; } /* Move Stuff Down for Albums */ div.topDetailsContainer.flex.flex-direction-row {padding-top: 40em; } /*img.detailImage detailImage-side {display: None !important; }*/ /*What does this do*/ /*div.item-side-imageContainer {display: none; }*/ /* Move Logo Down */ /* div.detailLogo {position: absolute; top: 32em; } */ /* Move Logo Down */ /* div.detailLogo.flex.flex-direction-row {padding-top: 16em; } */ /* Make Backdrop Much Brighter */ .backgroundContainer.withBackdrop {background: rgba(0,0,0,.10)!important;} /*Make Backdrops Almost Black and White*/ .backdropContainer {filter: blur(0px) grayscale(80%)!important;} /* Make Home Page Posters, Movie TV Posters, Actors Etc Almost Black and White */ /*.itemsContainer {filter: blur(0px) grayscale(80%)!important;}*/ /*OR*/ /*.mainAnimatedPages.skinBody {filter: blur(0px) grayscale(80%)!important;}*/ /*OR as above but exclude TV Guide*/ div.scrollSlider.flex-grow.padded-top-page {filter: blur(0px) grayscale(80%)!important;} /* Make Logo Almost Black and White */ /*.detailLogo {filter: blur(0px) grayscale(80%)!important;}*/ /* Add Gradient to Main Movie or Episode Page */ div.itemMainScrollSlider {background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.9));} /* Add Transparent Grey Background to Episode Summary */ div.listItem-withContentWrapper div.listItem-content {background: rgba(0, 0, 0, 0.3);} /* Resize Season Posters */ body > div.mainAnimatedPages.skinBody.skinBody-withWindowScroll > div:nth-child(n) > div > div.verticalSection.childrenSection-x > div > div.scrollSlider.focuscontainer-x.itemsContainer.padded-left.padded-right.focusable.scrollX.hiddenScrollX > div > div > div.cardScalable > div.cardPadder-square {padding-bottom: 147%;} [data-type="Genre"] div.cardPadder-square { padding-bottom: 150%; } /* ---------------------------------------------------------------------------------------------------- */ /*Count and Played Indicator to Blue*/ div.countIndicator, i.playedIndicator {background: #3086CF;} /*Change Logo*/ .pageTitleWithLogo { background-image: url("C:\Users\schoo\AppData\Roaming\Emby-Server\system\dashboard-ui\modules\themes\logodark.png") !important; height: 50px !important; width: 190px !important; } .pageTitleWithDefautLogo { height: 53px !important; } /* ------------------------------------------------------------------------------------------------- */ /*Change Slider Colour*/ .emby-slider { color: #3086CF !important; } .emby-slider::-moz-range-progress { background: #3086CF !important; } .emby-slider::-webkit-slider-thumb { background: #3086CF !important; } .emby-slider::-moz-range-thumb { background: #3086CF !important; } .emby-slider::-ms-thumb { background: #3086CF !important; } .emby-slider-background-lower { background-color: #3086CF !important; } /*Change Colour of Play Button*/ .cardOverlayButtonIcon { background-color: #3086CF !important; } /* ----------------------------------------OR------------------------------------------------------- */ /*Change Slider Colour*/ /*FireFox OSD*/ input.emby-slider::-moz-range-thumb, input.emby-slider::-moz-range-progress { background:blue; } /*Chrome-Edge OSD*/ div.emby-slider-background-lower, input.emby-slider::-webkit-slider-thumb { background-color:blue; } /*Change Colour of Play Button*/ button.cardOverlayFab-primary i, button.cardOverlayFab-primary i:hover { background-color: blue; } /* ---------------------------------------------------------------------------------------------------- */ /* Remove Album from Now Playing */ .osdPoster-img {display: None !important} /*div.osdPoster-img { background-position: left 10px bottom; background-size: 100px;}*/ /* Make Music Backdrop Full Screen and Make Playlist Transparent */ div.backdropContainer.backdropContainer-remotecontrol {right: 0%;} /*div.upNextBar.upNextBar-static.flex.align-items-center {background: transparent;}*/ /*div.osdPlaylist.flex.flex-grow.hide.osdPlaylist-hidden {background: transparent;}*/ div.upNextBar.upNextBar-static.flex.align-items-center {background: rgba(0,0,0,.33)!important;} div.osdPlaylist.flex.flex-grow.hide.osdPlaylist-hidden {background: rgba(0,0,0,.33)!important;} /* Make Music Playlist Almost Black and White */ div.osdPlaylist.flex.flex-grow.hide.osdPlaylist-hidden {filter: grayscale(80%);} /* Add Dropshadow to Music Playlist */ div.upNextBar.upNextBar-static.flex.align-items-center {text-shadow: 2px 2px #000000;} /* Add Dropshadow to Song Name */ h2.videoOsdParentTitle {text-shadow: 2px 2px #000000;} /* Playing Now Queue - Second Line of Album and Song Name to Blue */ h3.videoOsdTitle { color: #3086CF !important;} /* Make Bottom Controls Almost Black and White */ .videoOsdBottomInner {filter: blur(0px) grayscale(80%)!important;} /* ---------------------------------------------------------------------------------------------------- */ /*Make CSS Box Bigger*/ #txtCustomCss {height: 700px; width: 800px;} /*Make Star Rating and Rotten Tomatoes almost Black and White*/ /*div.verticalSection {filter: blur(0px) grayscale(80%)!important;}*/ div.verticalSection.detailMainContainer {filter: blur(0px) grayscale(80%)!important;} /*Make Main Section of Dashboard almost Black and White*/ /*div.libraryOptions {filter: blur(0px) grayscale(80%)!important;}*/ div.content-primary {filter: blur(0px) grayscale(80%)!important;} /*Make Top Row Blue*/ div.skinHeader { color: #3086CF !important;} /*Make Top Row almost Back and White*/ div.skinHeader { filter: grayscale(80%) !important;} /*Make Left Hand Menu Blue*/ div.mainDrawer { color: #3086CF !important;} /*Make Left Hand Menu almost Back and White*/ div.mainDrawer {filter: grayscale(80%) !important;} /*OR*/ /*a.navMenuOption.emby-button {filter: grayscale(80%) !important;}*/ /*Make Second from Top Row Blue on Media Page*/ button.emby-tab-button.emby-button.emby-tab-button-active { color: #3086CF !important;} /*Make Second from Top Row Blue on Dashboard Page*/ a.emby-tab-button.emby-tab-button-active.emby-button { color: #3086CF !important;} /*Try to Make Connection Help Blue - works for text not background*/ /*a.raised.raised-mini.button-submit.emby-button { color: #3086CF !important;}*/ /*Make Emby Version Number and Http Links Blue*/ a.button-link.emby-button { color: #3086CF !important;} /*Make Selected Item in Left Hand Menu White*/ a.navMenuOption.emby-button.navMenuOption-selected { color: #FFFFFF !important;} a.navMenuOption.emby-button.navMenuOption-selected { background: #3086CF !important;} a.navMenuOption.emby-button.navMenuOption-selected { opacity: 0.4 !important;} /*Stop Items (Genres, Director) in Details Page Being Accidentally Made Blue*/ a.button-link.emby-button { color: #FFFFFF !important;} /*Make Main Section of Display almost Black and White*/ form.auto-center {filter: grayscale(80%) !important;} /*Make Now Playing Music Bar almost Black and White*/ .nowPlayingBarTop {filter: grayscale(80%) !important;} /* ---------------------------------------------------------------------------------------------------- */ /*Make Dashboard Checkboxes Blue*/ input.emby-checkbox:checked+span:before { border-color: #3086CF; background-color: #3086CF; } /*Make Dashboard Save Buttons Blue*/ button.button-submit:not(.emby-button-tv), button.button-submit:not(.emby-button-tv):focus { background: #3086CF; } /*button.button-submit:not(.emby-button-tv), button.button-submit:not(.emby-button-tv):focus { filter: grayscale(80%); }*/ /* ---------------------------------------------------------------------------------------------------- */ /*All Guide Entries Gray20*/ div.tabContent.flex.flex-direction-column.flex-grow.padded-top-page.is-active { background: #333333;} /*Top Left Corner of Guide Only Gray15*/ div.channelCell { background: #262626 !important;} /*All Channels Left Hand Side Gray15*/ button.channelCell.channelCell-mobilefocus.itemAction { background: #262626 !important;} /*Row of Times in Guide Gray15*/ div.timeslotHeaders { background: #262626;} /*OR*/ /*Row of Times in Guide Gray15*/ /*div.timeslotHeaders.flex.flex-grow.flex-direction-row { background: #262626;}*/ /*Adjust Colour and Width of Current Time Indicator*/ div.guide-currentTimeIndicatorDot {width: 3px;} div.guide-currentTimeIndicatorDot {background: #3086CF;} /*Try to Make Guide Narrower Vertically and Left Hand List Wider*/ /*div.virtualScrollItem.epgRow {height: 55px; !important;}*/ /*button.channelCell.channelCell-mobilefocus.itemAction { width: 150px;}*/ /*div.channelCell { width: 150px;;}*/ /*Try to make guide full colour*/ /*div.guideContainer.flex-grow.tvguide {filter: blur(0px) grayscale(0%)!important;}*/ /*Add Border to Program Cells Vertical Only*/ .programCell { border-width: 0px 4px 0px 4px!important; border-color: rgba(0,0,0,1) !important; } /*Add Border to Program Cells Horizontal Only*/ div.virtualScrollItem.epgRow.flex { border-width: 4px 0px 4px 0px!important; border-color: rgba(0,0,0,1) !important; } /*Add Right Hand Border to All Channels Left Hand Side*/ button.channelCell.channelCell-mobilefocus.itemAction { border-width: 0px 4px 0px 0px!important; border-color: rgba(0,0,0,1) !important;; } /*Make Text Blue and Almost Black and White in some Pop-up boxes eg filters*/ label.selectLabel { color: #3086CF !important;} label.selectLabel { filter: grayscale(80%) !important;} label.emby-checkbox-label { color: #3086CF !important;} label.emby-checkbox-label { filter: grayscale(80%) !important;} /*Make Attribute Text Blue and Almost Black and White in some Pop-up boxes eg New in TV Guide*/ div.mediaInfoProgramAttribute.mediaInfoItem.newTvProgram { background: #3086CF !important;} div.mediaInfoProgramAttribute.mediaInfoItem.newTvProgram { filter: grayscale(80%) !important;} /*Make Text Almost Black and White in some Pop-up boxes eg Save in TV Guide*/ button.raised.btnPlay.block { filter: grayscale(80%) !important;} /*Make Dashboard Connection Help Blue - Already Pale*/ a.raised.raised-mini.button-submit.emby-button { background: #3086CF !important;} /*OR*/ /*a.raised.raised-mini.button-submit { background: #3086CF !important;}*/ i.md-icon:not (.md-icon.navMenuOptionIcon) { background: #3086CF !important;} /*i.md-icon { background: #3086CF !important;}*/ /*Make Restart Shutdown buttons Almost Black and White*/ div.formDialogFooter { filter: grayscale(80%) !important;} Edited August 28, 2020 by arrbee99 2 Link to comment Share on other sites More sharing options...
Happy2Play 8281 Posted August 28, 2020 Share Posted August 28, 2020 (edited) 6 hours ago, Alexwerilles said: the number of episodes indicator /*Played and count indicator color change*/ div.countIndicator, i.playedIndicator {background: red;} 6 hours ago, Alexwerilles said: I want to remove the "video" part and change the color of the words "Audio" and "Subtitles", and the outline of the selection box; /*Remove item video container(does not apply to multi-version), change outline and focus color*/ div.selectVideoContainer {display: none;} select.emby-select-withcolor:focus {border-color: red !important;} label.inputLabelFocused, label.selectLabelFocused, label.textareaLabelFocused {color: red;} 6 hours ago, Alexwerilles said: playback controls and other buttons that turn green when you click /*Change button and focus colors*/ button.paper-icon-button-light:focus {color: red; background-color: rgba(255,0,0,0.2);} 6 hours ago, Alexwerilles said: Thank you for your help! The first is the home page, the parts marked in red (main links, osd timeline and the circle when you click on the 3 points. I want to change everything to red /*Change card progress indicator color*/ div.itemProgressBarForeground {background-color: red;} /*Active button select color*/ button.emby-tab-button-active {color: red;} The more+ buttons focus is covered above. Note all code was created using 4.4.3.0. Let me know if there are any issues. Edited August 28, 2020 by Happy2Play Link to comment Share on other sites More sharing options...
Happy2Play 8281 Posted August 28, 2020 Share Posted August 28, 2020 (edited) Alternative route looks like a easier method is via html:root as most areas are using theme base. Test only this code for color based areas. Some themes have slightly different variables, this if from dark with your red changes. html:root { --theme-primary-color: red; --theme-text-color: rgba(255, 255, 255, .87); --theme-text-color-opaque: #fff; --theme-accent-text-color: red; --theme-primary-color-lightened: red; --theme-icon-focus-background: rgba(255, 0, 0, 0.2); --theme-background: #141414; --button-background: #242424; --header-background: #141414; --footer-background: #1d1d1d; --theme-body-secondary-text-color: rgba(255, 255, 255, .6); --line-background: rgba(255, 255, 255, .08); --line-size: .13em; --scrollbar-thumb-background: rgba(255,255,255,.3); } All display: none items will be needed for removed items from previous code Note not all items are needed here but I just copied all of root for Dark theme and made minor changes, you can leave out some variables so they are theme dependent. Edited August 28, 2020 by Happy2Play Link to comment Share on other sites More sharing options...
arrbee99 1560 Posted August 28, 2020 Share Posted August 28, 2020 You wouldn't happen to know how to change the colour of the progress bar here pleasey - Something to do with 'progress.playbackProgress' ? Maybe not as I can't get that to do anything (surprisingly). Link to comment Share on other sites More sharing options...
Happy2Play 8281 Posted August 28, 2020 Share Posted August 28, 2020 43 minutes ago, arrbee99 said: You wouldn't happen to know how to change the colour of the progress bar here pleasey - Something to do with 'progress.playbackProgress' ? Maybe not as I can't get that to do anything (surprisingly). Had to dig into the dashboard.css to find as I coouldn't see it anywhere in the console but here you go. Obviously apply your own color. progress.playbackProgress::-webkit-progress-value, progress.playbackProgress::-moz-progress-bar {background-color:blue;} 1 Link to comment Share on other sites More sharing options...
arrbee99 1560 Posted August 28, 2020 Share Posted August 28, 2020 Brill. Thanks very much (and so obvious as well...) Link to comment Share on other sites More sharing options...
Alexwerilles 3 Posted August 28, 2020 Author Share Posted August 28, 2020 4 hours ago, Happy2Play said: /*Played and count indicator color change*/ div.countIndicator, i.playedIndicator {background: red;} /*Remove item video container(does not apply to multi-version), change outline and focus color*/ div.selectVideoContainer {display: none;} select.emby-select-withcolor:focus {border-color: red !important;} label.inputLabelFocused, label.selectLabelFocused, label.textareaLabelFocused {color: red;} /*Change button and focus colors*/ button.paper-icon-button-light:focus {color: red; background-color: rgba(255,0,0,0.2);} /*Change card progress indicator color*/ div.itemProgressBarForeground {background-color: red;} /*Active button select color*/ button.emby-tab-button-active {color: red;} The more+ buttons focus is covered above. Note all code was created using 4.4.3.0. Let me know if there are any issues. Thank you very much, it worked perfectly 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