Jump to content

Add border to cards


arrbee99

Recommended Posts

Am wondering if anyone knows how to add a border around just the thumbs and posters on the home page, with a possible alternative to add them everywhere, like actors, more like this etc.

It might look terrible would would like to try.

I tried this but that makes the border too big and includes the text underneath -

div.card {
    background: transparent;
    border-style: solid;
    border-width: 4px 4px 4px 4px;
    border-color: white;
    border-radius: 0.3rem;
}

am hoping to get it strictly round just the image.

  • Like 1
Link to post
Share on other sites
Happy2Play
1 hour ago, arrbee99 said:

add a border around just the thumbs and posters on the home page

Like this limited to portrait and backdrop cards on Home Screen.  Every type has its own card.

div.homeSectionsContainer .portraitCard .cardScalable, div.homeSectionsContainer .backdropCard .cardScalable {
    background: transparent;
    border-style: solid;
    border-width: 4px 4px 4px 4px;
    border-color: white;
    border-radius: 0.3rem;
}

 

1 hour ago, arrbee99 said:

with a possible alternative to add them everywhere, like actors, more like this etc.

All cards

div.cardScalable {
    background: transparent;
    border-style: solid;
    border-width: 4px 4px 4px 4px;
    border-color: white;
    border-radius: 0.3rem;
}
Edited by Happy2Play
  • Like 1
Link to post
Share on other sites

I quite like this for now. Till I feel like a change anyway. I added smallBackdropCard, squareCard and fourThreeCard for the other rows.

798089036_EmbyHomeScreenBorders.thumb.JPG.64c977579906e3cfe782ba939a82f653.JPG

The only bug is these borders are on the outside and the highlight box is on the inside, so they don't overlap, as you can see with My Media > TV

Edited by arrbee99
Link to post
Share on other sites
Happy2Play
5 minutes ago, arrbee99 said:

The only bug is these borders are on the outside and the highlight box is on the inside, so they don't overlap, as you can see with My Media > TV

Are you sure it is not a issue with the image itself?

Link to post
Share on other sites

As I'm sure you've noticed, I'm not sure of anything when it comes to css, but the plan was/is to have borders round stuff and when you hover over an item the border seamlessly changes colour to blue (its still white in that picture). Not a exactly a disaster, just seems bit weird that the border instructions are the same for the white permanent border as for the hover blue border, but they're in slightly different positions.

Link to post
Share on other sites
5 minutes ago, Happy2Play said:

FYI home screen only all cards


div.homeSectionsContainer .cardScalable

 

Thanks, does make it a bit shorter...

Link to post
Share on other sites
  • 3 weeks later...
rbjtech

Thanks @Happy2Play & @arrbee99

My first play with CSS and tbh I like a single pixel border on all the screens.  I think it looks much more polished than having no border - but each to their own I guess.

Just a shame this does not extend to the other clients .... 

 

css0.PNG

css1.PNG

css2.PNG

Edited by rbjtech
  • Like 1
Link to post
Share on other sites
arrbee99

Looks like its time for you to go wild. Change the green ? get rid of posters to show the background more. Make those Media Info boxes transparent, etc, etc. The world is your oyster...

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