A few css bits mostly from other people

[amateurgod 26]

1 hour ago, Happy2Play said:

This is still limited but something like this.  

div.dashboardContainer div.infoBanner, div.dashboardContainer div.listItemBodyText, div.dashboardContainer div.secondaryText {
        color: yellow;
}

 

Thank you 

[amateurgod 26]

4 hours ago, Happy2Play said:

This is still limited but something like this.  

div.dashboardContainer div.infoBanner, div.dashboardContainer div.listItemBodyText, div.dashboardContainer div.secondaryText {
        color: yellow;
}

 

if i wanted to do this for all the other containers to like settings, users, scheduled tasks etc woudl i just change the div.dashboardContainer to the correct container for what i want to change?

[Olywa123 46]

5 hours ago, Happy2Play said:

This is due to [data-type="home"] no longer existing, change to div.homeSectionsContainer.

And you are correct for the Links as the html would have to be modified.

Success! Thank you so much @Happy2PlayI really appreciate it. 

In case it helps others, the following is currently working for me (on 4.8.0.80) to reduce the size of 'My Media' buttons:

/* Reduce My Media Buttons Image Size
(can be a percentage 'width: 8%' or pixel count 'width: 80 px' ) */
div.homeSectionsContainer div.section0 .card {width: 108px;}

/* Reduce My Media Buttons Gap Size */
div.homeSectionsContainer div.section0 div.cardBox {margin: 0 .45em;}

 

 

 

Edited February 7 by Olywa123

[Happy2Play 8282]

7 hours ago, amateurgod said:

if i wanted to do this for all the other containers to like settings, users, scheduled tasks etc woudl i just change the div.dashboardContainer to the correct container for what i want to change?

Pretty much yes, really depends on how much code you write depending on how targeted it needs to be.  So target the view or container on each page to keep it local to that area.

But text element will/could be different across pages so you will have add them per page.

 

[King Pin 28]

@Happy2PlayI just installed 4.8.1 and I've tried everything but I can't get my background on the homepage to show up.  

 

/* Moving My Media Down */

/* Make Home page and Movie TV page background images blurry and bright */
/*div.backgroundContainer.withBackdrop:not(div.itemBackgroundContainer) {
    background: rgba(0,0,0,.10); backdrop-filter: saturate(0.4) blur(1.5em);
    -webkit-backdrop-filter: saturate(0.4) blur(1.5em);
}*/

/* OR */

/* Move My Media down to show 1 row and add grey background HAPPY2PLAY */
/*.homeSectionsContainer {
    position: relative;
    top: 38em; 
    background: rgba(0, 0, 0, 0.5);
}*/

/* Move My Media down to show 1 row and add grey background HAPPY2PLAY */
.homeSectionsContainer {
    position: relative;
    top: 35em; 
    background: rgba(0, 0, 0, 0.5);
}

/* Make Movies Series etc list background darker */
div.scrollFrameY.flex.flex-grow.focuscontainer-down.virtualScrollerScrollContainer {
    background: rgba(0, 0, 0, 0.5);
}
/* AND*/
/* Make Music page background darker */
div.scrollSlider.flex-grow.padded-top-page.scrollSliderY {
    background: rgba(0, 0, 0, 0.5);
}

/* Add Dark Symbol online image to blank backgrounds but works everywhere */
/*div.mainAnimatedPages.skinBody {background-image: url("https://msdesign.blob.core.windows.net/wallpapers/microsoft_brand_heritage_04.jpg");}*/
/*div.mainAnimatedPages.SkinBody {background-size: cover;}*/

/* OR */

/* Add to blank home page online image Gollum - remember to untick Enable Backdrops in Display */
[data-type="home"] div.focuscontainer-down {background-image: url("https://i.imgur.com/qY5qWry.jpg");}
[data-type="home"] div.focuscontainer-down {background-size: cover;}

[Happy2Play 8282]

16 minutes ago, King Pin said:

@Happy2PlayI just installed 4.8.1 and I've tried everything but I can't get my background on the homepage to show up.  

 

/* Moving My Media Down */

/* Make Home page and Movie TV page background images blurry and bright */
/*div.backgroundContainer.withBackdrop:not(div.itemBackgroundContainer) {
    background: rgba(0,0,0,.10); backdrop-filter: saturate(0.4) blur(1.5em);
    -webkit-backdrop-filter: saturate(0.4) blur(1.5em);
}*/

/* OR */

/* Move My Media down to show 1 row and add grey background HAPPY2PLAY */
/*.homeSectionsContainer {
    position: relative;
    top: 38em; 
    background: rgba(0, 0, 0, 0.5);
}*/

/* Move My Media down to show 1 row and add grey background HAPPY2PLAY */
.homeSectionsContainer {
    position: relative;
    top: 35em; 
    background: rgba(0, 0, 0, 0.5);
}

/* Make Movies Series etc list background darker */
div.scrollFrameY.flex.flex-grow.focuscontainer-down.virtualScrollerScrollContainer {
    background: rgba(0, 0, 0, 0.5);
}
/* AND*/
/* Make Music page background darker */
div.scrollSlider.flex-grow.padded-top-page.scrollSliderY {
    background: rgba(0, 0, 0, 0.5);
}

/* Add Dark Symbol online image to blank backgrounds but works everywhere */
/*div.mainAnimatedPages.skinBody {background-image: url("https://msdesign.blob.core.windows.net/wallpapers/microsoft_brand_heritage_04.jpg");}*/
/*div.mainAnimatedPages.SkinBody {background-size: cover;}*/

/* OR */

/* Add to blank home page online image Gollum - remember to untick Enable Backdrops in Display */
[data-type="home"] div.focuscontainer-down {background-image: url("https://i.imgur.com/qY5qWry.jpg");}
[data-type="home"] div.focuscontainer-down {background-size: cover;}

Both those elements no longer exist for your bolded code.  So keeping in line with what you had before.

