Jump to content

Home Screen - New "Boxes" on Thumbs


Argonous
 Share

Recommended Posts

Argonous

So I now have all these new, multi-color boxes around my thumbnails on my home screen...

 

585929f0ee2c8_Emby_Boxes2.jpg

 

How do I get rid of/hide these, as they are very unappealing to me.  I have looked around for a bit now and have not been able to find an option to turn them off.

 

Thanks!

 

Link to comment
Share on other sites

Happy2Play

Are you wanting to remove them from every page?  Or just certain areas?

Edited by Happy2Play
Link to comment
Share on other sites

Argonous

Hey Happy,

 

Every page, which I assume would be a global change somewhere.  I just can't seem to find it if there is one after the update.

 

Thanks Again!

Link to comment
Share on other sites

Happy2Play

You need to use Custom CSS.  Dashboard-Settings-Branding-Custom CSS box (copy and paste the code into that box and hit save)

 

Not this will remove cardfooters for the Poster Card and Thumb Card view option also.

.visualCardBox-cardFooter {
    display: none;
}

Link to comment
Share on other sites

Argonous

Thanks Happy!  That did the trick!  

 

However, I do have one more request.  I still have the greyish side-bars.  Is there any additional code I can add to either remove these or change these to black?

 

Thanks!

Link to comment
Share on other sites

Happy2Play

Can you post a screenshot of what you are referring to.

 

 

Are you referring to the bars around the images?

Edited by Happy2Play
Link to comment
Share on other sites

Argonous

Those are the images automatically pulled from FanArt.tv.

 

The grey bars are circled in red below...

 

5859f6b392518_Emby_Boxes4.jpg

Link to comment
Share on other sites

Happy2Play

All you images have a black border around them also.  None of my fanart.tv thumbs have any borders at all.  If you edited one of those series thumbs and replaced it does the same thing happen?

 

5859f7c887a3e_thumb.jpg

Link to comment
Share on other sites

Argonous

Yea, I knew they originally had the black borders, but with the latest update (and the addition of the boxes we already took care of) the borders (or at least the ones on the side) turned grey.  Editing the thumbs had no effect.  You may also want to note the spacing between the thumbs.  In your image, which is how mine used to be, the spacing is equal to 1/3 of what mine currently is. This would suggest that there is an additional element behind each thumb, pushing them apart further.

 

I did also notice that there is also now a grey box element behind movies as well (see image).  It is not as noticeable as it is on the thumbs, but it is there, and is on all four sides.

 

585a91bda0ae2_Emby_Boxes_5.jpg

Link to comment
Share on other sites

Swynol

i also have the grey bars after using the custom css mentioned above. i think it has something to do with coverart. havent figured out how to remove it yet

Link to comment
Share on other sites

Argonous

I had a little time to play around this morning and made a discovery.  It seems this issue is related to the CoverArt plugin.  I disabled CoverArt for my TV show only and voilà!  The grey bars are gone!  Hopefully whomever the CoverArt person(s) is will be mad aware of this?

Edited by Argonous
Link to comment
Share on other sites

Argonous

So.... can we look forward to a fix in a future update of CoverArt?  Our would this be something that would be addressed in the next release of Emby Server?

Link to comment
Share on other sites

Scrapbookee

Question: Is it possible to remove them from everywhere except the Cast & Crew section? That is the only place I sort of miss them. 

 

Or is there a simple way to just make them all grey like they are in the Cast & Crew section, rather then being multi-colored? 

 

These grey boxes are clean looking and I would be okay if all boxes were this color.

xb1ZmWp.png

 

 

Whereas with movies and tv shows, the boxes are many different colors. Would be great to be able to make them all grey or black!

CV9RQ5d.png

Link to comment
Share on other sites

Happy2Play

Hi, is it possible to use the CSS code to change the texts indicated by the arrows?

 

5865a38f71ab0_Capturar.png

Not that I am aware of.

  • Like 1
Link to comment
Share on other sites

Happy2Play

Question: Is it possible to remove them from everywhere except the Cast & Crew section? That is the only place I sort of miss them. 

 

Or is there a simple way to just make them all grey like they are in the Cast & Crew section, rather then being multi-colored? 

 

These grey boxes are clean looking and I would be okay if all boxes were this color.

xb1ZmWp.png

 

 

Whereas with movies and tv shows, the boxes are many different colors. Would be great to be able to make them all grey or black!

CV9RQ5d.png

Here is grey

 

