Jump to content
Alexwerilles

Color

Recommended Posts

Alexwerilles

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.

Share this post


Link to post
Share on other sites
Happy2Play

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.

Share this post


Link to post
Share on other sites
Alexwerilles

I use Debian. Unfortunately I don't know how to do that :(

Share this post


Link to post
Share on other sites
Happy2Play
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.

Share this post


Link to post
Share on other sites
Alexwerilles
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

 

print1.jpg

Share this post


Link to post
Share on other sites
Alexwerilles

the number of episodes indicator

print2.jpg

Share this post


Link to post
Share on other sites
Alexwerilles

I want to remove the entire "links" and "media info" section

print3.jpg

Share this post


Link to post
Share on other sites
Alexwerilles

I want to remove the "video" part and change the color of the words "Audio" and "Subtitles", and the outline of the selection box;

print4.jpg

Share this post


Link to post
Share on other sites
Alexwerilles

I also want to remove 'Trailers' and 'Pastas' (folders)

print5.jpg

Share this post


Link to post
Share on other sites
Happy2Play

If I do not get to these tonight I will tomorrow.  But some of these are already within this forum section.  

Share this post


Link to post
Share on other sites
Alexwerilles

playback controls and other buttons that turn green when you click

print6.jpg

Share this post


Link to post
Share on other sites
Alexwerilles
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.

Share this post


Link to post
Share on other sites
Happy2Play
Posted (edited)
13 minutes ago, Alexwerilles said:

I also want to remove 'Trailers' and 'Pastas' (folders)

print5.jpg

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 by Happy2Play

Share this post


Link to post
Share on other sites
Happy2Play
28 minutes ago, Alexwerilles said:

I want to remove the entire "links" and "media info" section

print3.jpg

/*Remove Links and Media Info sections*/
div.linksSection, div.audioVideoMediaInfo {display: none;}

 

Share this post


Link to post
Share on other sites
Happy2Play
37 minutes ago, Alexwerilles said:

the number of episodes indicator

print2.jpg

What do you want changed? just the background color? Red?

Share this post


Link to post
Share on other sites
Alexwerilles
1 minute ago, Happy2Play said:

O que você quer mudar? apenas a cor de fundo? Vermelho?

only background color, red

Share this post


Link to post
Share on other sites
Alexwerilles
4 minutes ago, Happy2Play said:

/*Remove Links and Media Info sections*/
div.linksSection, div.audioVideoMediaInfo {display: none;}

 

worked perfectly

Share this post


Link to post
Share on other sites
Alexwerilles
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

Share this post


Link to post
Share on other sites
arrbee99
Posted (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 by arrbee99
  • Like 2

Share this post


Link to post
Share on other sites
Happy2Play
Posted (edited)
6 hours ago, Alexwerilles said:

the number of episodes indicator

print2.jpg

/*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;

print4.jpg

/*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

print6.jpg

/*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

 

print1.jpg

/*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 by Happy2Play

Share this post


Link to post
Share on other sites
Happy2Play
Posted (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 by Happy2Play

Share this post


Link to post
Share on other sites
arrbee99

You wouldn't happen to know how to change the colour of the progress bar here pleasey -

577432089_EmbyDashboardprogressbar.JPG.dd41436bc9b3746a46113e2d4d0ef6e0.JPG

Something to do with 'progress.playbackProgress' ? Maybe not as I can't get that to do anything (surprisingly).

Share this post


Link to post
Share on other sites
Happy2Play
43 minutes ago, arrbee99 said:

You wouldn't happen to know how to change the colour of the progress bar here pleasey -

577432089_EmbyDashboardprogressbar.JPG.dd41436bc9b3746a46113e2d4d0ef6e0.JPG

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

 

  • Like 1

Share this post


Link to post
Share on other sites
arrbee99

Brill. Thanks very much (and so obvious as well...)

Share this post


Link to post
Share on other sites
Alexwerilles
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

Share this post


Link to post
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...