Jump to content

Customize home screen rows


paul1965
 Share

Go to solution Solved by Happy2Play,

Recommended Posts

I made the switch from Plex to Emby not that long ago, and I really do like how much Emby can be customized. I currently have 12 libraries listed on my home screen, but what I don't like is that I can't customize how they appear in relation to the number of rows. For example, right now 8 of the 12 libraries appear in the top row, then the other 4 in the 2nd row (this is when viewed on a 65" TV, maybe it's different on a standard monitor). I'd like to be able to customize the home screen further than is currently possible by telling Emby how many rows to display, then which libraries go in each row (in my case 6 in the top, 6 in the bottom). A further step would be to then center each row on the screen instead of the current left justification. 

 

Any thoughts or suggestions?

Link to comment
Share on other sites

arrbee99

In Chrome it is possible to add a bit of css code to change the size of the My Media items, thus expand them to take up two rows or shrink to occupy one (probably too small in that case though). Unfortunately as far as I know that can only be done in Chrome (or another web browser), not in actual apps.

 

If you wait a bit, hopefully someone will come along who actually knows what they're talking about...

Link to comment
Share on other sites

Happy2Play

And what client/app would this be? 

Edited by Happy2Play
Link to comment
Share on other sites

Yeah sorry Happy, I knew I was forgetting something. Running Emby Server on a W8.1 PC.

 

arrbee99 I use custom images for the library folders, so using custom css might cause them to distort (depending on how they would be stretched to fill screen space).

Edited by paul1965
Link to comment
Share on other sites

Happy2Play

But what client are you using to display on your TV?  Are you just using a Browser or something else?

Link to comment
Share on other sites

But what client are you using to display on your TV?  Are you just using a Browser or something else?

 

Just using Firefox to display Emby on the TV.

Link to comment
Share on other sites

arrbee99

Yeah sorry Happy, I knew I was forgetting something. Running Emby Server on a W8.1 PC.

 

arrbee99 I use custom images for the library folders, so using custom css might cause them to distort (depending on how they would be stretched to fill screen space).

 

Fair enough. Think it was Happy2play who came up with mine - it just makes My Media bigger so that its the same size as Continue Watching, which is the next section down.

Link to comment
Share on other sites

  • Solution
Happy2Play

Custom CSS will affect all web browser viewing but you can try this for scaling and as for library order, you set that via User icon-Home Screen.

 

Dashboard-Settings-Custom CSS

/* My Media Image Size */
#homeTab .smallBackdropCard {
    width: 25%;}

Increase or Decrease to your needs

  • Like 1
Link to comment
Share on other sites

Custom CSS will affect all web browser viewing but you can try this for scaling and as for library order, you set that via User icon-Home Screen.

 

Dashboard-Settings-Custom CSS

/* My Media Image Size */
#homeTab .smallBackdropCard {
    width: 25%;}

Increase or Decrease to your needs

 

Wow, that worked pretty damn good! Plugged it into Stylish, set it for just the local host IP, adjusted it to 15% and voila! Thanks for the awesome help Happy!

Link to comment
Share on other sites

Further tweaking to 16.5% gives me exactly what I wanted: 6 rows on top and they're centered on the screen. And I know Stylish got a pretty bad rap early on for their data collection, so I switched over to Stylus. Thanks again Happy!

Link to comment
Share on other sites

Fair enough. Think it was Happy2play who came up with mine - it just makes My Media bigger so that its the same size as Continue Watching, which is the next section down.

 

And you were right on the money that some custom css would work. Implementing is always my concern until I remembered some of the great css add-ons available for Firefox. Thanks!

  • Like 1
Link to comment
Share on other sites

Happy2Play

Don't know much about firefox or add-ons but css can go straight into Emby...

 

 

Well if it can be done via a browser add-on then you could set it up to only affect one client.

  • Like 1
Link to comment
Share on other sites

Don't know much about firefox or add-ons but css can go straight into Emby...

 

5ba5a89f9c7c8_EmbyCSSlocation.jpg

 

arrbee99, could you post a screenshot of what your home screen looks like with this css? I really like how My Media looks now, so the next thing for me is to get Latest Antenna, Latest Cable, etc to be the same size. I have a thing for keeping things symmetrical...

Link to comment
Share on other sites

arrbee99

Don't think this'll help much cos it only shows the top (My Media and Continue Watching being the same size)...

 

5baae57f9cdef_EmbyHomeScreen1.jpg

 

...and I really should fix that Playlists turquoise thing. I tried zooming out in Chrome but it just makes the text microscopic.

 

This is what I have (from Happy2play and others) -

 

.backgroundContainer.withBackdrop {
    background: rgba(0,0,0,.5)!important;
}
 
.backdropContainer {
     filter: blur(0px) grayscale(0%)!important;
}
 
.alphaPicker-vertical {
    font-size: 125% !important;
}
 
.alphaPicker {
    bottom: 40px !important;
}
 
/* My Media Image Size */
#homeTab .smallBackdropCard {width: 20.0%; !important;}
 
