Jump to content

"My Views" changes.


Koleckai Silvestri

Recommended Posts

Koleckai Silvestri

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: 

BzWEjBR.jpg

 

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%;}
  • Like 4
Link to post
Share on other sites
CarlosLima

54f644628ea5c_menu.png

 

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 by Gato_Guga
  • Like 1
Link to post
Share on other sites

 

BzWEjBR.jpg

 

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 by Pais
Link to post
Share on other sites
Angelblue05

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

Link to post
Share on other sites
Happy2Play

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.

54f8f06406224_Viewsmode.jpg

Link to post
Share on other sites
Koleckai Silvestri

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 post
Share on other sites
  • 3 weeks later...
swhitmore

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%;}
5511f36e0aa3b_Capture.jpg

 

Edit: Worked it out. Needed to do this:

div[data-itemtype=UserView] {width: 14.28%;}
  
div[data-itemtype=CollectionFolder] {width: 14.28%;}
Edited by swhitmore
Link to post
Share on other sites
techywarrior

Just to keep it neater you can do this:

div[data-itemtype=UserView], div[data-itemtype=CollectionFolder] {width: 14.28%;}
  • Like 1
Link to post
Share on other sites
  • 1 month later...
CarlosLima

This is my previous adaptation of the CSS code and images to the main menu.

 

5548029fa5ebe_Capturar.png

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 by Gato_Guga
Link to post
Share on other sites
CarlosLima

This is my new adaptation of the CSS code and images to the main menu.

 

55480a886f7a1_Capturar1.png

/*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 by Gato_Guga
  • Like 1
Link to post
Share on other sites

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 post
Share on other sites
Koleckai Silvestri

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 post
Share on other sites
jluce50

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?

 

554b5aecb5e9b_20150507_073003.jpg

Link to post
Share on other sites
CarlosLima

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

 

554b79a3e769a_Capturar.png

Link to post
Share on other sites
Koleckai Silvestri

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 post
Share on other sites
Koleckai Silvestri

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 post
Share on other sites
CarlosLima

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 post
Share on other sites

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?

  • Like 6
Link to post
Share on other sites
swhitmore

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 ;)

  • Like 1
Link to post
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...