Jump to content

Custom CSS with Emby Web App

Luke

By Luke
in Web App CSS

 Share

Recommended Posts

PenkethBoy

PenkethBoy 2066

Posted
Posted

try changing  "homepagesection" to "verticalSection" 

Emby Tower

Emby Tower 33

Posted
Posted

try changing  "homepagesection" to "verticalSection" 

/*Hide Recommendations-Because you watched*/
.recommendations.verticalSection {display: none !important;}
It doesn't work ...
Happy2Play

Happy2Play 9441

Posted
Posted

 

/*Hide Recommendations-Because you watched*/
.recommendations.verticalSection {display: none !important;}
It doesn't work ...

 

 

This should be what you are looking for.

/*Hide Recommendations-Because you watched*/
#suggestionsTab .recommendations {display: none;}
  • Like 1
  • 3 weeks later...
Emby Tower

Emby Tower 33

Posted
Posted 
/*Hide Media Info*/
div.detailSection.audioVideoMediaInfo {display: none}

It doesn't work anymore with 3.2.14.0 ...

Happy2Play

Happy2Play 9441

Posted
Posted 
/*Hide Media Info*/
div.detailSection.audioVideoMediaInfo {display: none}

It doesn't work anymore with 3.2.14.0 ...

 

 

Update to

/*Hide Media Info*/
div.verticalSection.detailVerticalSection.audioVideoMediaInfo {display: none}
  • Like 1
Happy2Play

Happy2Play 9441

Posted
Posted

 

This should be what you are looking for.

/*Hide Recommendations-Because you watched*/
#suggestionsTab .recommendations {display: none;}

 

Update to

/*Hide Recommendations-Because you watched*/
#moviesPage div.recommendations {display: none;}
  • Like 1
  • 1 month later...
sh0rty

sh0rty 546

Posted
Posted (edited)

Currently playing a bit with Emby to make the look of the WebClient more mature in my personal view. I know, the noise bg idea is coming from Plex, but I like it really much. Also liked the blur effect @@Luke tried out a few months ago.

/*-------------------------BG Blur------------------------------------------*/
.background-theme-b .backgroundContainer.withBackdrop {
   background: url(/YOUR/PATH/TO/noise_grey.png) !important;
}
 
.backdropContainer {
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
    -webkit-transform: translate3d(0,0,0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000;
    transform: translate3d(0,0,0);
    transform: translateZ(0);
    -webkit-filter: blur(40px) !important;
    -moz-filter: blur(40px) !important;
    -o-filter: blur(40px) !important;
    -ms-filter: blur(40px) !important;
    filter: blur(40px) !important;
}

593d9d2203d78_Unbenannt.png

post-59764-0-24530100-1497210405_thumb.png

Edited by shorty1483
  • Like 1
Luke Emby Team

Luke 40077

Posted
  • Author
Posted

Ebr and I both like Apple TV designs so that is where the inspiration for the blur originally came from.

  • Like 1
  • 3 weeks later...
PenkethBoy

PenkethBoy 2066

Posted
Posted 
/* ----- Increase Home Page folder size ----- */
div.verticalSection.section0 .smallBackdropCard-scalable {
  width: 20%; }

With the new Stable release this does not appear to work anymore

 

Have tried a few variations looking at the page css but my skills on this are very limited

 

Any clues how to get it working again?

 

Thanks

Happy2Play

Happy2Play 9441

Posted
Posted 
/* ----- Increase Home Page folder size ----- */
div.verticalSection.section0 .smallBackdropCard-scalable {
  width: 20%; }

With the new Stable release this does not appear to work anymore

 

Have tried a few variations looking at the page css but my skills on this are very limited

 

Any clues how to get it working again?

 

Thanks

 

 

Thought this was updated awhile ago.

/* My Media Image Size */
#homeTab .smallBackdropCard-scalable {width: 16.5%;}
PenkethBoy

PenkethBoy 2066

Posted
Posted

Thanks

 

Its for the new Stable release which was working fine for me until today

 

Dont use it on BETA 

Guest

Guest

Posted
Posted
About Most Recent Songs

I realized that only the last 5 albums added last, are displayed in the home, but note that there is room for 4 more and I would very much like to see a total of 9 albums that I added last.
 
Is it possible for someone to show me how to do this in CSS?
 
I leave here my thanks in advance.
 
595ac808908ae_Capturar.png
Happy2Play

Happy2Play 9441

Posted
Posted (edited)

 

About Most Recent Songs

 

I realized that only the last 5 albums added last, are displayed in the home, but note that there is room for 4 more and I would very much like to see a total of 9 albums that I added last.

 
Is it possible for someone to show me how to do this in CSS?
 
I leave here my thanks in advance.
 
595ac808908ae_Capturar.png

 

 

Not possible via css, you have to modify a script, but try beta server or wait for the next release.  There will be a scroll feature to show more items.  Mine scrolls 14 items for music.

 

Edit - Is that from Home Screen or Music?

Edited by Happy2Play
Guest

Guest

Posted
Posted

Is that from Home Screen.

Tks very much.

Guest

Guest

Posted
Posted

 

This will remove the label only on that section and not affect any other.

.homePageSection.section0 .cardTextCentered {display: none;}

 

Hi everyone,
In version 3.2.24 did this break again?
Happy2Play

Happy2Play 9441

Posted
Posted

 

Hi everyone,
In version 3.2.24 did this break again?

 

 

:)          