/* ----- Change Movie Active Thumbnail Image Size ----- */
#itemDetailPage .portraitDetailImageContainer {
     display: none; !important;
}
 
/* ----- Change TV Active Episode Thumbnail Image Size ----- */
#itemDetailPage .thumbDetailImageContainer {
    width: 25% !important;
}
 
.detailLogo {top: 40em;}
 
.detailPageContent {padding-top: 30em;}
 
#castContent .cardImageIcon {color: white;}
 
#castContent .defaultCardBackground1,
#castContent .defaultCardBackground2,
#castContent .defaultCardBackground3,
#castContent .defaultCardBackground4,
#castContent .defaultCardBackground5
 {background-color: rgba(55,55,55,.95);}
 
body {
    overflow-y: auto!important;
    overflow-x: hidden;
    background-color: transparent!important;
    -webkit-font-smoothing: antialiased
}
 
/*Larger Alert Info Box*/
.formDialogContent.smoothScrollY.no-grow {max-width: 800px !important; }
 
/*Remove Play Indicator*/
.cardOverlayFab-primary {display: none !important}
 
/*Brighten Text in Season List to match Item View*/
#childrenContent div.secondary.listItem-overview.listItemBodyText {
    color: rgba(255,255,255,.87);
}
 
/*Remove Episode Image in Season List*/
/*#childrenContent .listItemImage.listItemImage-large {background-image: none !important; }*/
 
/*Remove Synopsis in Season List*/
/*#childrenContent div.secondary.listItem-overview.listItemBodyText {display: none; }*/
 
/* Played Indicator Color */
.playedIndicator {opacity: 0.0;
}
 
.playedIndicator {border-style: solid; border-width: 2px;}
 
- most of it is for other stuff, makes the alphapicker text a bit bigger, brightens background art, gets rid of movie posters on the movie page, blurs backgrounds (though not when its set to zero). Not even sure if all of it actually works.
Link to comment
Share on other sites

Thanks! I thought that would give me a good base to start playing with, but I realized that it's really just increasing the size of the My Media images to match everything else. I'd prefer to reduce the size of everything else to match the size of My Media, as I currently have it:

 

/* My Media Image Size */
#homeTab .smallBackdropCard {
    width: 14%
}

Edited by paul1965
Link to comment
Share on other sites

  • 1 month later...
paul1965

I've played around a bit more with Emby, and like it enough that I just bought the lifetime subscription. I'd like to do one more bit of customizing to the Home screen, and that is to remove the extra posters that run off the right side when viewing the Latest sections. Instead of a poster, I'd like to see just the background and the next arrow. Here's an example: I've got more items in my Latest Cable section than in Antenna, and I prefer to keep the Home screen look the same throughout. So rather than see the partial poster for The Deuce, I'd like it to be blank until I hover over it, then display the next arrow like it does for Antenna. Can that be done?

 

5becba5e82526_EmbyHome.jpg

Link to comment
Share on other sites

Hi, unfortunately this is no setting for this. It's actually there for usability purposes. Without the portion of the poster showing, many people would never realize they can scroll.

 

That said, if you really want to do this, it might be possible with custom css although there's no guarantee of that. @@Happy2Play may have some tips. Thanks.

Link to comment
Share on other sites

Happy2Play

I've played around a bit more with Emby, and like it enough that I just bought the lifetime subscription. I'd like to do one more bit of customizing to the Home screen, and that is to remove the extra posters that run off the right side when viewing the Latest sections. Instead of a poster, I'd like to see just the background and the next arrow. Here's an example: I've got more items in my Latest Cable section than in Antenna, and I prefer to keep the Home screen look the same throughout. So rather than see the partial poster for The Deuce, I'd like it to be blank until I hover over it, then display the next arrow like it does for Antenna. Can that be done?

 

5becba5e82526_EmbyHome.jpg

 

Only thing I can come up with so far is

div.emby-scroller {width: 97%}
Link to comment
Share on other sites

paul1965

Wow that worked great! It moved the scroll arrow to the last full size poster and now shows a nice clean background Thanks once again Happy! Of course one downside I already see is that the arrow seems to be triggered for a row no matter where my mouse is for that row. Pretty sure I can live with that though.

Edited by paul1965
Link to comment
Share on other sites

Happy2Play

Wow that worked great! It moved the scroll arrow to the last full size poster and now shows a nice clean background Thanks once again Happy! Of course one downside I already see is that the arrow seems to be triggered for a row no matter where my mouse is for that row. Pretty sure I can live with that though.

 

That is the default behavior, at least for me.  Hover anywhere on any row produces arrow.

Link to comment
Share on other sites

paul1965

That is the default behavior, at least for me.  Hover anywhere on any row produces arrow.

 

I don't recall seeing that before, but I'll check when I get home. Maybe I just didn't notice it because the poster was there and it wasn't as visible.

Edited by paul1965
Link to comment
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
 Share

×
×
  • Create New...