Guest Posted August 15, 2021 Posted August 15, 2021 Hi, Is it possible to apply some transparency to the background of these images? I would like to have light transparency, not full transparency. Thanks from now on.
Solution Happy2Play 9441 Posted August 15, 2021 Solution Posted August 15, 2021 Something like this. div.homeSectionsContainer div.visualCardBox { background-color: rgba(0,0,0,.3); }
Guest Posted August 15, 2021 Posted August 15, 2021 Homepage charm. My eternal thanks. Thank you again.
Guest Posted August 18, 2021 Posted August 18, 2021 (edited) div.homeSectionsContainer div.visualCardBox { background-color: rgba(0,0,0,.3); } Hi, I come back here to see the possibility of adding to the code a way to reduce the height of the buttons marked in blue color, so that they are all smaller, as shown by the button marked in yellow color. Thank you for that. Edited August 18, 2021 by CarlosLima
Happy2Play 9441 Posted August 18, 2021 Posted August 18, 2021 12 minutes ago, CarlosLima said: div.homeSectionsContainer div.visualCardBox { background-color: rgba(0,0,0,.3); } Hi, I come back here to see the possibility of adding to the code a way to reduce the height of the buttons marked in blue color, so that they are all smaller, as shown by the button marked in yellow color. Thank you for that. Something like this div.homeSectionsContainer .cardImageContainer-smallSideFooter {height: 2.6em;} with possible this also div.homeSectionsContainer .cardBox-sideFooter {margin: 0.3em;}
Guest Posted August 18, 2021 Posted August 18, 2021 Your first code delivered what I wanted. Very grateful again.
Guest Posted June 21, 2022 Posted June 21, 2022 /* #31 - Aplica transparencia no background do menu - Happy2Play-150821 */ div.homeSectionsContainer div.visualCardBox { background-color: rgba(0,0,0,.3); } /* #33 - Reduz a altura do background dos menus - Happy2Play-180821 */ div.homeSectionsContainer .cardImageContainer-smallSideFooter {height: 2.6em;} div.homeSectionsContainer .cardBox-sideFooter {margin: 0.3em;} Hi, @Happy2Play In EmbyServer 4730 this code is perfect, however I would like to reduce the width. Thanks very much.
Happy2Play 9441 Posted June 21, 2022 Posted June 21, 2022 6 minutes ago, CarlosLima said: /* #31 - Aplica transparencia no background do menu - Happy2Play-150821 */ div.homeSectionsContainer div.visualCardBox { background-color: rgba(0,0,0,.3); } /* #33 - Reduz a altura do background dos menus - Happy2Play-180821 */ div.homeSectionsContainer .cardImageContainer-smallSideFooter {height: 2.6em;} div.homeSectionsContainer .cardBox-sideFooter {margin: 0.3em;} Hi, @Happy2Play In EmbyServer 4730 this code is perfect, however I would like to reduce the width. Thanks very much. Something like this, adjust to your needs. div.homeSectionsContainer .smallBannerCard {width: 14%;}
Guest Posted June 21, 2022 Posted June 21, 2022 You are the best. More than perfect by 14%. Strongly grateful.
Guest Posted June 21, 2022 Posted June 21, 2022 (edited) Hi, I'm sorry, I forgot to test on the smartphone also in the web app and I found this problem. Is it possible to fix this? Edited June 21, 2022 by CarlosLima
Happy2Play 9441 Posted June 21, 2022 Posted June 21, 2022 25 minutes ago, CarlosLima said: Hi, I'm sorry, I forgot to test on the smartphone also in the web app and I found this problem. Is it possible to fix this? How about this. @media (min-width:100em) {.smallBannerCard {width: 14%}} But you could target each different size as Emby is scaling to the display.
Guest Posted June 22, 2022 Posted June 22, 2022 Hi, I think I didn't understand. Should I use the previous code and also this last code or just the last one? At the end of the line of the last code are they really }} or ;} ? It didn't work for me using both or just using the latter.
Happy2Play 9441 Posted June 22, 2022 Posted June 22, 2022 3 minutes ago, CarlosLima said: Hi, I think I didn't understand. Should I use the previous code and also this last code or just the last one? At the end of the line of the last code are they really }} or ;} ? It didn't work for me using both or just using the latter. The code is correct as @media requires it as there is two parts to the code min-width for display and width for the card, and the semicolon is technically only needed if there is additional code applied to the element. Before After @media (min-width:100em) {.smallBannerCard {width: 14%;}} As for mobile I see this in browser emulator, the layout is changed to scroll.
Happy2Play 9441 Posted June 22, 2022 Posted June 22, 2022 (edited) 1 hour ago, CarlosLima said: Should I use the previous code and also this last code or just the last one? Just the last one but I guess will be dependent on what (min-width:xxxem) value your display is currently using as the first code overrides scaling options for display width collapsing card on small screens. Maybe this @media (min-width:45em) {.smallBannerCard {width: 30%}} @media (min-width:70em) {.smallBannerCard {width: 14%}} @media (min-width:100em) {.smallBannerCard {width: 14%}} .itemsContainer-sideFooters {flex-direction: row} @supports ((display:-webkit-flex) or (display:flex)) {.itemsContainer-smallSideFooters {max-height: fit-content}} But as mentioned is dependent on min-width being used. The additional code above changed scrolling on My Media. If I removed the min-width:45em I get this, but subjective to how many libraries also Edited June 22, 2022 by Happy2Play
Guest Posted June 22, 2022 Posted June 22, 2022 (edited) Again, thank you very much for all your efforts. Now it worked fine for the pc interface in browser, image 1. Image 2 shows the phone and scrolling has become vertical, not pleasant for a large volume of items. Do you think you're able to change just the interface for mobile, so that the scrolling goes back to being horizontal? Thank you for that Edited June 22, 2022 by CarlosLima
Happy2Play 9441 Posted June 22, 2022 Posted June 22, 2022 3 minutes ago, CarlosLima said: Image 2 shows the phone and scrolling has become vertical, not pleasant for a large volume of items. Remove the additional code. .itemsContainer-sideFooters {flex-direction: row} @supports ((display:-webkit-flex) or (display:flex)) {.itemsContainer-smallSideFooters {max-height: fit-content}}
Guest Posted June 22, 2022 Posted June 22, 2022 Spectacular and very stylish now. Thanks again for all your help.
Guest Posted July 4, 2022 Posted July 4, 2022 /* #15 Happy2Play-210622 */ div.homeSectionsContainer .cardImageContainer-smallSideFooter {height: 2.6em;} div.homeSectionsContainer .cardBox-sideFooter {margin: 0.3em;} div.homeSectionsContainer div.visualCardBox { background-color: rgba(0,0,0,.3); } @media (min-width:45em) {.smallBannerCard {width: 30%}} @media (min-width:70em) {.smallBannerCard {width: 14%}} @media (min-width:100em) {.smallBannerCard {width: 14%}} Hi, Sorry to come back to this topic. Maybe another CSS applied caused the problem but I couldn't decipher it. Your original code at 4750 and 4803 no longer displays transparency. Trying to solve it, I changed the background color and it was perfect in 4803 (beta version without other CSS) but in 4705 (stable version with several other CSS/HTML applied, nothing has changed. Thanks for this one more. PS: The change I tried: background-color: transparent;
Happy2Play 9441 Posted July 4, 2022 Posted July 4, 2022 Shows transparent for me in both versions. added box-shadow also, enabled backdrop to better illustrate.
Guest Posted July 20, 2022 Posted July 20, 2022 (edited) The lack of transparency in this code was also the "invisible garbage"; (A A). Removing it worked perfect. Thanks for another problem solved. Edited July 20, 2022 by CarlosLima
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