.homeSectionsContainer .cardTextCentered {display: none;}
Guest

Guest

Posted
Posted

 

:)          

.homeSectionsContainer .cardTextCentered {display: none;}

 

Perfect, thank you for the effort and speed.

Guest

Guest

Posted
Posted (edited)

 

:)          

.homeSectionsContainer .cardTextCentered {display: none;}

 

Oops, I just realized now.
This new CSS code also excludes the title under the posters of the movies and what I need is to just remove the title under the menu images.
Sorry I did not detail before.
 
5963ce850a25c_Capturar.png
Edited by CarlosLima
chef

chef 3808

Posted
Posted (edited)

Hi guys I've been messing around with some custom CSS. I can share if you want, some of the stuff I have found and added is kind of neat, although some may find it silly.

I found that adding key frames to the CSS allowed for some cool animations.

For instance, when hovering over a movie in the Webclient, the movie cover will slightly grow but the frame it is in will maintain its size. Then the info will slide up (like it usually does).

Pretty cool.

@keyframes pulseIn {
  from {
    transform: scale3d(1, 1, 1);
  }

  to {
    transform: scale3d(1.10, 1.10, 1.10);
  }
}

.cardImageContainer:hover{
animation-duration: 0.5s;
 animation-name:pulseIn;
}
Edited by chef
chef

chef 3808

Posted
Posted

Is our spinner a single element spinner?

loomes

loomes 40

Posted
Posted

​

 

 

Hi guys I've been messing around with some custom CSS. I can share if you want, some of the stuff I have found and added is kind of neat, although some may find it silly.

I found that adding key frames to the CSS allowed for some cool animations.

For instance, when hovering over a movie in the Webclient, the movie cover will slightly grow but the frame it is in will maintain its size. Then the info will slide up (like it usually does).

Pretty cool.

@keyframes pulseIn {
  from {
    transform: scale3d(1, 1, 1);
  }

  to {
    transform: scale3d(1.10, 1.10, 1.10);
  }
}

.cardImageContainer:hover{
animation-duration: 0.5s;
 animation-name:pulseIn;
}

Very Very Cool :) but on Firefox it dont work, Chrome is ok.

Guest

Guest

Posted
Posted

 

Hi guys I've been messing around with some custom CSS. I can share if you want, some of the stuff I have found and added is kind of neat, although some may find it silly.

 

I found that adding key frames to the CSS allowed for some cool animations.

 

For instance, when hovering over a movie in the Webclient, the movie cover will slightly grow but the frame it is in will maintain its size. Then the info will slide up (like it usually does).

 

Pretty cool.

@keyframes pulseIn {
  from {
    transform: scale3d(1, 1, 1);
  }

  to {
    transform: scale3d(1.10, 1.10, 1.10);
  }
}

.cardImageContainer:hover{
animation-duration: 0.5s;
 animation-name:pulseIn;
}

 

Very cool, I approved and already using.
It worked perfect on Chrome and Edge.
Thanks for sharing.
chef

chef 3808

Posted
Posted (edited)

I was wondering if you guys knew of a good fade transition for the ".itemName" on details screen.

 

It would be cool to fade that in.

 

this might work:

@keyframes blurFadeIn{
	0%{
		opacity: 0;
		text-shadow: 0px 0px 40px #fff;
		transform: scale(1.3);
	}
	50%{
		opacity: 0.5;
		text-shadow: 0px 0px 10px #fff;
		transform: scale(1.1);
	}
	100%{
		opacity: 1;
		text-shadow: 0px 0px 1px #fff;
		transform: scale(1);
	}
}

It would be cool to blur and fade in. LOL! it needs work!

Edited by chef
Happy2Play

Happy2Play 9441

Posted
Posted

 

Oops, I just realized now.
This new CSS code also excludes the title under the posters of the movies and what I need is to just remove the title under the menu images.
Sorry I did not detail before.
 
5963ce850a25c_Capturar.png

 

 

This should be what you want.


div.sections.homeSectionsContainer div.section0 .cardTextCentered {display: none;}
Guest

Guest

Posted
Posted

Now it's perfect as I appreciate it, thank you very much for the tips.

5964d7f24559a_Capturar.jpg

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
 Share
Go to topic listing
×
×
  • Create New...