"My Views" changes.

[Koleckai Silvestri 1151]

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%;}

[Guest]

Cool. You do not want to share the pictures ?

[Abobader 3336]

Well done.

[Koleckai Silvestri 1151]

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.

[Guest]

Thanks very much.

[Guest]

 

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

[Pais 123]

 

 

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

[Angelblue05 4131]

UserView are the media folders you've "created" in the dashboard > Library section of your server dashboard.

[Happy2Play 9442]

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.

[Koleckai Silvestri 1151]

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.

[swhitmore 781]

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

[techywarrior 689]

Just to keep it neater you can do this:

div[data-itemtype=UserView], div[data-itemtype=CollectionFolder] {width: 14.28%;}

[swhitmore 781]

Ah, right. That makes more sense. Thanks.

[Guest]

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

[Guest]

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

[Luke 40082]

Fancy!

[syran 10]

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

[Koleckai Silvestri 1151]

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.

[jluce50 122]

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?

 

[Guest]

You can use the CSS code to change the texts indicated in 1 , 2 and 3 ?

 

[Koleckai Silvestri 1151]

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.

[Koleckai Silvestri 1151]

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.

[Guest]

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 ":"

[syran 10]

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?

[swhitmore 781]

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