Jump to content

Add border to cards


arrbee99

Recommended Posts

arrbee99

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 comment
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 comment
Share on other sites

arrbee99

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 comment
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 comment
Share on other sites

Happy2Play

FYI home screen only all cards

div.homeSectionsContainer .cardScalable

 

  • Like 1
Link to comment
Share on other sites

arrbee99

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 comment
Share on other sites

arrbee99
5 minutes ago, Happy2Play said:

FYI home screen only all cards


div.homeSectionsContainer .cardScalable

 

Thanks, does make it a bit shorter...

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

  • 2 months later...
arrbee99

Am playing with this again to see what it looks like with more rounded corners.

With this (assuming I've copied the correct stuff) -

add blue box when hovering -

/* Remove Fade and Add Box to Focus Item */
div.cardOverlayContainer {
    background: transparent;
    border-style: solid;
    border-width: 6px 6px 6px 6px;
    border-color:  var(--myblue);
    border-radius: 1.2rem;
}

and add white box round everything -

/*Add Box to All Items on Movies TV etc */
div.cardScalable {
    background: transparent;
    border-style: solid;
    border-width: 4px 4px 4px 4px;
    border-color: white;
    border-radius: 1.5rem;
}

it seems to work in Firefox -

1231185288_EmbyroundboxinFirefox.thumb.JPG.ee9fdecea1265e8642c25d3b06c13495.JPG

but in Chrome its like the White border gets put underneath the image -

863030905_EmbyroundboxinChrome.thumb.JPG.75b5a41217a70dbe658a18ad62335510.JPG

so am wondering if there's a way to fix it up. Thanks.

EDIT - btw the blue focus box works fine.

Edited by arrbee99
Link to comment
Share on other sites

Happy2Play

@arrbee99 

Hint

add the same radius to the .cardScalable button

But yes there are these quirks between browsers.

Link to comment
Share on other sites

arrbee99

Sorry. Am sure its obvious, but I can't get any cardScalable and button combo to work.

Link to comment
Share on other sites

Have you tried loading in Chrome and looking at the Code you get back there.. The reason I say this is that if there are agent specific CSS indicated in the code of the WebUI, it may return a different .div for indicating it.. so it may have to put in as well to target both user-agents.on thing is not relative to your specific issue.. but it was showing an example.. there were some things such as indicating your doctype and a few others..

I thought about that though because they brought up user-agent specific stylesheets.. which I figured was the issue. and looked for a solution.. So it may not be the specific indications you are using not applying but your trying to apply them to something different for that user-agent.

I would check and see if it is different..

CSS3 Rounded Image With jQuery - Web Designer Wall

THat link will be most helpful..

Edited by Guest
Link to comment
Share on other sites

arrbee99

Not to me it isn't.

I just look at that inspect code thing and don't know which to pick or which to expand with those arrows and can't spot anything to do with buttons.

Link to comment
Share on other sites

wait.. wait.. I know you'll probably have to have an extension with that..... 😜

I miss those days sometimes with Firefox.. but it would do the right things.. then they changed the way the extensions were written and worked.. everything changed.. :rolleyes:

Chrome just never really cut-it for me.. felt liiiike.. uhhmmm.. dunno something other than what I was using.. Maybe I skinned it once but extensibility was an issue beyond basic browsing back then.. I used an off-shoot of it called SRWare Iron... to get all the bad junk out.. and get the desired behavior for testing...

Link to comment
Share on other sites

arrbee99

Like I say it seems to work in Firefox, but not Chrome or Edge. I looked/inspected in both. I generally only use Firefox but working in all of them would be good.

Don't know anything bout these extensions but hopefully its just a matter of finding the right line of css.

I can't code anything - its generally a matter of asking here or trying to spot something in the googleverse.

Link to comment
Share on other sites

Did you see what it said at the link above.. about opacity: 0;

You show transparent... but.. it is talking about going after the image to make it work.

Link to comment
Share on other sites

Happy2Play

@arrbee99What issues are you having as all I did was add border-radius to button.

/* Remove Fade and Add Box to Focus Item */
div.cardOverlayContainer {
    background: transparent;
    border-style: solid;
    border-width: 6px 6px 6px 6px;
    border-color:  var(--myblue);
    border-radius: 1.2rem;
}

/*Add Box to All Items on Movies TV etc */
div.cardScalable {
    background: transparent;
    border-style: solid;
    border-width: 4px 4px 4px 4px;
    border-color: white;
    border-radius: 1.5rem;
}

div.cardScalable button   {
    border-radius: 1.5rem;
}

Unless I am not understanding the issue as it corrects the issue you displayed above.

Quote

I can't code anything - its generally a matter of asking here or trying to spot something in the googleverse.

Neither can I, learning from here and google also.😃

But the way the image is layered in button on cardscaleable is the issue.  But each browser seem to handle it differently.

Edited by Happy2Play
  • Like 1
Link to comment
Share on other sites

arrbee99

Thanks. That fixes it 😀

I think it was mainly it didn't occur to me to basically just add '<space>button'. I tried replacing div with button or had div.cardScalable-button and a few other things I've forgotten already.

Obviously I'm much better at not being able to code than you are...

Link to comment
Share on other sites

arrbee99

It seems like this works fine in Firefox and Chrome -

/* Remove Fade and Add Box to Focus Item */
div.cardOverlayContainer {
    background: transparent;
    border-style: solid;
    border-width: 6px 6px 6px 6px;
    border-color:  var(--myblue);
    border-radius: 1.5rem;
}

/*Add Box to All Items on Movies TV etc */
div.cardScalable {
    background: transparent;
    border-style: solid;
    border-width: 4px 4px 4px 4px;
    border-color: white;
    border-radius: 1.8rem;
}

/*Get above to work in Chrome also*/
div.cardScalable button   {
    border-radius: 1.5rem;
}

but it seemed to miss out rounded corners for images you get when looking at Edit Images and in the dashboard when an item was being played so that it had an actual image in an Active Devices box.

It seems that this

div.cardImageContainer {
        border-radius: 1.5rem;
}

fixes the images under Edit Images and helps with the Active Devices thing, but that still looks like this -

886376692_EmbyActiveDevicesroundedcorners.thumb.JPG.1bdacba1330c779f4ef1fc566db04f4a.JPG

Any thoughts please ?

Link to comment
Share on other sites

Happy2Play
6 minutes ago, arrbee99 said:

It seems like this works fine in Firefox and Chrome -

/* Remove Fade and Add Box to Focus Item */
div.cardOverlayContainer {
    background: transparent;
    border-style: solid;
    border-width: 6px 6px 6px 6px;
    border-color:  var(--myblue);
    border-radius: 1.5rem;
}

/*Add Box to All Items on Movies TV etc */
div.cardScalable {
    background: transparent;
    border-style: solid;
    border-width: 4px 4px 4px 4px;
    border-color: white;
    border-radius: 1.8rem;
}

/*Get above to work in Chrome also*/
div.cardScalable button   {
    border-radius: 1.5rem;
}

but it seemed to miss out rounded corners for images you get when looking at Edit Images and in the dashboard when an item was being played so that it had an actual image in an Active Devices box.

It seems that this

div.cardImageContainer {
        border-radius: 1.5rem;
}

fixes the images under Edit Images and helps with the Active Devices thing, but that still looks like this -

886376692_EmbyActiveDevicesroundedcorners.thumb.JPG.1bdacba1330c779f4ef1fc566db04f4a.JPG

Any thoughts please ?

😀 Well that is another layer being added/overlayed on the existing layer as the progress bar covers the unmodified box.  Will do some testing shortly.

  • Like 1
Link to comment
Share on other sites

arrbee99

Thanks.

I couldn't decide if it was because of the progress bar, as you can see the white border gets covered up  before it gets to the progress bar, but it doesn't take much to confuse me...

Link to comment
Share on other sites

Happy2Play
28 minutes ago, arrbee99 said:

Thanks.

I couldn't decide if it was because of the progress bar, as you can see the white border gets covered up  before it gets to the progress bar, but it doesn't take much to confuse me...

Add this

div.sessionNowPlayingContent {
    border-radius: 1.5rem;
}

Only issue maybe the beginning and the end of the progress bar being covered by your border.  But you are talking seconds.

Edited by Happy2Play
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
×
×
  • Create New...