/* Add to blank home page online image Gollum - remember to untick Enable Backdrops in Display */
div.view-home-home div.focuscontainer-y {background-image: url("https://i.imgur.com/qY5qWry.jpg");}
div.view-home-home div.focuscontainer-y {background-size: cover;}

 

[King Pin 28]

You're awesome thank you!  

Since you're here how would I go about brightening up the background image so it's not so dark?  

Is there a value I can change? 

[Happy2Play 8282]

10 minutes ago, King Pin said:

You're awesome thank you!  

Since you're here how would I go about brightening up the background image so it's not so dark?  

Is there a value I can change? 

Not sure I follow what do you see?

[King Pin 28]

Top is the image in Emby. 

Bottom is the actual image.  

It looks like there is a tint being applied to it to darken it.  

 

 

[Happy2Play 8282]

1 minute ago, King Pin said:

Top is the image in Emby. 

Bottom is the actual image.  

It looks like there is a tint being applied to it to darken it.  

 

 

Can only guess existing custom css or maybe theme.  What theme do you have set?

My image was with only that code I provided and am on Blue Radiance theme.

[King Pin 28]

4 minutes ago, Happy2Play said:

Can only guess existing custom css or maybe theme.  What theme do you have set?

My image was with only that code I provided and am on Blue Radiance theme.

I tried changing the themes but it stays the same.  

[Happy2Play 8282]

1 minute ago, King Pin said:

I tried changing the themes but it stays the same.  

Is that all the css you use listed in previous post?

[King Pin 28]

1 minute ago, Happy2Play said:

Is that all the css you use listed in previous post?

No I have your full CSS. 

Maybe I changed something some time ago and didn't notice it.  

Not really a big deal TBH. 

[Happy2Play 8282]

1 minute ago, King Pin said:

No I have your full CSS. 

Maybe I changed something some time ago and didn't notice it.  

Not really a big deal TBH. 

Most if this topics is someone else's that I help with so you would to post of pm the full code so I can see what css is causing it.

[King Pin 28]

/*Move HeaderTop up*/
@media (min-width: 80em) {
div.headerMiddle.sectionTabs.headerMiddle-withSectionTabs:not(.headerMiddle-tv) {    
    position: absolute;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, 0);
    width: 60%;
   }
}

@media (min-width: 100em)
{.portraitCard, .overflowPortraitCard {
    width: 9vw;}
}

button.cardImageContainer {
    background-color: transparent;
}

/*My Powder Blue - #5d7e9b;*/
/*Dark Red  - #A30000;*/
/*Rosewood  - #65000B;*/
/*Burnt Orange - #A34822;*/
/*Another Powder Blue - #718F93;*/
/*Dark Olive Green - #556B2F;*/
/*Dark Orange - #FF8C00;*/

/* ---------------------------------------------------------------------------------------------------- */
/* Overall Colour Scheme */

html:root {
    --mycolour: #A30000; 
}

html:root {
    --myhighlight: #A30000;
}

html:root {
    --theme-primary-color: var(--mycolour);
    --theme-accent-text-color: var(--mycolour);
    --theme-primary-color-lightened: var(--mycolour);
    --theme-icon-focus-background: rgba(120, 120, 120, 0.2);
}

/* ---------------------------------------------------------------------------------------------------- */
/* Home Page */

/* Increase My Media image size */
div.card.smallBackdropCard {width: 0%; !important;}

/* Remove Play indicator button */
.cardOverlayFab-primary {display: none !important;}

/* Make Home Page posters, Movie TV posters, Actors Etc almost black and white but exclude TV guide */
div.scrollSlider.flex-grow.padded-top-page {filter: blur(0px) grayscale(5%)!important;}
/* and exclude Dashboard Family tick boxes */
div.scrollSlider.flex-grow.flex-direction-column.padded-left.padded-left-page.padded-right.padded-top-page.padded-bottom-page.settingsContainer.scrollSliderY {filter: blur(0px) grayscale(0%)!important;}

/* Add dropshadow to tick heart three dots */
button.cardOverlayButton {text-shadow: 2px 4px rgb(139,0,0);}

/* For own logo make bigger on Home Page */
h3.pageTitle.pageTitleWithLogo.pageTitleWithDefaultLogo {height: 3em !important;}

/* Add drop shadow to folder icon */
i.md-icon.cardIndicator.cardIndicatorIcon {text-shadow: 2px 4px rgb(0 0 0);}

/* For long item names wrap text */
div.cardText {white-space: pre-wrap;}

/* Increase font size for top menu */
div.tabs-viewmenubar-slider.emby-tabs-slider.scrollX.hiddenScrollX.scrollSliderX  {font-size: 85% !important;}

/* ---------------------------------------------------------------------------------------------------- */
/* Borders */

/* Set colour of border for highlighted object */
div.cardOverlayContainer:not(.detailMainContainer .cardOverlayContainer) {
    background: transparent;
    box-shadow: 0 0 0 6px var(--myhighlight);
    border-radius: 0.3rem;
}

/* Make border white - if it does... */
/*div.detailMainContainer .cardContent {
    border: 4px solid white;
    border-radius: 1.8rem;
}*/

/* Find where this works - if it does... */
/*div.detailMainContainer .cardOverlayContainer {
    border: 4px solid yellow;
    background: transparent;
    border-radius: 1.8rem;
}*/

/* Add rounded corners to all dashboard items */
div.paperList {
    border-radius: 1.8rem;
}

/* Add rounded corners to dashboard active devices */
div.cardBox.visualCardBox {
    border-radius: 1.8rem;
}

/* Add white border to dashboard active devices */
/*div.sessionNowPlayingContent {
    border: 4px white solid !important;
    border-radius: 1.8rem;
}*/

/* Add round corners to info banner */
div.infoBanner {
    border-radius: 1.8rem;
}

/* ---------------------------------------------------------------------------------------------------- */
/* Movie and Series List */

