Koleckai Silvestri 1150 Posted March 3, 2015 Share Posted March 3, 2015 I wanted to make my primary User Folders (Movies, TV Series, and Music) larger without sacrificing space for other Media Folders and channels that I might have separated out from these views. I also wanted to remove the text from footer of the User Folders because it is included in the larger image. This is what I ended up with: This is the CSS code: div[data-itemtype=UserView] {width: 33%;} div[data-itemtype=UserView] .cardFooter {display:none;} div[data-itemtype=CollectionFolder], div[data-itemtype=Channel] {width: 16.5%;} 3 Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted March 3, 2015 Share Posted March 3, 2015 Cool. You do not want to share the pictures ? Link to comment Share on other sites More sharing options...
Abobader 2945 Posted March 3, 2015 Share Posted March 3, 2015 Well done. Link to comment Share on other sites More sharing options...
Koleckai Silvestri 1150 Posted March 3, 2015 Author Share Posted March 3, 2015 Cool. You do not want to share the pictures ? I didn't create the custom images. However you can find them here: http://mediabrowser.tv/community/index.php?/topic/17999-web-client-matching-library-icons/ The Disney, Pixar and Dreamworks images are from Google. Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted March 3, 2015 Share Posted March 3, 2015 Thanks very much. Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted March 3, 2015 Share Posted March 3, 2015 (edited) This is my adaptation of the CSS code and images to the main menu. div[data-itemtype=UserView] {width: 33%;} div[data-itemtype=UserView] .cardFooter {display:none;} div[data-itemtype=CollectionFolder] {width: 33%;} div[data-itemtype=CollectionFolder] .cardFooter {display:none;} Edited March 3, 2015 by Gato_Guga 1 Link to comment Share on other sites More sharing options...
Pais 115 Posted March 5, 2015 Share Posted March 5, 2015 (edited) This is the CSS code: div[data-itemtype=UserView] {width: 33%;} div[data-itemtype=UserView] .cardFooter {display:none;} div[data-itemtype=CollectionFolder], div[data-itemtype=Channel] {width: 16.5%;} I really like how this turned out, but I'm struggling to reproduce it on my setup. What's the difference between UserView and CollectionFolder? UserView are automatically grouped content while CollectionFolder is not? Edited March 5, 2015 by Pais Link to comment Share on other sites More sharing options...
Angelblue05 4130 Posted March 5, 2015 Share Posted March 5, 2015 UserView are the media folders you've "created" in the dashboard > Library section of your server dashboard. Link to comment Share on other sites More sharing options...
Happy2Play 8282 Posted March 6, 2015 Share Posted March 6, 2015 UserView are automatically grouped content while CollectionFolder is not? Actually the opposite. Took me a minute to figure out the difference. I used F12 in the browser to figure mine out. Link to comment Share on other sites More sharing options...
Koleckai Silvestri 1150 Posted March 6, 2015 Author Share Posted March 6, 2015 UserView is the combined view for movies, television or music. If you look under My Preferences -> Display these would be the items checked under Automatically group content from the following folders into views such as Movies, Music and TV. CollectionFolder is applied to everything that is unchecked in the section above. Link to comment Share on other sites More sharing options...
swhitmore 781 Posted March 24, 2015 Share Posted March 24, 2015 (edited) Hey guys. I'm trying to get my view icons on one line, but 2 of them aren't working. They are the collections that aren't grouped into views, but still appear with the other views. Anyone know how I can get this working? Thanks. I'm justing doing this atm: div[data-itemtype=UserView] {width: 10%;} Edit: Worked it out. Needed to do this: div[data-itemtype=UserView] {width: 14.28%;} div[data-itemtype=CollectionFolder] {width: 14.28%;} Edited March 24, 2015 by swhitmore Link to comment Share on other sites More sharing options...
techywarrior 688 Posted March 24, 2015 Share Posted March 24, 2015 Just to keep it neater you can do this: div[data-itemtype=UserView], div[data-itemtype=CollectionFolder] {width: 14.28%;} 1 Link to comment Share on other sites More sharing options...
swhitmore 781 Posted March 25, 2015 Share Posted March 25, 2015 Ah, right. That makes more sense. Thanks. Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted May 4, 2015 Share Posted May 4, 2015 (edited) This is my previous adaptation of the CSS code and images to the main menu. div[data-itemtype=UserView] {width: 33%;} div[data-itemtype=UserView] .cardFooter {display:none;} div[data-itemtype=CollectionFolder] {width: 33%;} div[data-itemtype=CollectionFolder] .cardFooter {display:none;} Edited May 5, 2015 by Gato_Guga Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted May 5, 2015 Share Posted May 5, 2015 (edited) This is my new adaptation of the CSS code and images to the main menu. /*Apply still images reduced in size using single line in the main menu*/ div[data-itemtype=UserView] {width: 16.5%;} div[data-itemtype=UserView] .cardFooter {display:none;} div[data-itemtype=CollectionFolder] {width: 16.5%;} div[data-itemtype=CollectionFolder] .cardFooter {display:none;} /*Apply edges in blue on the images from the main menu*/ div[data-itemtype="CollectionFolder"] .cardContent, div[data-itemtype="UserView"] .cardContent, div[data-itemtype="PlaylistsFolder"] .cardContent{ border: 1px solid rgba(0,94,243,.5); -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(0,94,243,.6); box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(0,94,243,.6); } Edited May 5, 2015 by Gato_Guga 1 Link to comment Share on other sites More sharing options...
Luke 37065 Posted May 5, 2015 Share Posted May 5, 2015 Fancy! 1 Link to comment Share on other sites More sharing options...
syran 10 Posted May 5, 2015 Share Posted May 5, 2015 Ok this may sound stupid, but is there a way to change the level of transparency for the imagest that the server creates using movie or series posters? I would like them to be full transparent and not kinda grey and disable the reflection effect Link to comment Share on other sites More sharing options...
Koleckai Silvestri 1150 Posted May 6, 2015 Author Share Posted May 6, 2015 Ok this may sound stupid, but is there a way to change the level of transparency for the imagest that the server creates using movie or series posters? I would like them to be full transparent and not kinda grey and disable the reflection effect You can use the opacity attribute. So you can do something like this: div[data-itemtype=UserView] {width: 33%;opacity: 0.4;} Or you can try a background-color with a transparency layer like this: background-color: rgba(20,20,20,.73) !important; 0 would be transparent and 1 would be opaque. Link to comment Share on other sites More sharing options...
jluce50 118 Posted May 7, 2015 Share Posted May 7, 2015 I apologize for going off topic, but it's been bugging me that my automatically created images don't have the label. Is there a trick to getting them to appear? Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted May 7, 2015 Share Posted May 7, 2015 You can use the CSS code to change the texts indicated in 1 , 2 and 3 ? Link to comment Share on other sites More sharing options...
Koleckai Silvestri 1150 Posted May 7, 2015 Author Share Posted May 7, 2015 I apologize for going off topic, but it's been bugging me that my automatically created images don't have the label. Is there a trick to getting them to appear? I didn't use any tricks when I generated mine. Link to comment Share on other sites More sharing options...
Koleckai Silvestri 1150 Posted May 7, 2015 Author Share Posted May 7, 2015 You can use the CSS code to change the texts indicated in 1 , 2 and 3 ? You would have to try using the :before and content CSS like you did for the name in the header. Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted May 7, 2015 Share Posted May 7, 2015 You would have to try using the :before and content CSS like you did for the name in the header. I'm sorry, I didn't understand where to use the signal ":" Link to comment Share on other sites More sharing options...
syran 10 Posted May 9, 2015 Share Posted May 9, 2015 What if we make some kind of Emby CSS Wiki, listing all the editable components of the web UI, explaining what they are used for and how to customize them? 6 Link to comment Share on other sites More sharing options...
swhitmore 781 Posted May 10, 2015 Share Posted May 10, 2015 What if we make some kind of Emby CSS Wiki, listing all the editable components of the web UI, explaining what they are used for and how to customize them? Your idea, now you have to deliver 1 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