arrbee99 1560 Posted December 23, 2020 Share Posted December 23, 2020 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. 1 Link to comment Share on other sites More sharing options...
Happy2Play 8282 Posted December 23, 2020 Share Posted December 23, 2020 (edited) 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 December 23, 2020 by Happy2Play 1 Link to comment Share on other sites More sharing options...
arrbee99 1560 Posted December 23, 2020 Author Share Posted December 23, 2020 Thank you. I'll give those a go. Link to comment Share on other sites More sharing options...
arrbee99 1560 Posted December 24, 2020 Author Share Posted December 24, 2020 (edited) I quite like this for now. Till I feel like a change anyway. I added smallBackdropCard, squareCard and fourThreeCard for the other rows. 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 December 24, 2020 by arrbee99 Link to comment Share on other sites More sharing options...
Happy2Play 8282 Posted December 24, 2020 Share Posted December 24, 2020 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 More sharing options...
Happy2Play 8282 Posted December 24, 2020 Share Posted December 24, 2020 FYI home screen only all cards div.homeSectionsContainer .cardScalable 1 Link to comment Share on other sites More sharing options...
arrbee99 1560 Posted December 24, 2020 Author Share Posted December 24, 2020 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 More sharing options...
arrbee99 1560 Posted December 24, 2020 Author Share Posted December 24, 2020 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 More sharing options...
rbjtech 4266 Posted January 14, 2021 Share Posted January 14, 2021 (edited) 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 .... Edited January 14, 2021 by rbjtech 1 Link to comment Share on other sites More sharing options...
arrbee99 1560 Posted January 14, 2021 Author Share Posted January 14, 2021 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 More sharing options...
arrbee99 1560 Posted March 25, 2021 Author Share Posted March 25, 2021 (edited) 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 - but in Chrome its like the White border gets put underneath the image - so am wondering if there's a way to fix it up. Thanks. EDIT - btw the blue focus box works fine. Edited March 25, 2021 by arrbee99 Link to comment Share on other sites More sharing options...
Happy2Play 8282 Posted March 25, 2021 Share Posted March 25, 2021 @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 More sharing options...
arrbee99 1560 Posted March 25, 2021 Author Share Posted March 25, 2021 Sorry. Am sure its obvious, but I can't get any cardScalable and button combo to work. Link to comment Share on other sites More sharing options...
Guest Posted March 25, 2021 Share Posted March 25, 2021 (edited) 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 March 25, 2021 by Guest Link to comment Share on other sites More sharing options...
arrbee99 1560 Posted March 25, 2021 Author Share Posted March 25, 2021 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 More sharing options...
Guest Posted March 25, 2021 Share Posted March 25, 2021 In Chrome?... Link to comment Share on other sites More sharing options...
Guest Posted March 25, 2021 Share Posted March 25, 2021 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.. 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 More sharing options...
arrbee99 1560 Posted March 25, 2021 Author Share Posted March 25, 2021 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 More sharing options...
Guest Posted March 25, 2021 Share Posted March 25, 2021 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 More sharing options...
Happy2Play 8282 Posted March 26, 2021 Share Posted March 26, 2021 (edited) @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 March 26, 2021 by Happy2Play 1 Link to comment Share on other sites More sharing options...
arrbee99 1560 Posted March 26, 2021 Author Share Posted March 26, 2021 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 More sharing options...
arrbee99 1560 Posted March 27, 2021 Author Share Posted March 27, 2021 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 - Any thoughts please ? Link to comment Share on other sites More sharing options...
Happy2Play 8282 Posted March 27, 2021 Share Posted March 27, 2021 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 - 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. 1 Link to comment Share on other sites More sharing options...
arrbee99 1560 Posted March 27, 2021 Author Share Posted March 27, 2021 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 More sharing options...
Happy2Play 8282 Posted March 27, 2021 Share Posted March 27, 2021 (edited) 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 March 27, 2021 by Happy2Play Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now