Some CSS Fixes & Tweaks :)

November 4, 2018

Sorry I don't have Audiobooks or Mixed libraries, I'll try set some up in the next few days and have a look, unless @@Happy2Play beats me to it :lol:

Edited November 4, 2018 by Oxide

November 4, 2018

^ while this makes the folder right but quirks up /* Episode Vertical List Played Indicator into Ribbon RHS*/ -> 2.PNG

I move it to the left as I saw to may quirks on the right for listitems.

Reworked some,

/*Make Count/Played Indicator into Ribbon RHS*/
div.cardIndicators {right: -1.5em;}
 
div.countIndicator, div.playedIndicator {
    width: 75px;
    transform: rotate(45deg);
    border-radius: 0%;
    background: #52B54B;
    border-style: solid;
    border-width: 1px;}
div.playedIndicator i {transform: rotate(-45deg);}

/*Make Folder Indicator into Ribbon LHS*/
div.videoIndicator {
    transform: rotate(-45deg);
    width: 75px;
    left: -21px;
    border-radius: 0%;
    background: rgba(30,30,30,.7);
    border-style: solid;
    border-width: 1px;}
div.videoIndicator i {transform: rotate(45deg);}
 
/* Episode Vertical List Played Indicator into Ribbon LHS*/
#childrenContent .listItem[data-action=none] {padding: 0 0 30px 0;}
#childrenContent .listItemIndicators {top: 4px; left: -21px;}
#childrenContent .listItemImage-large {width: 400px; height: 225px;}
#childrenContent .playedIndicator {
width: 75px;
height: 25px; border-radius: 0%;
transform: rotate(-45deg);
border-style: solid;
border-width: 1px;}
#childrenContent .indicatorIcon {transform: rotate(45deg); }

Edited November 4, 2018 by Happy2Play

November 5, 2018

thank you both

if we could just have this also in the emby apps :rolleyes:

November 6, 2018

More "hacks" from @@Happy2Play pls!

November 8, 2018

and emby strikes back again

watched indicator for episodes in the person detail screen

Edited November 8, 2018 by daedalus

November 8, 2018

@@daedalus I don't get that, I get this:

Below I've pasted the css code I use, feel free to try is out. (Some of the code is from excellent forum members)

/* Hide Paths Box in Dashboard */
#dashboardPage > div > div.dashboardSections > div:nth-child(3) > div:nth-child(4) {display:none;}

/* Hide Media Info */
#itemDetailPage > div.detailPageContent.padded-bottom-page.detailPageContent-nodetailimg > div.verticalSection.detailVerticalSection.audioVideoMediaInfo {display:none;}

/* Make Played Indicator into Ribbon RHS */
.cardIndicators {right: -21px !important; top: 4px !important; left: initial;}
.card .playedIndicator, .card .countIndicator {width: 75px; height: 25px; border-radius: 0%; transform: rotate(45deg) !important; border-style: solid; border-width: 1px; border-color: rgba(255, 255, 255, 1); display: flex; align-items: center; justify-content: center; left: 7px; right: unset;}
div.playedIndicator i {transform: rotate(-45deg);}
.listItemIndicators {top: 4px !important; right: -21px !important;}
.playedIndicator {width: 75px !important; height: 25px !important; border-radius: 0% !important; transform: rotate(45deg) !important; border-style: solid !important; border-width: 1px !important; border-color: rgba(255, 255, 255, 1) !important; display: flex !important; align-items: center !important; justify-content: center !important;}
.progressring {right: 28px;}

