Jump to content

Recommended Posts

Posted (edited)

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 by Oxide
  • Like 1
Happy2Play
Posted (edited)

^ while this makes the folder right but quirks up /* Episode Vertical List Played Indicator into Ribbon RHS*/ -> attachicon.gif2.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 by Happy2Play
  • Like 2
Posted

thank you both

 

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

Posted (edited)

and emby strikes back again :P

 

watched indicator for episodes in the person detail screen

post-143-0-94807800-1541686296_thumb.png

Edited by daedalus
Posted

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

5be455f6b0aaf_Annotation.png

 

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 1
Posted

thanks a lot @Oxide :wub:

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

  • Like 1
Posted

 

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

5be455f6b0aaf_Annotation.png

 

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 

Happy2Play
Posted

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.

  • 2 weeks later...
PenkethBoy
Posted

To hide the new message in the beta server .71

 

/* --- Hide Beta Message in Dashboard --- */
.betaInfoBanner {display: none}
  • Like 1
  • 4 months later...
Posted

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?

post-284361-0-08839300-1555856611_thumb.png

  • 5 months later...
Happy2Play
Posted (edited)

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 by Happy2Play
  • Like 2
  • 1 month later...
Happy2Play
Posted

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;}
  • 2 months later...
daedalus
Posted (edited)

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

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); }
  • Like 2
daedalus
Posted

thx a lot

you mind making a RHS version?

 

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

Posted

@@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;}
  • Like 2
Happy2Play
Posted

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

.listItemImageContainer-large {overflow: hidden;}
  • Like 2
Posted

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:

5e1437863ea1e_Before.jpg

 

After:

5e1437acdb2f3_After.jpg

  • Like 2
arrbee99
Posted

Thanks for that - one less pet hate in my life  :)

PenkethBoy
Posted

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?

Posted

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;}
  • Like 1
PenkethBoy
Posted

Ok that works - Thanks

 

BUT you have to change max-width to just width

PenkethBoy
Posted (edited)

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

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...