Some CSS Fixes & Tweaks :)

[Emby Tower 33]

And now I don't know what to say, I just pasted your code and it works like a charm. Thanks a lot!

[Diedrich 357]

And now I don't know what to say, I just pasted your code and it works like a charm. Thanks a lot!

Could have been browser caching not being refreshed

[Emby Tower 33]

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:

 

What is the correct one for the actual stable version?

 

Thanks a lot!

[Happy2Play 8845]

@@Luke is there a reason inherited Season images present in square instead of portrait still, as shown above?

[Luke 37932]

It's an open issue right now.

[Happy2Play 8845]

What is the correct one for the actual stable version?

 

Thanks a lot!

 

Something like this.

[data-type="Season"] div.cardScalable.cardPadder-square {padding-bottom: 147%;}

[daedalus 430]

the circles seem to be rendered differently on different browsers

 

Firefox              ||      Edge (Chorme)

 

     ||    

 

and on both, the circle is still there and broader than the banner

 

but on the season view, both look the same:

 

Firefox                        ||    Edge (Chorme)

     ||   

Edited March 25, 2020 by daedalus

[Happy2Play 8845]

the circles seem to be rendered differently on different browsers

 

Firefox              ||      Edge (Chorme)

 

ff.png     ||     edge(chorme).png

 

and on both, the circle is still there and broader than the banner

 

but on the season view, both look the same:

 

Firefox                        ||    Edge (Chorme)

ff.png     ||    edge(chorme).png

 

Because FireFox does there own thing.

 

Add this.

div.countIndicator, i.playedIndicator {
    background: transparent;
    box-shadow: none;
}

I personally can't tell what the difference in the 16:9 image compare.

[Emby Tower 33]

How can I switch to another font?

 

I've installed Nexa Bold on all PCs, but don't find the correct css code.

 

Thanks a lot!

[daedalus 430]

I personally can't tell what the difference in the 16:9 image compare.

 

because there is no difference, the indicator on the season view is just "different", what leads to the same apperence in both browsers

 

but on the season view, both look the same:

 

Firefox                        ||    Edge (Chorme)

ff.png     ||    edge(chorme).png

 

[Happy2Play 8845]

How can I switch to another font?

 

I've installed Nexa Bold on all PCs, but don't find the correct css code.

 

Thanks a lot!

Have you seen this topic?

https://emby.media/community/index.php?/topic/70905-change-font-size/page-1

 

May have to add additional elements, like "button".  All depends on what area you what to change.

[Emby Tower 33]

Have you seen this topic?

https://emby.media/community/index.php?/topic/70905-change-font-size/page-1

 

May have to add additional elements, like "button".  All depends on what area you what to change.

I want to use "Nexa Bold" for the whole Emby Server...

[Happy2Play 8845]

I want to use "Nexa Bold" for the whole Emby Server...

 

So something like this, I haven't looked at all areas so there may be more elements.

/*Change Font*/
html, h1, h2, h3, button {font-family: "Nexa Bold"; }

Edited April 2, 2020 by Happy2Play
typo in button

[drashna 47]

 

So something like this, I haven't looked at all areas so there may be more elements.

/*Change Font*/
html, h1, h2, h3, button {font-family: "Nexa Bold"; }

 

 

I want to use "Nexa Bold" for the whole Emby Server...

 

 

I use this, and it works well:

@font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: normal;
    src: local('Ubuntu Regular'), local('Ubuntu-Regular'), url(https://fonts.gstatic.com/s/ubuntu/v11/4iCs6KVjbNBYlgoKfw72.woff2) format('woff2');
}
* {
    font-family: 'Ubuntu';
}
body * {
    font-family: 'Ubuntu';
}

::cue {
    font-family: 'Ubuntu'!important;
    font: 'Ubuntu'!important;
}

It is a fairly brute forcing of it, but it works well, and doesn't break icons/symbols. 

 

I don't know what to say as this is what I get with the code posted in post 95 and 96, no other code.

 

LHS/RHS

 

 

 

 

On 4.4.1.0, that doesn't appear to be the case anymore?   At least, not for me.  Series and episodes (and folders) work, but it's still a circle for movies. 

