Jump to content

Custom CSS with Emby Web App


Recommended Posts

Emby Tower

try changing  "homepagesection" to "verticalSection" 

/*Hide Recommendations-Because you watched*/
.recommendations.verticalSection {display: none !important;}
It doesn't work ...
Link to post
Share on other sites
Happy2Play

 

/*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
Link to post
Share on other sites
  • 3 weeks later...
Emby Tower
/*Hide Media Info*/
div.detailSection.audioVideoMediaInfo {display: none}

It doesn't work anymore with 3.2.14.0 ...

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

 

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
Link to post
Share on other sites
  • 1 month later...
shorty1483

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

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

  • Like 1
Link to post
Share on other sites
  • 3 weeks later...
PenkethBoy
/* ----- 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

Link to post
Share on other sites
Happy2Play
/* ----- 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%;}
Link to post
Share on other sites
PenkethBoy

Thanks

 

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

 

Dont use it on BETA 

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

 

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

 

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

 

Hi everyone,
In version 3.2.24 did this break again?

 

 

:)          

.homeSectionsContainer .cardTextCentered {display: none;}
  • Like 1
Link to post
Share on other sites
CarlosLima

 

:)          

.homeSectionsContainer .cardTextCentered {display: none;}

 

Perfect, thank you for the effort and speed.

Link to post
Share on other sites
CarlosLima

 

:)          

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

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

 

 

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.

Link to post
Share on other sites
CarlosLima

 

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

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

 

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