Jump to content

Recommended Posts

Emby Tower
Posted

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

Diedrich
Posted

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
  • Like 1
Emby Tower
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

 

What is the correct one for the actual stable version?

 

Thanks a lot!

Happy2Play
Posted

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

Posted

It's an open issue right now.

  • Like 1
Happy2Play
Posted

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%;}
  • Like 1
daedalus
Posted (edited)

the circles seem to be rendered differently on different browsers

 

Firefox              ||      Edge (Chorme)

 

post-143-0-01218700-1585165794_thumb.png     ||     post-143-0-20434000-1585165799_thumb.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)

post-143-0-05108900-1585166187_thumb.png     ||    post-143-0-76390700-1585166180_thumb.png

Edited by daedalus
Happy2Play
Posted

the circles seem to be rendered differently on different browsers

 

Firefox              ||      Edge (Chorme)

 

attachicon.gifff.png     ||     attachicon.gifedge(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)

attachicon.gifff.png     ||    attachicon.gifedge(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.

  • Like 1
Emby Tower
Posted

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
Posted

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)

attachicon.gifff.png     ||    attachicon.gifedge(chorme).png

 

Happy2Play
Posted (edited)

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 by Happy2Play
typo in button
  • Like 1
Posted

 

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

 

5e79de11655d5_lhs1.jpg

 

5e79de2628648_lhs2.jpg

 

5e79de528a0de_lhs3.jpg

 

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. 

  • Like 1
  • 2 months later...
muppet4k
Posted

Hi,

 

how can i get the ribbon?


Must i activate some plugin first?

 

 

Bildschirmfoto 2020-06-13 um 09.44.03.png

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

1460062173_Screenshot_2020-06-13Emby.png.2e327807a74a0881efb0ac55d09084b9.png

 

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

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

5027_Screenshot_2020-06-13Emby(1).png.55aecf5afcf8592966a87ba0739f8454.png

 

just list view is broken

1007914189_Screenshot_2020-06-13Emby(2).png.c8ffcdf18f25a092416a6a5bbfbe5e3e.png

muppet4k
Posted

 

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

 

Bildschirmfoto 2020-06-14 um 10.00.46.png

  • 2 months later...
Posted

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

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

  • Like 1
  • 1 month later...
BiTeTHeBiGG
Posted (edited)

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 by BiTeTHeBiGG
  • Like 2
  • 5 months later...
Happy2Play
Posted (edited)

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

rh.jpg.5643ac3b1534060b15e2a855ceac2448.jpg

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

lh.jpg.c77b00c37d786248b039c0e454b578d2.jpg

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

223649205_listrh.jpg.61f96c0246026b4cd8db1021686dc838.jpg

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

2116811880_listlh.jpg.eb8d1b93846e594d79dea790732008d3.jpg

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

1918874060_countrh.jpg.cceb19f7f8d10b7ce0a0995a4dfd25d0.jpg

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

1805459155_countlh.jpg.5300fc7f4e4660f5c1972bfba1d58863.jpg

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

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

  • 1 month later...
KMBanana
Posted

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

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