/* Make alphapicker slightly bigger, lower and change colour */
div.alphaPickerRow-vertical button {color: var(--myhighlight);}
div.alphaPicker-vertical {font-size: 110% !important;}
div.alphaPicker-fixed {top: 8em;}

/* ---------------------------------------------------------------------------------------------------- */
/* Movie and Series Details Page */

/* Move details down */
div.flex-grow.topDetailsMain.flex.flex-direction-column  {padding-top: 1em; }

/* Add transparent grey background to top info, episode list, extra bottom info */  
div.verticalSection.detailMainContainer {background: rgba(0, 0, 0, 0.3); }
div.trackList.vertical-list {background: rgba(0, 0, 0, 0.3); }
div.details-additionalContent.padded-bottom-page.details-additionalContent-withbackdrop {background: rgba(0, 0, 0, 0.3); }

/* Make backdrop much brighter */
div.backgroundContainer.withBackdrop {background: rgba(0,0,0,.10)!important;}

/* Make backdrop almost black and white */
.backdropContainer {filter: blur(0px) grayscale(3%)!important;}

/* Make star rating and rotten tomatoes almost black and white */
div.verticalSection.detailMainContainer {filter: blur(0px) grayscale(3%)!important;}

/* Add gradient to main movie or episode page */
div.itemMainScrollSlider {background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.9));}

/* Resize season posters - if this works... */
/*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%;}*/

/* Media Info remove grey background and box outline */
div.audioVideoMediaInfo .cardContent-shadow, div.audioVideoMediaInfo .defaultCardBackground0 {
    background-color: transparent !important;
    box-shadow: none;
}

/* Close up most gaps between detail rows */
div.itemMainScrollSlider h2.sectionTitle {margin-top: 0;}
div.itemMainScrollSlider .sectionTitleContainer {margin: 0;}
div.itemMainScrollSlider .verticalSection-extrabottompadding {margin-bottom: 0;}

/* Resize season posters - if it works... */
/*div.details-additionalContent div.cardScalable.cardPadder-square:not(.virtualItemsContainer .cardScalable.cardPadder-square) {padding-bottom: 150%; aspect-ratio: 0;}*/

/* Make text bigger for episode summaries*/
div.listItem-overview  {font-size: 120% !important;}

/* ---------------------------------------------------------------------------------------------------- */
/* Genres */

/* Stretch genres vertically so less squashed */
[data-type="Genre"] div.cardPadder-square {
    padding-bottom: 150%;
}

/* ---------------------------------------------------------------------------------------------------- */
/* Movie and Episode and Music Playing Buttons */

/* Change focus colour background leave button */
button.paper-icon-button-light:focus {background-color: rgba(120, 120, 120, 0.2);}

/* Make play etc buttons more transparent */
i.md-icon.detailButton-icon {background-color: rgba(120, 120, 120, 0.2);}

/* ---------------------------------------------------------------------------------------------------- */
/* Music Playing */

/* Move details down for albums */
div.topDetailsContainer.flex.flex-direction-row {padding-top: 40em; }

/* Remove album from now playing */
/*.osdPoster-img {display: None !important}*/
/*.osdPoster-img {width: 16.66%;}*/

/* Make music backdrop full screen and make playlist transparent */
div.backdropContainer.backdropContainer-remotecontrol {right: 0%;}
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(3%);}

/* Add dropshadow to music playlist - if it works... */
/*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;}
h2.videoOsdParentTitle.secondaryText.osdTitle-remotecontrol {font-size: 300%;}*/
div.flex.videoOsdSecondaryText.secondaryText.flex-wrap-wrap.videoOsdSecondaryText-remotecontrol {font-size: 150%;}

/* Playing Now queue - second line of album and song name to MyColour */
h3.videoOsdTitle {color: var(--mycolour) !important;}