Will have to test some to not include cast and crew.

.visualCardBox-cardFooter {
    background-color: #222326 !important;
}
Edited by Happy2Play
Link to comment
Share on other sites

Happy2Play

@@Scrapbookee
 
Okay here you go.  (Everyone) This will allow Poster Card and Thumb Card views if selected via view option on Movie and TV.

.visualCardBox-cardFooter {display: none; } 

#moviesTab .visualCardBox-cardFooter, #seriesTab .visualCardBox-cardFooter, #images .visualCardBox-cardFooter, #backdrops .visualCardBox-cardFooter, #castContent .visualCardBox-cardFooter {display: block !important; }
Edited by Happy2Play
  • Like 2
Link to comment
Share on other sites

  • 3 weeks later...
Oric Gaming

Ok well I just posted a huge thing and clicked post but it disappeared and now I have to write it all again!!! It is worth it though if you all are interested. I know where I went wrong when posted... I was writing this up on the post when I going step by step and cleared my browser data (which basically logs you out lol). OK here we go...

 

First off, thank you all for these posts. I would have never went down the right path if you didn't start this thread. Thank you a ton to Happy2Play as well for the fixes! 

 

Ok, so for those of you that may still be having the issue of the grey box around your thumbnails / post cards, here is a fix for it. This all lead back to the original issues with the .visualCardBox coding. I will show you all the pictures and then give you the steps to fix it. This fix requires you to edit one of the server css files. This is probably only going to be a temporary fix because I don't know if a server update will scrub this file and you will have to do it again. This allows you to use your coverart without the grey box. 

 

I couldn't get this to work with the custom css stuff along with the other code from above, so I apologize about that. Here we go.

 

Ok, so here is a picture of the original issue at hand (no code applied):

o6mjr1X.jpg

 

Here is the code applied from Happy2Play (notice footers gone but we still have the grey box around the thumbnail):

ZtzjArI.jpg

 

Now here is a picture after I edited the css file:

Vq1R57k.jpg

 

Ok, so if you are interested in how to do this, here are the steps. These fixes did seem to conflict with some of the padding of the pictures but on full screen it doesn't seem to be an issue (at least for me).

 

1. Go to the card.css file on your server. Mine was located at - C:\Users\Media\AppData\Roaming\Emby-Server\System\dashboard-ui\bower_components\emby-webcomponents\cardbuilder

 

2. Make a back up of your card.css file (always good to have a back up!)

 

3. Open your card.css file with notepad or other text editing program (or other program of your choice if you code and have a favorite!)

 

4. Go to this code in the file (mine was located at lines 223 to 225):

.visualCardBox-cardScalable, .visualCardBox-cardFooter {
    background-color: #222326;
}
 
5. Edit the code to this:
.visualCardBox-cardScalable, .visualCardBox-cardFooter {
    background-color: transparent;
}
 
6. Save the card.css file and close it.
 
7. This is very important. You need to clear your browser cache files or you will not see the change. With Chrome, I had to manually go into the settings and clear the files. Control+F5 or Shift+F5 did not work in this scenario. 
 
8. Done! 
 
Hopefully this works out for you all that would like no color and such around your thumbnails. I myself didn't like that change either, but I love how open they make this so we can go in and change things if needed! Thank you all again for your help on this. 
Edited by Oric Gaming
Link to comment
Share on other sites

Happy2Play

@@Oric Gaming

 

You are better using custom css then modifying the file itself as it will be replaced with every server update. 

Link to comment
Share on other sites

Oric Gaming

@@Happy2Play Yeah, thats what I figured.. I just couldn't get it to work with that. I will see if I can figure something out tomorrow or so with it. It's past midnight here so I am a bit tired lol. Thanks again. 

Edited by Oric Gaming
Link to comment
Share on other sites

Happy2Play

@@Oric Gaming

Here you go to remove/make grey box transparent

.cardScalable.visualCardBox-cardScalable {
    background-color: transparent !important;
}
Edited by Happy2Play
  • Like 1
Link to comment
Share on other sites

Oric Gaming

 

@@Oric Gaming

Here you go to remove/make grey box transparent

.cardScalable.visualCardBox-cardScalable {
    background-color: transparent !important;
}

Ha! You are awesome! Something so simple. I wouldn't have guessed to add that last part to it. Thanks a ton. 

 

 

Edit - This even fixed that padding issue I was talking about. Ok off to bed for me. You have a great day/night.

Edited by Oric Gaming
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...