[muppet4k 10]

Hi,

 

how can i get the ribbon?

Must i activate some plugin first?

 

 

[daedalus 430]

2 hours ago, muppet4k said:

how can i get the ribbon?
Must i activate some plugin first?

no, just add the corresponding css code in this section in the server dashboard

 

and be aware this only works in the webclient not in any app

[daedalus 430]

On 4/7/2020 at 3:24 PM, drashna said:

On 4.4.1.0, that doesn't appear to be the case anymore?   At least, not for me.  Series and episodes (and folders) work, but it's still a circle for movies. 

still woking on latest beta 4.5.0.12

 

just list view is broken

[muppet4k 10]

 

yes i put the css in the custom css, but doesnt work. Only on the beta working?
 

 

[Carlo 4337]

@Happy2Play got a question for you.  Is it possible to provide a right hand ribbon for MOVIES without a check mark or number inside it to be used only when the movie has NOT been watched (opposite of current functionality)?

This to me would make more sense as any time you see the ribbon (show or movie) it means there is unwatched content.  Any time there is not a ribbon everything has been watched.

Possible to do that code?

[PenkethBoy 2066]

 java script would be able to do that - but would need replacing on each server upgrade etc

[BiTeTHeBiGG 13]

Hi, may be not 100% safe, but simpler css modification for RHS without adding pseudo elements. It works with series and episodes. It does not break movies view or search view. Those I will try later.

For Version 4.5.2.0

/* Episode Counter */
.countIndicator {
  transform: rotate(45deg);
  width: 75px;
  height: 25px;
}
.cardCountIndicator {
  right: -1.725em;
}
/* Episode Watched Status Vertical List */
.listItemIndicators {
  right: -1.4em;
  border-radius: 100em;
  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12), 0 3px 1px -2px rgba(0,0,0,.2);
  transform: rotate(45deg);
  background: var(--theme-primary-color);
}
.listItemImageContainer {
  overflow: hidden;
}
.listItemIndicators .playedIndicator {
  width: 75px;
  box-shadow: none;
  transform: rotate(-45deg);
  background: none !important;
}
/* Movie Watched Status AND Episode Watched Status Within Search AND Episode Watched Status Horizontal List */
button.cardContent-button > i::before{
  width: 75px;
  height: 25px;
  transform: rotate(45deg);
  content: ' ';
  background: var(--theme-primary-color);
  position: absolute;
  top: 1.3em;
  z-index: -1;
  border-radius: 100em;
  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12), 0 3px 1px -2px rgba(0,0,0,.2);
}
button.cardContent-button > i{
width: 75px;
  height: 75px;
  top: -1.2em;
  right: -1.2em;
  position: absolute;
}
.cardContent-button .playedIndicator {
  background: none !important;
  box-shadow: none !important;
}

EDIT: Done, I hope it helps someone

Edited October 11, 2020 by BiTeTHeBiGG

[Happy2Play 8845]

4.6.0.37+ 

Season view

/*RH Season View*/
div.listItemImageContainer-large i.listItemIndicator:before {
    width: 100px;
    height: 25px;
    transform: rotate(45deg);
    content: ' ';
    background: #0C57D6;
    z-index: -1;
    position: absolute;
    border-style: solid;
    border-width: 1px;
    border-color: rgba(255, 255, 255, 0.5);
}

div.listItemImageContainer-large i.listItemPlayedIndicator {
    overflow: visible;
    z-index: 1;
    background: none;
    box-shadow: none;
}

/*LH Season View*/
div.listItemImageContainer-large i.listItemIndicator:before {
    width: 100px;
    height: 25px;
    transform: rotate(-45deg);
    content: ' ';
    background: #0C57D6;
    z-index: -1;
    position: absolute;
    border-style: solid;
    border-width: 1px;
    border-color: rgba(255, 255, 255, 0.5);
}

div.listItemImageContainer-large i.listItemPlayedIndicator {
    overflow: visible;
    z-index: 1;
    background: none;
    left: -275px;
    box-shadow: none;
}

List View Movies

