CarlosLima 148 Posted August 15, 2021 Share 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. Link to comment Share on other sites More sharing options...
Solution Happy2Play 8296 Posted August 15, 2021 Solution Share Posted August 15, 2021 Something like this. div.homeSectionsContainer div.visualCardBox { background-color: rgba(0,0,0,.3); } 1 Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted August 15, 2021 Author Share Posted August 15, 2021 Homepage charm. My eternal thanks. Thank you again. Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted August 18, 2021 Author Share 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 Link to comment Share on other sites More sharing options...
Happy2Play 8296 Posted August 18, 2021 Share 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;} Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted August 18, 2021 Author Share Posted August 18, 2021 Your first code delivered what I wanted. Very grateful again. Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted June 21, 2022 Author Share 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. Link to comment Share on other sites More sharing options...
Happy2Play 8296 Posted June 21, 2022 Share 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%;} 1 Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted June 21, 2022 Author Share Posted June 21, 2022 You are the best. More than perfect by 14%. Strongly grateful. Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted June 21, 2022 Author Share 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 Link to comment Share on other sites More sharing options...
Happy2Play 8296 Posted June 21, 2022 Share 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. Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted June 22, 2022 Author Share 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. Link to comment Share on other sites More sharing options...
Happy2Play 8296 Posted June 22, 2022 Share 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. Link to comment Share on other sites More sharing options...
Happy2Play 8296 Posted June 22, 2022 Share 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 Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted June 22, 2022 Author Share 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 Link to comment Share on other sites More sharing options...
Happy2Play 8296 Posted June 22, 2022 Share 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}} Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted June 22, 2022 Author Share Posted June 22, 2022 Spectacular and very stylish now. Thanks again for all your help. Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted July 4, 2022 Author Share 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; Link to comment Share on other sites More sharing options...
Happy2Play 8296 Posted July 4, 2022 Share Posted July 4, 2022 Shows transparent for me in both versions. added box-shadow also, enabled backdrop to better illustrate. Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted July 20, 2022 Author Share 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 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