CarlosLima 148 Posted May 7, 2020 Share Posted May 7, 2020 Hi, I would like to have a CSS / HTML that would show the artist's background image on the music player screen with much brighter, more visible, practically 100%, but so that the texts and icons on the image would be visible. Thank you Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted May 7, 2020 Author Share Posted May 7, 2020 (edited) Opps, I think I found the solution in another topic. I will explore other values to make icons and texts more readable, but that is exactly what I was looking for. Master code @@Happy2Play Edited May 7, 2020 by CarlosLima Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted May 7, 2020 Author Share Posted May 7, 2020 (edited) Now, a stylish music player. To be perfect, all you need is a code to remove the disc cover and nothing more. Congratulations to the creator of the topic and to the master @ Happy2Play, who is helping everyone to have an Emby with our face. Thank you Edited May 7, 2020 by CarlosLima Link to comment Share on other sites More sharing options...
Solution CarlosLima 148 Posted May 7, 2020 Author Solution Share Posted May 7, 2020 (edited) Oops, I found this code from 10/17/2019 edited by the master @ Happy2Play and it worked perfect. div.osdPoster-img {display: none;} Edited May 7, 2020 by CarlosLima Link to comment Share on other sites More sharing options...
arrbee99 1544 Posted May 8, 2020 Share Posted May 8, 2020 Looks great. But it does help to have a darker background in general I think. This might help to add a drop shadow to the list of songs to read a bit better. Hopefully. Unless Happ2play has other thoughts. He might have come up with it anyway, not really sure. /* Add Dropshadow To Music Playlist */div.upNextBar.upNextBar-static.flex.align-items-center {text-shadow: 2px 2px #000000;}div.osdPlaylist.flex.flex-grow.hide.osdPlaylist-hidden {text-shadow: 2px 2px #000000;} 1 Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted May 8, 2020 Author Share Posted May 8, 2020 (edited) Looks great. But it does help to have a darker background in general I think. This might help to add a drop shadow to the list of songs to read a bit better. Hopefully. Unless Happ2play has other thoughts. He might have come up with it anyway, not really sure. /* Add Dropshadow To Music Playlist */ div.upNextBar.upNextBar-static.flex.align-items-center {text-shadow: 2px 2px #000000;} div.osdPlaylist.flex.flex-grow.hide.osdPlaylist-hidden {text-shadow: 2px 2px #000000;} Thank you very much for that, it was excellent. I really thought of posting here asking for something in that style, because in clear images the texts disappeared. Could this effect also be applied to the song title? Perhaps, also reduce the transparency of the playlist background a little. Thank you Edited May 8, 2020 by CarlosLima Link to comment Share on other sites More sharing options...
arrbee99 1544 Posted May 8, 2020 Share Posted May 8, 2020 The only thing I've managed is - h2.videoOsdParentTitle {text-shadow: 2px 2px #000000;} or div.videoOsdText {text-shadow: 2px 2px #000000;} They both seem to do the same thing (add drop shadow to the title) but they might affect stuff somewhere else. Also I don't have much idea what I'm doing (so be warned ). Was hoping to add drop shadow to the Artist and Album but don't know how. As you mentioned, need the great Happy2play for this kind of stuff. Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted May 8, 2020 Author Share Posted May 8, 2020 (edited) Hi Thank you very much for your time. I tried both of your options and I believe the result is the same. Your code number 1: Your code number 2: The text below the album title, I believe, also needs the same effect. All of this is so that it looks good also in clear images. In fact, even in the icons, which in fact disappear in very clear images, like the ones above. In the dark images everything is perfect. Thank you Edited May 8, 2020 by CarlosLima Link to comment Share on other sites More sharing options...
PenkethBoy 2063 Posted May 8, 2020 Share Posted May 8, 2020 try h3.videoOsdTitle {text-shadow: 2px 2px #000000;} 1 Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted May 8, 2020 Author Share Posted May 8, 2020 try h3.videoOsdTitle {text-shadow: 2px 2px #000000;} Hi, I think something was wrong with the code, because it applied the effect only to the hyphen sign. Link to comment Share on other sites More sharing options...
PenkethBoy 2063 Posted May 8, 2020 Share Posted May 8, 2020 applied to all text for me - on that line possibly you have other css conflicting Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted May 8, 2020 Author Share Posted May 8, 2020 I thought the same about the conflict and you must be right. I leave all my css code related to the music area. I appreciate it if you can see if I have something wrong or duplicate that might conflict. Thank you /* #1 */ div.backgroundContainer.withBackdrop { opacity: 0; } div.backgroundContainer.itemBackgroundContainer.withBackdrop , html.withSectionTabs div.backgroundContainer.withBackdrop { opacity: .88; } /* #2 */ div.backdropContainer.backdropContainer-remotecontrol {right: 0%;} div.upNextBar.upNextBar-static.flex.align-items-center {background: transparent;} div.osdPlaylist.flex.flex-grow.hide.osdPlaylist-hidden {background: transparent;} div.osdPoster-img {display: none;} /* #3 */ div.upNextBar.upNextBar-static.flex.align-items-center {text-shadow: 2px 2px #000000;} div.osdPlaylist.flex.flex-grow.hide.osdPlaylist-hidden {text-shadow: 2px 2px #000000;} /* #4 */ h2.videoOsdParentTitle {text-shadow: 3px 3px #000000;} h3.videoOsdTitle {text-shadow: 2px 2px #000000;} Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted May 8, 2020 Author Share Posted May 8, 2020 (edited) Oops, I identified 2 duplicates and already removed both. Although still not resolved. Code # 2:line # 2 removedline # 3 removed Edited May 8, 2020 by CarlosLima Link to comment Share on other sites More sharing options...
PenkethBoy 2063 Posted May 8, 2020 Share Posted May 8, 2020 (edited) actually its because they are links not actual "text" so dont think drop shadow will work for links - actually it will but think its being overridden by emby theme values you can change the colour but that will not work for all backgrounds Edited May 8, 2020 by PenkethBoy 1 Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted May 8, 2020 Author Share Posted May 8, 2020 (edited) It is true, now that I realized that they are links and not texts. I understood that for links it is not possible to apply the attribute. Still, the 'now playing' screen was excellent in appearance. Thank you very much. Edited May 8, 2020 by CarlosLima Link to comment Share on other sites More sharing options...
PenkethBoy 2063 Posted May 8, 2020 Share Posted May 8, 2020 to change the colour of the links /* ---- Playing now Queue - second line of album and song name ---- */ h3.videoOsdTitle { color: #87CEFA !important;} Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted May 8, 2020 Author Share Posted May 8, 2020 Excellent in everything. For me, 10/10. Very grateful once again. Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted May 8, 2020 Author Share Posted May 8, 2020 (edited) Hi, Still about the music area, it doesn't have much to do with this topic, but avoiding creating a new topic, I would like to know if what I think to do is possible ... I want to exclude everything in field 1. I want to exclude everything in field 2. I intend to exclude all artists in field 3, leaving only the first artist, so that I can add the image of it to be displayed in the background on the playback screen. All of this only when it comes to records with various artists. Thanks for any tips. Edited May 8, 2020 by CarlosLima Link to comment Share on other sites More sharing options...
Happy2Play 8145 Posted May 8, 2020 Share Posted May 8, 2020 Hi, Still about the music area, it doesn't have much to do with this topic, but avoiding creating a new topic, I would like to know if what I think to do is possible ... I want to exclude everything in field 1. I want to exclude everything in field 2. I intend to exclude all artists in field 3, leaving only the first artist, so that I can add the image of it to be displayed in the background on the playback screen. All of this only when it comes to records with various artists. Thanks for any tips. You can not limit to just various artists, it is all or none. 2) that genre field applies to all media so it would remove from Series and Movies also 1 Link to comment Share on other sites More sharing options...
arrbee99 1544 Posted May 8, 2020 Share Posted May 8, 2020 I guess you have this somewhere - div.upNextBar.upNextBar-static.flex.align-items-center {background: rgba(0,0,0,.20)!important;}div.osdPlaylist.flex.flex-grow.hide.osdPlaylist-hidden {background: rgba(0,0,0,.50)!important;} The top is the 'play queue' bit, the bottom is the actual list. You can fiddle with the .20 and or .50 to make the list more or less transparent (unless you've done that already of course). Link to comment Share on other sites More sharing options...
arrbee99 1544 Posted May 8, 2020 Share Posted May 8, 2020 The only thing I've managed is - h2.videoOsdParentTitle {text-shadow: 2px 2px #000000;} or div.videoOsdText {text-shadow: 2px 2px #000000;} They both seem to do the same thing (add drop shadow to the title) but they might affect stuff somewhere else. Also I don't have much idea what I'm doing (so be warned ). Was hoping to add drop shadow to the Artist and Album but don't know how. As you mentioned, need the great Happy2play for this kind of stuff. Didn't notice, but the h2 one is better as the div one adds that dropshadowed dash between the album and artist. Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted May 8, 2020 Author Share Posted May 8, 2020 You can not limit to just various artists, it is all or none. 2) that genre field applies to all media so it would remove from Series and Movies also Yes, I understood and forgot the idea of the three fields. Thank you very much for the alert. Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted May 8, 2020 Author Share Posted May 8, 2020 Didn't notice, but the h2 one is better as the div one adds that dropshadowed dash between the album and artist. Ah understood. I am using the code started by h2. Thank you Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted May 9, 2020 Author Share Posted May 9, 2020 (edited) This is the final image of 'playing now', which is as I intended and therefore, closing the topic, not without first thanking the friends who collaborated creating the codes. Thank youChanges made in relation to the Emby standard: - Full brightness in the artist image - Removed the album cover over the artist's image- Borders in the song title text- Color in the links for the artist and the album- Color in the playback progress bar- Borders in playlist texts- Transparency of the playlist background Edited May 9, 2020 by CarlosLima 1 Link to comment Share on other sites More sharing options...
arrbee99 1544 Posted May 9, 2020 Share Posted May 9, 2020 Looks great. I see Penkethboy posted about changing the colour of the Artist / Album text. Am wondering if its easy to change the colour of the progress bar and the Emby logo, or in fact just replace green with blue everywhere ? 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