/*RH Movie List View*/
div.listItemImageContainer-portrait i.listItemIndicator:before  {
    width: 50px;
    height: 20px;
    transform: rotate(45deg);
    content: ' ';
    background: #0C57D6;
    z-index: -1;
    position: absolute;
    border-style: solid;
    border-width: 1px;
    border-color: rgba(255, 255, 255, 0.5);
}

div.listItemImageContainer-portrait i.listItemPlayedIndicator {
    overflow: visible;
    z-index: 1;
    background: none;
    box-shadow: none;
}

/*LH Movie List View*/
div.listItemImageContainer-portrait i.listItemIndicator:before {
    width: 50px;
    height: 20px;
    transform: rotate(-45deg);
    content: ' ';
    background: #0C57D6;
    z-index: -1;
    position: absolute;
    border-style: solid;
    border-width: 1px;
    border-color: rgba(255, 255, 255, 0.5);
}

div.listItemImageContainer-portrait i.listItemPlayedIndicator {
    overflow: visible;
    z-index: 1;
    box-shadow: none;
    background: none;
    left: -30px;
}

List View TV

/*RH TV List View*/
div.listItemImageContainer-portrait .listItemIndicator-mini:before  {
    width: 50px;
    height: 20px;
    transform: rotate(45deg);
    content: ' ';
    background: #0C57D6;
    z-index: -1;
    position: absolute;
    border-style: solid;
    border-width: 1px;
    border-color: rgba(255, 255, 255, 0.5);
}

div.listItemImageContainer-portrait .listItemCountIndicator  {
    overflow: visible;
    z-index: 1;
    background: none;
    box-shadow: none;
    right: -4px;
    top: -3px;
}

/*LH TV List View*/
div.listItemImageContainer-portrait .listItemIndicator-mini:before {
    width: 50px;
    height: 20px;
    transform: rotate(-45deg);
    content: ' ';
    background: #0C57D6;
    z-index: -1;
    position: absolute;
    border-style: solid;
    border-width: 1px;
    border-color: rgba(255, 255, 255, 0.5);
}

div.listItemImageContainer-portrait .listItemCountIndicator  {
    overflow: visible;
    z-index: 1;
    box-shadow: none;
    background: none;
    left: -4px;
    top: -3px;
}

Normal view indicator Ribbons

RH 

/*Make Indicator into Ribbon RHS*/
.cardPlayedIndicator, .cardCountIndicator {
    overflow: visible;
}

.cardPlayedIndicator:before, .cardCountIndicator:before {
    width: 75px;
    height: 25px;
    transform: rotate(45deg);
    content: ' ';
    background: #0C57D6;
    z-index: -1;
    position: absolute;
    border-style: solid;
    border-width: 1px;
    border-color: rgba(255, 255, 255, 0.5);
}

LH

/*Make Indicator into Ribbon LHS*/
.cardPlayedIndicator, .cardCountIndicator {
    overflow: visible;
    left: 0;
}

.cardPlayedIndicator:before, .cardCountIndicator:before {
    width: 75px;
    height: 25px;
    transform: rotate(-45deg);
    content: ' ';
    background: #0C57D6;
    z-index: -1;
    position: absolute;
    border-style: solid;
    border-width: 1px;
    border-color: rgba(255, 255, 255, 0.5);
}

 

Only tested in Edge/Chrome

Edited April 10, 2021 by Happy2Play

[Guest]

I will have to check this out... Thanks. ( I still keep thinking about Skinning Emby completely... I wanna wait though.. )

[KMBanana 95]

Updated to 4.6.0.50 stable today and some of the ribbon changes for 4.6.0.37+ don't seem to be working for me.  

The only one that appears to work for me is "Normal view indicator Ribbons" and only for TV shows, not movies.  They working for anyone else or is it something funky on my end?

[Happy2Play 8845]

3 minutes ago, KMBanana said:

Updated to 4.6.0.50 stable today and some of the ribbon changes for 4.6.0.37+ don't seem to be working for me.  

The only one that appears to work for me is "Normal view indicator Ribbons" and only for TV shows, not movies.  They working for anyone else or is it something funky on my end?

Can you elaborate as I just applied to a newly updated system without issue.