/* Playing Now queue - second line of album and song name add dropshadow */
h3.videoOsdTitle {text-shadow: 2px 2px #000000;}

button.itemAction.button-link.osdTextActionButton.emby-button {text-shadow: 2px 2px #000000;}

/* Try to Add dropshadow to play buttons */
/* div.videoOsdBottom-buttons.flex.align-items-center.flex-direction-row.focuscontainer-x.videoOsd-customFont {text-shadow: 2px 2px #000000;} */

/* Get rid of baby album images */
div.osdPlaylist .listItemImageContainer img {display: none;}
/*or*/
/*div.osdPlaylist img.listItemImage {display: none;}*/

/* Stop play button appearing under graphic equaliser */
div.playlistIndexIndicatorImage .listItemOverlayButton-imagehover i {display: none;}

div.flex.flex-grow.align-items-center.flex-shrink-zero {text-shadow: 2px 2px #000000;}

/* Remove album poster from playlist*/
div.osdPosterContainer .cardImageContainer {display: none;}

/* Remove mini album image from playlist */
div.listItemImage.listItemImage-square {display: none !important;}

/* Add grey background to playlist on right of screen */
div.virtualScrollItem.listItem.focusable.listItemCursor.listItem-hoverable.listItem-withContentWrapper.drop-target.ordered-drop-target-y {background: rgba(0,0,0,.33)!important;}

/* Add dropshadow to play buttons */
i.md-icon {text-shadow: 2px 2px #000000;}

/* Add dropshadow to artist and increase size */
h3.videoOsdParentTitle {text-shadow: 2px 2px #000000;}
h3.videoOsdParentTitle {font-size: 200%;}

/* Make playlist toggle button white */
i.md-icon.toggleButtonIcon.toggleButtonIcon-active {color:white; }

/* Make playlist on right narrower */
div.osdContentSection {width: min(10%,75em);}

/* ---------------------------------------------------------------------------------------------------- */
/* Dashboard */

/* Make CSS box bigger */
textarea.txtCustomCss {height: 1200px; width: 860px;}

/* Hide beta message in dashboard */
.betaInfoBanner {display: none}

/* Change card progress indicator color */
progress.playbackProgress::-webkit-progress-value, progress.playbackProgress::-moz-progress-bar {background-color: var(--mycolour);}

/*Make scheduled tasks progress bar MyColour */
div.taskProgressInner {background-color: var(--mycolour);}

/* Running task percentage colour */
#divRunningTasks.paperList  p  span {color: var(--mycolour) !important;}

/* Up to date checkbox to MyColour */
#pUpToDate i {background-color: var(--mycolour) !important;}

/* Activity and alerts to MyColour */
div.listItemImageContainer-round.defaultCardBackground {background-color: var(--mycolour) !important;}

/* Make scheduled tasks percentage colour MyColour */
div.scheduledTaskPaperIconItem[data-status="Running"] span {color: var(--mycolour);}

/* Active devices icons to almost black and white */
img.sessionAppImage {filter: grayscale(3%);}

/* For own logo make bigger on Dashboard */
.pageTitleWithDefaultLogo { height: 2em !important;}

/* Add dropshadow to version number in-home access remote access */
/*a.button-link.emby-button {text-shadow: 1px 1px rgb(0 0 0);}*/
/* OR */
/* Different colour for version number in-home access remote access */
a.button-link.emby-button {color: #E78587;}

/* Add dropshadow to highlighted nav drawer item */
div.navDrawerListItemBody.listItemBody.itemAction {text-shadow: 1px 1px rgb(0 0 0);}
/* OR */
/* Different colour for highlighted nav drawer item */
/*div.navDrawerListItemBody.listItemBody.itemAction {color: #E78587;}*/

/* ---------------------------------------------------------------------------------------------------- */
/* TV Guide */

/* Add backdrop to guide and centre */
/*div.guideContainer.flex-grow.tvguide {background-image: url("https://msdesign.blob.core.windows.net/wallpapers/microsoft_brand_heritage_02.jpg");}*/
/*div.guideContainer.flex-grow.tvguide {background-size: cover; background-position: center; }*/

/* Add backdrop to guide and centre - doesn't look too good */
div.guideContainer.flex-grow.tvguide {background-image: url("https://allhdwallpapers.com/wp-content/uploads/2015/05/Jurassic-World-9.jpg");}
div.guideContainer.flex-grow.tvguide {background-size: cover; background-position: center; }

/* Make program cells transparent to show picture */
/*div.programCellInner {opacity: 0.75; !important}*/
div.programCellInner {background-color: rgba(120, 120, 120, 0.2);}

/* Make All Channels transparent to show picture */
button.channelCell.itemAction {opacity: 0.85; !important}

/* Adjust colour and width of current time indicator */
div.guide-currentTimeIndicatorDot {width: 1px;}
/*div.guide-currentTimeIndicatorDot {background: white;}*/
div.guide-currentTimeIndicatorDot {background: var(--myhighlight);}

/* Remove current time indicator arrow */
div.guide-currentTimeIndicatorDot.guideHeader-currentTimeIndicatorDot::before {display: none;}

/* Make program text bigger */
div.guideProgramNameText {font-size: 125% !important;}

/* Make premiere new etc MyColour */
div.mediaInfoProgramAttribute.mediaInfoItem {background-color: var(--mycolour);}
span.premiereTvProgram.guideProgramIndicator {background-color: var(--mycolour);}

/* Try to make date and time rows at top more opaque */
/*div.headerScroller.emby-scroller {opacity: 0.25; !important}*/
/*div.guide-headerTimeSlots {opacity: 0.25; !important}*/

/* Add border to program cells - vertical only */
.programCell {
    border-width: 0px 2px 0px 2px !important;
    border-color: rgba(0,0,0,0.25) !important;
}

/* Make TV guide rows shallower */
div.virtualScrollItem.epgRow {height: 60px;}

/* Remove channel logo */
div.guideChannelImage {display: none;}

/* Make channel name bigger */
div.guideChannelText.secondaryText {font-size: 120% !important;}

/* Make channel name bold */
div.guideChannelText.secondaryText {font-weight: bold;}

/* Make top left empty box wider */
div.channelCell.firstChannelCell {width: 240px !important;}

/* Make channels column wider */
button.channelCell.itemAction {width: 240px !important;}
button.channelCell.itemAction {
    border-width: 0px 2px 0px 2px!important;
    border-color: rgba(0,0,0,0.25) !important;}

/* Re-align Timeline to correct position */
div.guide-currentTimeIndicatorDot.guideEpg-currentTimeIndicatorDot {margin-left: 16.5em;}

/* Remove top portion of Timeline */
div.guide-currentTimeIndicatorDot.guideHeader-currentTimeIndicatorDot {display: none;}

/* Change colour of text in TV play recording dialog box */
/*div.focuscontainer.dialog.dialog-fixedSize.dialog-small.formDialog.recordingDialog.opened {color: yellow;}*/

/* Make TV play recording dialog box shallower */
div.focuscontainer.dialog.dialog-fixedSize.dialog-small.formDialog.recordingDialog.opened {height: 560px;}

/* Make TV play recording dialog box narrower */
div.focuscontainer.dialog.dialog-fixedSize.dialog-small.formDialog.recordingDialog.opened {width: 800px;}

/* ---------------------------------------------------------------------------------------------------- */
/* New Stuff */

/* Does this do anything... */
/*select#embyselect9.selectAudio.detailTrackSelect.emby-select-inline.emby-select {background: rgba(0, 0, 0, 0.3);}*/

/* ---------------------------------------------------------------------------------------------------- */
/* Moving My Media Down */

/* Make Home page and Movie TV page background images blurry and bright */
/*div.backgroundContainer.withBackdrop:not(div.itemBackgroundContainer) {
    background: rgba(0,0,0,.10); backdrop-filter: saturate(0.4) blur(1.5em);
    -webkit-backdrop-filter: saturate(0.4) blur(1.5em);
}*/

/* OR */

/* Move My Media down to show 1 row and add grey background HAPPY2PLAY */
/*.homeSectionsContainer {
    position: relative;
    top: 38em; 
    background: rgba(0, 0, 0, 0.5);
}*/

/* Move My Media down to show 1 row and add grey background HAPPY2PLAY */
.homeSectionsContainer {
    position: relative;
    top: 35em; 
    background: rgba(0, 0, 0, 0.5);
}

/* Make Movies Series etc list background darker */
div.scrollFrameY.flex.flex-grow.focuscontainer-down.virtualScrollerScrollContainer {
    background: rgba(0, 0, 0, 0.5);
}
/* AND*/
/* Make Music page background darker */
div.scrollSlider.flex-grow.padded-top-page.scrollSliderY {
    background: rgba(0, 0, 0, 0.5);
}

/* Add Dark Symbol online image to blank backgrounds but works everywhere */
/*div.mainAnimatedPages.skinBody {background-image: url("https://msdesign.blob.core.windows.net/wallpapers/microsoft_brand_heritage_04.jpg");}*/
/*div.mainAnimatedPages.SkinBody {background-size: cover;}*/

/* OR */

/* Add to blank home page online image Gollum - remember to untick Enable Backdrops in Display */
div.view-home-home div.focuscontainer-y {background-image: url("https://i.imgur.com/qY5qWry.jpg");}
div.view-home-home div.focuscontainer-y {background-size: cover;}

/* ---------------------------------------------------------------------------------------------------- */
/* TV Guide Alternate Rows */

/* TV guide alternate rows */
/*table > tbody > tr:nth-child(even) {background-color:#FDFDDF; }*/
/* table > tbody > tr:nth-child(odd) {background-color:#DFE6FD; }*/

/* You can do some fancy math as well for every third row */
/*li:nth-child(3n - 2) { }*/

/* LATEST TEST STUFF */

/* Try to to make library scanning bar correct colour */
div#divRunningTasks.infoBanner {color: orange;}

/* Try to make home page banners bigger without affecting music recently frequently played */
div.card.bannerCard.card-hoverable.focusable:not(div.virtualScrollItem.card.bannerCard.card-horiz.bannerCard-horiz.card-hoverable.focusable) {width: 99.9%; !important;}

 

[Happy2Play 8282]

1 hour ago, King Pin said:

/*Move HeaderTop up*/
@media (min-width: 80em) {
div.headerMiddle.sectionTabs.headerMiddle-withSectionTabs:not(.headerMiddle-tv) {    
    position: absolute;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, 0);
    width: 60%;
   }
}

@media (min-width: 100em)
{.portraitCard, .overflowPortraitCard {
    width: 9vw;}
}

button.cardImageContainer {
    background-color: transparent;
}

/*My Powder Blue - #5d7e9b;*/
/*Dark Red  - #A30000;*/
/*Rosewood  - #65000B;*/
/*Burnt Orange - #A34822;*/
/*Another Powder Blue - #718F93;*/
/*Dark Olive Green - #556B2F;*/
/*Dark Orange - #FF8C00;*/

/* ---------------------------------------------------------------------------------------------------- */
/* Overall Colour Scheme */

html:root {
    --mycolour: #A30000; 
}

html:root {
    --myhighlight: #A30000;
}

html:root {
    --theme-primary-color: var(--mycolour);
    --theme-accent-text-color: var(--mycolour);
    --theme-primary-color-lightened: var(--mycolour);
    --theme-icon-focus-background: rgba(120, 120, 120, 0.2);
}

/* ---------------------------------------------------------------------------------------------------- */
/* Home Page */

/* Increase My Media image size */
div.card.smallBackdropCard {width: 0%; !important;}

/* Remove Play indicator button */
.cardOverlayFab-primary {display: none !important;}

/* Make Home Page posters, Movie TV posters, Actors Etc almost black and white but exclude TV guide */
div.scrollSlider.flex-grow.padded-top-page {filter: blur(0px) grayscale(5%)!important;}
/* and exclude Dashboard Family tick boxes */
div.scrollSlider.flex-grow.flex-direction-column.padded-left.padded-left-page.padded-right.padded-top-page.padded-bottom-page.settingsContainer.scrollSliderY {filter: blur(0px) grayscale(0%)!important;}

/* Add dropshadow to tick heart three dots */
button.cardOverlayButton {text-shadow: 2px 4px rgb(139,0,0);}

/* For own logo make bigger on Home Page */
h3.pageTitle.pageTitleWithLogo.pageTitleWithDefaultLogo {height: 3em !important;}

/* Add drop shadow to folder icon */
i.md-icon.cardIndicator.cardIndicatorIcon {text-shadow: 2px 4px rgb(0 0 0);}

/* For long item names wrap text */
div.cardText {white-space: pre-wrap;}

/* Increase font size for top menu */
div.tabs-viewmenubar-slider.emby-tabs-slider.scrollX.hiddenScrollX.scrollSliderX  {font-size: 85% !important;}

/* ---------------------------------------------------------------------------------------------------- */
/* Borders */

/* Set colour of border for highlighted object */
div.cardOverlayContainer:not(.detailMainContainer .cardOverlayContainer) {
    background: transparent;
    box-shadow: 0 0 0 6px var(--myhighlight);
    border-radius: 0.3rem;
}

/* Make border white - if it does... */
/*div.detailMainContainer .cardContent {
    border: 4px solid white;
    border-radius: 1.8rem;
}*/

/* Find where this works - if it does... */
/*div.detailMainContainer .cardOverlayContainer {
    border: 4px solid yellow;
    background: transparent;
    border-radius: 1.8rem;
}*/

/* Add rounded corners to all dashboard items */
div.paperList {
    border-radius: 1.8rem;
}

/* Add rounded corners to dashboard active devices */
div.cardBox.visualCardBox {
    border-radius: 1.8rem;
}

/* Add white border to dashboard active devices */
/*div.sessionNowPlayingContent {
    border: 4px white solid !important;
    border-radius: 1.8rem;
}*/

/* Add round corners to info banner */
div.infoBanner {
    border-radius: 1.8rem;
}

/* ---------------------------------------------------------------------------------------------------- */
/* Movie and Series List */

/* Make alphapicker slightly bigger, lower and change colour */
div.alphaPickerRow-vertical button {color: var(--myhighlight);}
div.alphaPicker-vertical {font-size: 110% !important;}
div.alphaPicker-fixed {top: 8em;}

/* ---------------------------------------------------------------------------------------------------- */
/* Movie and Series Details Page */

/* Move details down */
div.flex-grow.topDetailsMain.flex.flex-direction-column  {padding-top: 1em; }

/* Add transparent grey background to top info, episode list, extra bottom info */  
div.verticalSection.detailMainContainer {background: rgba(0, 0, 0, 0.3); }
div.trackList.vertical-list {background: rgba(0, 0, 0, 0.3); }
div.details-additionalContent.padded-bottom-page.details-additionalContent-withbackdrop {background: rgba(0, 0, 0, 0.3); }

/* Make backdrop much brighter */
div.backgroundContainer.withBackdrop {background: rgba(0,0,0,.10)!important;}

/* Make backdrop almost black and white */
.backdropContainer {filter: blur(0px) grayscale(3%)!important;}

/* Make star rating and rotten tomatoes almost black and white */
div.verticalSection.detailMainContainer {filter: blur(0px) grayscale(3%)!important;}

/* Add gradient to main movie or episode page */
div.itemMainScrollSlider {background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.9));}

/* Resize season posters - if this works... */
/*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%;}*/

/* Media Info remove grey background and box outline */
div.audioVideoMediaInfo .cardContent-shadow, div.audioVideoMediaInfo .defaultCardBackground0 {
    background-color: transparent !important;
    box-shadow: none;
}

/* Close up most gaps between detail rows */
div.itemMainScrollSlider h2.sectionTitle {margin-top: 0;}
div.itemMainScrollSlider .sectionTitleContainer {margin: 0;}
div.itemMainScrollSlider .verticalSection-extrabottompadding {margin-bottom: 0;}

/* Resize season posters - if it works... */
/*div.details-additionalContent div.cardScalable.cardPadder-square:not(.virtualItemsContainer .cardScalable.cardPadder-square) {padding-bottom: 150%; aspect-ratio: 0;}*/

/* Make text bigger for episode summaries*/
div.listItem-overview  {font-size: 120% !important;}

/* ---------------------------------------------------------------------------------------------------- */
/* Genres */

/* Stretch genres vertically so less squashed */
[data-type="Genre"] div.cardPadder-square {
    padding-bottom: 150%;
}

/* ---------------------------------------------------------------------------------------------------- */
/* Movie and Episode and Music Playing Buttons */

/* Change focus colour background leave button */
button.paper-icon-button-light:focus {background-color: rgba(120, 120, 120, 0.2);}

/* Make play etc buttons more transparent */
i.md-icon.detailButton-icon {background-color: rgba(120, 120, 120, 0.2);}

/* ---------------------------------------------------------------------------------------------------- */
/* Music Playing */

/* Move details down for albums */
div.topDetailsContainer.flex.flex-direction-row {padding-top: 40em; }

/* Remove album from now playing */
/*.osdPoster-img {display: None !important}*/
/*.osdPoster-img {width: 16.66%;}*/

/* Make music backdrop full screen and make playlist transparent */
div.backdropContainer.backdropContainer-remotecontrol {right: 0%;}
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(3%);}

/* Add dropshadow to music playlist - if it works... */
/*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;}
h2.videoOsdParentTitle.secondaryText.osdTitle-remotecontrol {font-size: 300%;}*/
div.flex.videoOsdSecondaryText.secondaryText.flex-wrap-wrap.videoOsdSecondaryText-remotecontrol {font-size: 150%;}

/* Playing Now queue - second line of album and song name to MyColour */
h3.videoOsdTitle {color: var(--mycolour) !important;}

/* Playing Now queue - second line of album and song name add dropshadow */
h3.videoOsdTitle {text-shadow: 2px 2px #000000;}

button.itemAction.button-link.osdTextActionButton.emby-button {text-shadow: 2px 2px #000000;}

/* Try to Add dropshadow to play buttons */
/* div.videoOsdBottom-buttons.flex.align-items-center.flex-direction-row.focuscontainer-x.videoOsd-customFont {text-shadow: 2px 2px #000000;} */

/* Get rid of baby album images */
div.osdPlaylist .listItemImageContainer img {display: none;}
/*or*/
/*div.osdPlaylist img.listItemImage {display: none;}*/

/* Stop play button appearing under graphic equaliser */
div.playlistIndexIndicatorImage .listItemOverlayButton-imagehover i {display: none;}

div.flex.flex-grow.align-items-center.flex-shrink-zero {text-shadow: 2px 2px #000000;}

/* Remove album poster from playlist*/
div.osdPosterContainer .cardImageContainer {display: none;}

/* Remove mini album image from playlist */
div.listItemImage.listItemImage-square {display: none !important;}

/* Add grey background to playlist on right of screen */
div.virtualScrollItem.listItem.focusable.listItemCursor.listItem-hoverable.listItem-withContentWrapper.drop-target.ordered-drop-target-y {background: rgba(0,0,0,.33)!important;}

/* Add dropshadow to play buttons */
i.md-icon {text-shadow: 2px 2px #000000;}

/* Add dropshadow to artist and increase size */
h3.videoOsdParentTitle {text-shadow: 2px 2px #000000;}
h3.videoOsdParentTitle {font-size: 200%;}

/* Make playlist toggle button white */
i.md-icon.toggleButtonIcon.toggleButtonIcon-active {color:white; }

/* Make playlist on right narrower */
div.osdContentSection {width: min(10%,75em);}

/* ---------------------------------------------------------------------------------------------------- */
/* Dashboard */

/* Make CSS box bigger */
textarea.txtCustomCss {height: 1200px; width: 860px;}

/* Hide beta message in dashboard */
.betaInfoBanner {display: none}

/* Change card progress indicator color */
progress.playbackProgress::-webkit-progress-value, progress.playbackProgress::-moz-progress-bar {background-color: var(--mycolour);}

/*Make scheduled tasks progress bar MyColour */
div.taskProgressInner {background-color: var(--mycolour);}

/* Running task percentage colour */
#divRunningTasks.paperList  p  span {color: var(--mycolour) !important;}

/* Up to date checkbox to MyColour */
#pUpToDate i {background-color: var(--mycolour) !important;}

/* Activity and alerts to MyColour */
div.listItemImageContainer-round.defaultCardBackground {background-color: var(--mycolour) !important;}

/* Make scheduled tasks percentage colour MyColour */
div.scheduledTaskPaperIconItem[data-status="Running"] span {color: var(--mycolour);}

/* Active devices icons to almost black and white */
img.sessionAppImage {filter: grayscale(3%);}

/* For own logo make bigger on Dashboard */
.pageTitleWithDefaultLogo { height: 2em !important;}

/* Add dropshadow to version number in-home access remote access */
/*a.button-link.emby-button {text-shadow: 1px 1px rgb(0 0 0);}*/
/* OR */
/* Different colour for version number in-home access remote access */
a.button-link.emby-button {color: #E78587;}

/* Add dropshadow to highlighted nav drawer item */
div.navDrawerListItemBody.listItemBody.itemAction {text-shadow: 1px 1px rgb(0 0 0);}
/* OR */
/* Different colour for highlighted nav drawer item */
/*div.navDrawerListItemBody.listItemBody.itemAction {color: #E78587;}*/

/* ---------------------------------------------------------------------------------------------------- */
/* TV Guide */

/* Add backdrop to guide and centre */
/*div.guideContainer.flex-grow.tvguide {background-image: url("https://msdesign.blob.core.windows.net/wallpapers/microsoft_brand_heritage_02.jpg");}*/
/*div.guideContainer.flex-grow.tvguide {background-size: cover; background-position: center; }*/

/* Add backdrop to guide and centre - doesn't look too good */
div.guideContainer.flex-grow.tvguide {background-image: url("https://allhdwallpapers.com/wp-content/uploads/2015/05/Jurassic-World-9.jpg");}
div.guideContainer.flex-grow.tvguide {background-size: cover; background-position: center; }

/* Make program cells transparent to show picture */
/*div.programCellInner {opacity: 0.75; !important}*/
div.programCellInner {background-color: rgba(120, 120, 120, 0.2);}

/* Make All Channels transparent to show picture */
button.channelCell.itemAction {opacity: 0.85; !important}

/* Adjust colour and width of current time indicator */
div.guide-currentTimeIndicatorDot {width: 1px;}
/*div.guide-currentTimeIndicatorDot {background: white;}*/
div.guide-currentTimeIndicatorDot {background: var(--myhighlight);}

/* Remove current time indicator arrow */
div.guide-currentTimeIndicatorDot.guideHeader-currentTimeIndicatorDot::before {display: none;}

/* Make program text bigger */
div.guideProgramNameText {font-size: 125% !important;}

/* Make premiere new etc MyColour */
div.mediaInfoProgramAttribute.mediaInfoItem {background-color: var(--mycolour);}
span.premiereTvProgram.guideProgramIndicator {background-color: var(--mycolour);}

/* Try to make date and time rows at top more opaque */
/*div.headerScroller.emby-scroller {opacity: 0.25; !important}*/
/*div.guide-headerTimeSlots {opacity: 0.25; !important}*/

/* Add border to program cells - vertical only */
.programCell {
    border-width: 0px 2px 0px 2px !important;
    border-color: rgba(0,0,0,0.25) !important;
}

/* Make TV guide rows shallower */
div.virtualScrollItem.epgRow {height: 60px;}

/* Remove channel logo */
div.guideChannelImage {display: none;}

/* Make channel name bigger */
div.guideChannelText.secondaryText {font-size: 120% !important;}

/* Make channel name bold */
div.guideChannelText.secondaryText {font-weight: bold;}

/* Make top left empty box wider */
div.channelCell.firstChannelCell {width: 240px !important;}

/* Make channels column wider */
button.channelCell.itemAction {width: 240px !important;}
button.channelCell.itemAction {
    border-width: 0px 2px 0px 2px!important;
    border-color: rgba(0,0,0,0.25) !important;}

/* Re-align Timeline to correct position */
div.guide-currentTimeIndicatorDot.guideEpg-currentTimeIndicatorDot {margin-left: 16.5em;}

/* Remove top portion of Timeline */
div.guide-currentTimeIndicatorDot.guideHeader-currentTimeIndicatorDot {display: none;}

/* Change colour of text in TV play recording dialog box */
/*div.focuscontainer.dialog.dialog-fixedSize.dialog-small.formDialog.recordingDialog.opened {color: yellow;}*/

/* Make TV play recording dialog box shallower */
div.focuscontainer.dialog.dialog-fixedSize.dialog-small.formDialog.recordingDialog.opened {height: 560px;}

/* Make TV play recording dialog box narrower */
div.focuscontainer.dialog.dialog-fixedSize.dialog-small.formDialog.recordingDialog.opened {width: 800px;}

/* ---------------------------------------------------------------------------------------------------- */
/* New Stuff */

/* Does this do anything... */
/*select#embyselect9.selectAudio.detailTrackSelect.emby-select-inline.emby-select {background: rgba(0, 0, 0, 0.3);}*/

/* ---------------------------------------------------------------------------------------------------- */
/* Moving My Media Down */

/* Make Home page and Movie TV page background images blurry and bright */
/*div.backgroundContainer.withBackdrop:not(div.itemBackgroundContainer) {
    background: rgba(0,0,0,.10); backdrop-filter: saturate(0.4) blur(1.5em);
    -webkit-backdrop-filter: saturate(0.4) blur(1.5em);
}*/

/* OR */

/* Move My Media down to show 1 row and add grey background HAPPY2PLAY */
/*.homeSectionsContainer {
    position: relative;
    top: 38em; 
    background: rgba(0, 0, 0, 0.5);
}*/

/* Move My Media down to show 1 row and add grey background HAPPY2PLAY */
.homeSectionsContainer {
    position: relative;
    top: 35em; 
    background: rgba(0, 0, 0, 0.5);
}

/* Make Movies Series etc list background darker */
div.scrollFrameY.flex.flex-grow.focuscontainer-down.virtualScrollerScrollContainer {
    background: rgba(0, 0, 0, 0.5);
}
/* AND*/
/* Make Music page background darker */
div.scrollSlider.flex-grow.padded-top-page.scrollSliderY {
    background: rgba(0, 0, 0, 0.5);
}

/* Add Dark Symbol online image to blank backgrounds but works everywhere */
/*div.mainAnimatedPages.skinBody {background-image: url("https://msdesign.blob.core.windows.net/wallpapers/microsoft_brand_heritage_04.jpg");}*/
/*div.mainAnimatedPages.SkinBody {background-size: cover;}*/

/* OR */

/* Add to blank home page online image Gollum - remember to untick Enable Backdrops in Display */
div.view-home-home div.focuscontainer-y {background-image: url("https://i.imgur.com/qY5qWry.jpg");}
div.view-home-home div.focuscontainer-y {background-size: cover;}

/* ---------------------------------------------------------------------------------------------------- */
/* TV Guide Alternate Rows */

/* TV guide alternate rows */
/*table > tbody > tr:nth-child(even) {background-color:#FDFDDF; }*/
/* table > tbody > tr:nth-child(odd) {background-color:#DFE6FD; }*/

/* You can do some fancy math as well for every third row */
/*li:nth-child(3n - 2) { }*/

/* LATEST TEST STUFF */

/* Try to to make library scanning bar correct colour */
div#divRunningTasks.infoBanner {color: orange;}

/* Try to make home page banners bigger without affecting music recently frequently played */
div.card.bannerCard.card-hoverable.focusable:not(div.virtualScrollItem.card.bannerCard.card-horiz.bannerCard-horiz.card-hoverable.focusable) {width: 99.9%; !important;}

 

Testing this I don't get any tent on image.  So I am not sure unless it is in your browser cache.

[King Pin 28]

I appreciate you looking into it!  

 

[visproduction 123]

KP,
Here are the style changes in my custom that I use to remove different darken masks.  Maybe some of these will help.
 

 .itemBackdrop {
 	-webkit-mask-image: none !important;
	mask-image: none!important;
 }

/* Turn off shade mask over TV background */
.skinHeader.focuscontainer-x.focuscontainer-up.headroom.flex.align-items-center.flex-grow.headerTop.skinHeader-withBackground.adjustHeaderForEmbeddedScroll.semiTransparent.darkContentContainer.skinHeader-withminidrawer {
	background:transparent;
}
.detailMainContainerParent-fade::before {
    -webkit-mask-image: none!important;
    mask-image: none!important;
    background: transparent!important;
}

 /* Fix dark mask shading for background image */
 .itemBackgroundContainer.withBackdrop, .backgroundContainer.withBackdrop {
	 display:none;
 }

 

[King Pin 28]

36 minutes ago, visproduction said:

KP,
Here are the style changes in my custom that I use to remove different darken masks.  Maybe some of these will help.
 

 .itemBackdrop {
 	-webkit-mask-image: none !important;
	mask-image: none!important;
 }

/* Turn off shade mask over TV background */
.skinHeader.focuscontainer-x.focuscontainer-up.headroom.flex.align-items-center.flex-grow.headerTop.skinHeader-withBackground.adjustHeaderForEmbeddedScroll.semiTransparent.darkContentContainer.skinHeader-withminidrawer {
	background:transparent;
}
.detailMainContainerParent-fade::before {
    -webkit-mask-image: none!important;
    mask-image: none!important;
    background: transparent!important;
}

 /* Fix dark mask shading for background image */
 .itemBackgroundContainer.withBackdrop, .backgroundContainer.withBackdrop {
	 display:none;
 }

 

Weird as I was just working on this.  
I didn't seem to get anywhere with your code as it all stayed the same but I did find a very easy fix.  
@Happy2Play this is what I did.  

I just changed the value from 5 to 0 in 2 spots that are circled in black. 

Now it's all vibrant.  

 

 

 

Edited February 21 by King Pin

[King Pin 28]

@Happy2Play
Would you know where in the CSS I can change this pinkish/rose color?  

I've looked and tried everything but have failed.  

[Happy2Play 8282]

12 minutes ago, King Pin said:

@Happy2Play
Would you know where in the CSS I can change this pinkish/rose color?  

I've looked and tried everything but have failed.  

What accent do you have enabled?

Can only guess you are overriding default inherited.  Disabling default here.

[King Pin 28]

I've changed accent color, theme, settings theme colors and it's always the same.  

[Happy2Play 8282]

7 minutes ago, King Pin said:

I've changed accent color, theme, settings theme colors and it's always the same.  

Per you code listed above you are changing with this.

/* Different colour for version number in-home access remote access */
a.button-link.emby-button {color: #E78587;}

You should have seen your code in the console.

Edited February 25 by Happy2Play

[King Pin 28]

Got it thank you.  I'm learning as I go.  

I used your info from a couple posts ago to highlight the item and find it the way you did. 

 

[qwdqon 0]

For some reason I'm not able to copy the CSS linked from the front page and just change myhighlight and my colour to non red type color tones. The navigation bar red doesn't go away. Does anyone know why? EDIT: TIL hue

Edited February 26 by qwdqon