Jump to content
Oxide

Some CSS Fixes & Tweaks :)

Recommended Posts

Emby Tower

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

Share this post


Link to post
Share on other sites
Diedrich

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

Share this post


Link to post
Share on other sites
Emby Tower

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!

Share this post


Link to post
Share on other sites
Happy2Play

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

Share this post


Link to post
Share on other sites
Luke

It's an open issue right now.

  • Like 1

Share this post


Link to post
Share on other sites
Happy2Play

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

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
Happy2Play

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

Share this post


Link to post
Share on other sites
Emby Tower

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!

Share this post


Link to post
Share on other sites
daedalus

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

 

Share this post


Link to post
Share on other sites
Happy2Play

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.

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
drashna

 

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

Share this post


Link to post
Share on other sites
muppet4k

Hi,

 

how can i get the ribbon?


Must i activate some plugin first?

 

 

Bildschirmfoto 2020-06-13 um 09.44.03.png

Share this post


Link to post
Share on other sites
daedalus
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

Share this post


Link to post
Share on other sites
daedalus
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

Share this post


Link to post
Share on other sites
muppet4k

 

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

Share this post


Link to post
Share on other sites
cayars

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

Share this post


Link to post
Share on other sites
PenkethBoy

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

  • Like 1

Share this post


Link to post
Share on other sites
BiTeTHeBiGG

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 1

Share this post


Link to post
Share on other sites

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