/* Ribbon For Video Indicator LHS */
.videoIndicator {background: #c33 !important; left: -21px !important; top: 4px !important; width: 75px !important; height: 25px !important; border-radius: 0% !important; transform: rotate(-45deg) !important; border-style: solid !important; border-width: 1px !important; border-color: rgba(255, 255, 255, 1) !important; display: flex !important; align-items: center !important; justify-content: center !important;}
div.videoIndicator i {transform: rotate(45deg);}

/* Make all Screenshot 16:9 */
.listItemImage-large {width: 400px !important; height: 225px !important; margin-bottom: 1em; overflow: hidden;}
.listItemImage {background-size: cover !important;}
#itemDetailPage > div.detailPageContent.padded-bottom-page.detailPageContent-nodetailimg > div.nextUpSection.verticalSection.detailVerticalSection > div > div > div > div.cardScalable > button {background-size: cover !important;}
.cardContent-button:not(.defaultCardBackground) {background-size: cover !important;}

/* Make Season Poster Correct Size If Using Series Poster */
#childrenContent > div > div > div > div.cardScalable > div.cardPadder-square {padding-bottom: 147% !important;}
#childrenContent > div > div > div > div.cardScalable > div.cardPadder-portrait {padding-bottom: 147% !important;}

/* Make Star Rating Gold */
.starIcon { color: #D4AF37 !important;}

/* Make Top Menu Default Color On All Themes and Slightly Transparent */
.skinHeader-withBackground { background-color: #222 !important; -webkit-box-shadow: none !important; opacity: 0.80;}

/* Make Progress Bar Slightly Larger and Transparent */
.itemProgressBar {height: 10px !important; opacity: 0.75;}
.detailImageProgressContainer {bottom: 0;}

/* Backgound for Card Text */
.cardDefaultText, .cardTextCentered {background: rgba(0, 0, 0, 0.5);}

/* Center Overlay Buttons, Make Slightly Larger and Outline*/
.cardOverlayButton-br {width: 100%; text-align: center; -webkit-text-stroke: 1px black; font-size: 130%;}

/* Change Overlay Transparency */
.cardOverlayContainer{background: rgba(0,0,0,0.25) !important;}

/* Make Background Image Lighter */
.backgroundContainer.withBackdrop {background-color: rgba(0,0,0,.5) !important;}

/* Blur Background */
.backdropImage.displayingBackdropImage{-webkit-filter: blur(4px); filter: blur(4px);}

/* Posters hover and enlarge */
.cardBox:hover {opacity: 1; transform: scale(1.1); transition:all 0.35s ease; filter: contrast(105%);}

November 8, 2018

thanks a lot @Oxide :wub:

your ribbon code works correctly on folder icons and all episodes including the vertical list

November 11, 2018

@@daedalus I don't get that, I get this:

Below I've pasted the css code I use, feel free to try is out. (Some of the code is from excellent forum members)

/* Hide Paths Box in Dashboard */
#dashboardPage > div > div.dashboardSections > div:nth-child(3) > div:nth-child(4) {display:none;}

/* Hide Media Info */
#itemDetailPage > div.detailPageContent.padded-bottom-page.detailPageContent-nodetailimg > div.verticalSection.detailVerticalSection.audioVideoMediaInfo {display:none;}

/* Make Played Indicator into Ribbon RHS */
.cardIndicators {right: -21px !important; top: 4px !important; left: initial;}
.card .playedIndicator, .card .countIndicator {width: 75px; height: 25px; border-radius: 0%; transform: rotate(45deg) !important; border-style: solid; border-width: 1px; border-color: rgba(255, 255, 255, 1); display: flex; align-items: center; justify-content: center; left: 7px; right: unset;}
div.playedIndicator i {transform: rotate(-45deg);}
.listItemIndicators {top: 4px !important; right: -21px !important;}
.playedIndicator {width: 75px !important; height: 25px !important; border-radius: 0% !important; transform: rotate(45deg) !important; border-style: solid !important; border-width: 1px !important; border-color: rgba(255, 255, 255, 1) !important; display: flex !important; align-items: center !important; justify-content: center !important;}
.progressring {right: 28px;}

/* Ribbon For Video Indicator LHS */
.videoIndicator {background: #c33 !important; left: -21px !important; top: 4px !important; width: 75px !important; height: 25px !important; border-radius: 0% !important; transform: rotate(-45deg) !important; border-style: solid !important; border-width: 1px !important; border-color: rgba(255, 255, 255, 1) !important; display: flex !important; align-items: center !important; justify-content: center !important;}
div.videoIndicator i {transform: rotate(45deg);}

/* Make all Screenshot 16:9 */
.listItemImage-large {width: 400px !important; height: 225px !important; margin-bottom: 1em; overflow: hidden;}
.listItemImage {background-size: cover !important;}
#itemDetailPage > div.detailPageContent.padded-bottom-page.detailPageContent-nodetailimg > div.nextUpSection.verticalSection.detailVerticalSection > div > div > div > div.cardScalable > button {background-size: cover !important;}
.cardContent-button:not(.defaultCardBackground) {background-size: cover !important;}

/* Make Season Poster Correct Size If Using Series Poster */
#childrenContent > div > div > div > div.cardScalable > div.cardPadder-square {padding-bottom: 147% !important;}
#childrenContent > div > div > div > div.cardScalable > div.cardPadder-portrait {padding-bottom: 147% !important;}

/* Make Star Rating Gold */
.starIcon { color: #D4AF37 !important;}

/* Make Top Menu Default Color On All Themes and Slightly Transparent */
.skinHeader-withBackground { background-color: #222 !important; -webkit-box-shadow: none !important; opacity: 0.80;}

/* Make Progress Bar Slightly Larger and Transparent */
.itemProgressBar {height: 10px !important; opacity: 0.75;}
.detailImageProgressContainer {bottom: 0;}

/* Backgound for Card Text */
.cardDefaultText, .cardTextCentered {background: rgba(0, 0, 0, 0.5);}

/* Center Overlay Buttons, Make Slightly Larger and Outline*/
.cardOverlayButton-br {width: 100%; text-align: center; -webkit-text-stroke: 1px black; font-size: 130%;}

/* Change Overlay Transparency */
.cardOverlayContainer{background: rgba(0,0,0,0.25) !important;}

/* Make Background Image Lighter */
.backgroundContainer.withBackdrop {background-color: rgba(0,0,0,.5) !important;}

/* Blur Background */
.backdropImage.displayingBackdropImage{-webkit-filter: blur(4px); filter: blur(4px);}

/* Posters hover and enlarge */
.cardBox:hover {opacity: 1; transform: scale(1.1); transition:all 0.35s ease; filter: contrast(105%);}

Like: I wonder if nobody likes the idea, changing the ribbon color from red to something when you watched all of the episodes

November 11, 2018

Like: I wonder if nobody likes the idea, changing the ribbon color from red to something when you watched all of the episodes

Well beginning in 3.6 when a series/show has been watched there are no more indicators. But yes you can have playindicator one color and countindicator another.

November 26, 2018

To hide the new message in the beta server .71

/* --- Hide Beta Message in Dashboard --- */

.betaInfoBanner {display: none}

April 21, 2019

I've just come across this thread and am really liking some of the brilliant tweaks. I noticed that the ribbon doesn't work properly in list view, but that is minor because that is a horrible view and I never plan to use it lol!

Does anyone know if it is possible to display everything Live TV related (on the Home and Programme screens, as well as the More Like This section) as thumbs rather than the default primary portrait image?

September 23, 2019

Mild tweaking as List View has some issues, using existing code. This is for LHS Ribbons as RHS ribbons just don't play well on episodes. Couldn't really get List View to work with Ribbons so they are just regular indicators, shrunk and moved to the left. You may have to adjust the height and width in List View if you have over 100 unwatched episodes.

Think I worked out issues in list view as watched indicators had issues on Movies and Trailers.

/*Make Played Indicator into Ribbon LHS*/
.playedIndicator i, .syncIndicator i {font-size: 150%; transform: rotate(45deg);}
.card .playedIndicator, .card .countIndicator {width: 75px; height: 25px; border-radius: 0%; transform: rotate(-45deg); border-style: solid; border-width: 1px; border-color: rgba(255, 255, 255, 0.5); display: flex; align-items: center; justify-content: center;}
div.cardIndicators {right: initial top: 4px; left: -21px;}
 
/*List View*/
#moviesPage div.listItemImage.itemAction.lazy i, [data-type="Trailer"] div.listItemImage.itemAction.lazy i {transform: rotate(0deg);}
div.listItemImage.itemAction.lazy div.listItemIndicators {left: 7px; top: 0; font-size: 10px;}
div.listItemImage.itemAction.lazy div.indicator {width: 15px; height: 15px;}
 
/*Make Folder Indicator into Ribbon LHS*/
div.videoIndicator {
    transform: rotate(-45deg);
    width: 75px;
    left: -21px;
    border-radius: 0%;
    background: rgba(30,30,30,.7);
    border-style: solid;
    border-width: 1px;}
div.videoIndicator i {transform: rotate(45deg);}
 
/* Episode Vertical List Played Indicator into Ribbon LHS*/
#childrenContent div.listItem[data-action=none] {padding: 0 0 30px 0;}
#childrenContent div.listItemIndicators {top: 4px ; left: -21px;}
#childrenContent div.listItemImage-large {width: 400px ; height: 225px;}
#childrenContent div.playedIndicator {width: 75px ; height: 25px ; border-radius: 0% ; transform: rotate(-45deg) ; border-style: solid ; border-width: 1px ; border-color: rgba(255, 255, 255, 0.5) ; display: flex ; align-items: center ; justify-content: center ;}
#childrenContent div.listItem-content {background: rgba(0, 0, 0, 0.3);}

Edited September 23, 2019 by Happy2Play

November 5, 2019

Minor tweak to fix indicators on playlist.

add to above code

#childrenContent.verticalSection-extrabottompadding div.playedIndicator {width: 15px; height: 15px; border-radius: 100em;}
#childrenContent.verticalSection-extrabottompadding div.listItemIndicators {top: 0px; left: 7px;}

January 6, 2020

they killed the right ribbon on the season page episode list again <_<

5e127b2b96175_Anmerkung20200106011114.pn

I've just come across this thread and am really liking some of the brilliant tweaks. I noticed that the ribbon doesn't work properly in list view, but that is minor because that is a horrible view and I never plan to use it lol!

this is still an issue

5e127c2fef39d_Anmerkung20200106011432.pn

Edited January 6, 2020 by daedalus

January 6, 2020

Here is updated LHS code for 4.4.0.5+ (BETA)

/*Make Played Indicator into Ribbon LHS*/
.playedIndicator i, .syncIndicator i {font-size: 150%; transform: rotate(45deg); }
.card .playedIndicator, .card .countIndicator {width: 75px; height: 25px; border-radius: 0%; transform: rotate(-45deg); border-style: solid; border-width: 1px; border-color: rgba(255, 255, 255, 0.5); display: flex; align-items: center; justify-content: center; }
div.cardIndicators {left: -21px; }

/*List View-Playlists*/
#moviesPage div.listItemImageContainer i, [data-action="playallfromhere"] div.listItemImageContainer i {transform: rotate(0deg);}
[data-action="link"] div.listItemImageContainer div.listItemIndicators, [data-action="playallfromhere"] div.listItemImageContainer div.listItemIndicators {left: 0; top: 0; font-size: 10px;  }
div.listItemImageContainer div.indicator {width: 15px; height: 15px; }


/*Make Folder Indicator into Ribbon LHS*/
div.videoIndicator {
    transform: rotate(-45deg);
    width: 75px;
    left: -21px;
    border-radius: 0%;
    background: rgba(30,30,30,.7);
    border-style: solid;
    border-width: 1px; }
div.videoIndicator i {transform: rotate(45deg); }
 
/* Episode Vertical List Played Indicator into Ribbon LHS*/
div.listItem[data-type="Episode"] {padding: 0 0 30px 0; }
div.listItemImageContainer-large div.listItemIndicators {top: 4px ; left: -28px; }
div.listItemImageContainer-large  div.listItemImageContainer-large  {width: 400px ; height: 225px; }
div.listItemImageContainer-large  div.playedIndicator {width: 75px ; height: 25px ; border-radius: 0% ; transform: rotate(-45deg) ; border-style: solid; border-width: 1px; border-color: rgba(255, 255, 255, 0.5); display: flex; align-items: center; justify-content: center; }
div.listItem-content {background: rgba(0, 0, 0, 0.3); }

January 6, 2020

thx a lot

you mind making a RHS version?

tried on myself but i seem to be too dump -_-

January 6, 2020

@@daedalus I've quickly modified @@Happy2Play excellent fixes above for RHS version, let me know if it's working for you

/*Make Played Indicator into Ribbon RHS*/
.playedIndicator i, .syncIndicator i {font-size: 150%; transform: rotate(-45deg); }
.card .playedIndicator, .card .countIndicator {width: 75px; height: 25px; border-radius: 0%; transform: rotate(45deg); border-style: solid; border-width: 1px; border-color: rgba(255, 255, 255, 0.5); display: flex; align-items: center; justify-content: center; }
div.cardIndicators {right: -21px;}

/*List View-Playlists*/
#moviesPage div.listItemImageContainer i, [data-action="playallfromhere"] div.listItemImageContainer i {transform: rotate(0deg);}
[data-action="link"] div.listItemImageContainer div.listItemIndicators, [data-action="playallfromhere"] div.listItemImageContainer div.listItemIndicators {left: 0; top: 0; font-size: 10px;}
div.listItemImageContainer div.indicator {width: 15px; height: 15px;}

/*Make Folder Indicator into Ribbon RHS*/
div.videoIndicator {transform: rotate(-45deg); width: 75px; left: -21px; border-radius: 0%; background: rgba(30,30,30,.7); border-style: solid; border-width: 1px;}
div.videoIndicator i {transform: rotate(45deg);}
 
/* Episode Vertical List Played Indicator into Ribbon RHS*/
div.listItem[data-type="Episode"] {padding: 0 0 30px 0;}
div.listItemImageContainer-large div.listItemIndicators {top: 4px ; right: -21px;}
div.listItemImageContainer-large  div.listItemImageContainer-large  {width: 400px ; height: 225px;}
div.listItemImageContainer-large  div.playedIndicator {width: 75px ; height: 25px ; border-radius: 0% ; transform: rotate(45deg) ; border-style: solid; border-width: 1px; border-color: rgba(255, 255, 255, 0.5); display: flex; align-items: center; justify-content: center;}
div.listItem-content {background: rgba(0, 0, 0, 0.3);}
.listItemImageContainer-large {overflow: hidden;}

January 7, 2020

One addition to "/* Episode Vertical List Played Indicator into Ribbon LHS*/" to cover scaling/screen size, thanks to @@Oxide

.listItemImageContainer-large {overflow: hidden;}

January 7, 2020

This will fix the "square" appearance of Season Posters if they no artwork and are using the Series Poster.

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

Before:

After:

January 7, 2020

Thanks for that - one less pet hate in my life

January 7, 2020

working great

thx @Happy2Play & @Oxide for your great help and caring :wub: :wub:

January 7, 2020

Need a little help

i have the following to change the size of the new huge poster etc images

/* ----- Change Movie/TV Active Thumbnail Image Size ----- */
.detailImage-main {width: 60%; }

But what i cant do is reduce the size of the container that the image is in - so end up with a gap between image and item detail

5e14b522341c7_Annotation20200107164231.j

Any hints what i am missing?

January 7, 2020

Try this, you can play with the "13" below to see what suits you best, if you use a % value it leaves a gap to the right of the image.

.detailImage-main {max-width: 13vw;}

January 7, 2020

Ok that works - Thanks

BUT you have to change max-width to just width

January 7, 2020

with the new items page code in beta - due i think to adding favs to home page

has anybody figured out how to target specific types of pages

as i cant see an obvious way to apply different codes to TV episodes/Movies etc etc - as page code appears to be the same

so the .detailImage-main {width: 13vw;} applies to movies episode and artist pages etc and would like to apply diff widths to movies compared to episodes etc

Edited January 7, 2020 by PenkethBoy

Some CSS Fixes & Tweaks :)

Recommended Posts

Oxide 139

Link to comment

Share on other sites

Happy2Play 8928

Link to comment

Share on other sites

daedalus 430

Link to comment

Share on other sites

makarai 108

Link to comment

Share on other sites

daedalus 430

Link to comment

Share on other sites

Oxide 139

Link to comment

Share on other sites

daedalus 430

Link to comment

Share on other sites

makarai 108

Link to comment

Share on other sites

Happy2Play 8928

Link to comment

Share on other sites

PenkethBoy 2066

Link to comment

Share on other sites

hshah 19

Link to comment

Share on other sites

Happy2Play 8928

Link to comment

Share on other sites

Happy2Play 8928

Link to comment

Share on other sites

daedalus 430

Link to comment

Share on other sites

Happy2Play 8928

Link to comment

Share on other sites

daedalus 430

Link to comment

Share on other sites

Oxide 139

Link to comment

Share on other sites

Happy2Play 8928

Link to comment

Share on other sites

Oxide 139

Link to comment

Share on other sites

arrbee99 1622

Link to comment

Share on other sites

daedalus 430

Link to comment

Share on other sites

PenkethBoy 2066

Link to comment

Share on other sites

Oxide 139

Link to comment

Share on other sites

PenkethBoy 2066

Link to comment

Share on other sites

PenkethBoy 2066

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in