Jump to content

Windows CSS Questions (or maybe one enhancement request)


Go to solution Solved by Happy2Play,

Recommended Posts

DigitalRebel
Posted

In my usage of Emby, I have kind of settled on using "primary view" but am keeping single movies in their own folder and movies that are series (Ex: James Bond) in a parent "James Bond" folder with each of the individual movies in their own folders under that.

2 questions that are definitely edge cases and I am sure don't impact many people:

  1. When looking at series folders, if the folder.jpg has primarily white back background, it is impossible to see the folder icon.  I tried looking into the CSS of this page to see if I could add a border, outline, or drop-shadow to the folder icon, but wasn't able to make that happen.  At the end of the day, I think the folder should be white with a black edge around it.  For darker backgrounds, you wouldn't even notice the edge and for light backgrounds you would at least be able to see the folder icon. (Maybe a feature request?)

    FolderIcon.jpg.fd2a762746043760891ea290641dbca4.jpg
     
  2. Also when naming series folders, I like to match what Emby does for individual movies where it has a primary line of information and several secondary lines of information.  In particular, I care about the series name and the date range of the movies contained in that series.  I am happy to update that information manually.  (I did look at collections for this scenario, but still think I prefer grouping by folders manually.)  The challenge I have is that the space horizontally is limited and I couldn't find a way to force a line break to put the name on the first line and move the date range to the next line.  I see that the primary line is a HTML text button and I tried to manually do something like "Crouching Tiger <br />(2000-2016)" as the title, but that didn't work.  I also thought I could use the "year" field, but that properly validates it down to a single year, not a range or a free text field.

    LongNames.jpg.1cf3045ae9329bb8f59836cbb6d53ba0.jpg

I realize both of these aren't problems and I am just looking for any suggestions on how maybe a CSS tweak might help.

Sincerely,
Mike

  • Solution
Happy2Play
Posted

Yes white will washout white indicator, I assume you want something specific to the icon not the placeholder as border and box-shadow work fine.

i.cardIndicatorIcon {
    border: yellow 2px solid;
}

or

i.cardIndicatorIcon {
    box-shadow: 0 0 0 1px #ff0000;
}

 

For the text I use this.

div.cardText.cardTextCentered.cardText-first {
    white-space: pre-wrap;
}

Note custom css only applies the web client, not the online web client or any other device.

arrbee99
Posted

Re the above, I presume they are superior to these (older ?) versions -

i.md-icon.cardIndicator.cardIndicatorIcon {text-shadow: 2px 4px rgb(0 0 0);}

div.cardText {white-space: pre-wrap;}

somehow ?

Happy2Play
Posted

Okay maybe something like this, as you can play around with these options to affect the border on the folder.

i.cardIndicatorIcon {
    box-shadow: inset 0px 1px 10px 0px black;
}

image.png.17067f25d11e3b2e15596bda5040192e.png

image.png.378546e5d49259a2ac3128588f3f8126.png

i.cardIndicatorIcon {
    box-shadow: inset 0px 1px 0px 20px black;
}

 

 

Happy2Play
Posted
6 minutes ago, arrbee99 said:

Re the above, I presume they are superior to these (older ?) versions -

i.md-icon.cardIndicator.cardIndicatorIcon {text-shadow: 2px 4px rgb(0 0 0);}

div.cardText {white-space: pre-wrap;}

somehow ?

Depends on your needs all or selective.  One is more targeted as mine is not limited to .md-icon.cardIndicator, but as far as I know it only exists this area though so same effect.

As for div.CardText it affects all div.cardText were mine is limited to only div.cardText.cardTextCentered.cardText-first

  • Like 1
arrbee99
Posted

Roger dodger. Thanks for the info.

DigitalRebel
Posted
23 minutes ago, Happy2Play said:

Okay maybe something like this, as you can play around with these options to affect the border on the folder.


i.cardIndicatorIcon {
    box-shadow: inset 0px 1px 10px 0px black;
}

image.png.17067f25d11e3b2e15596bda5040192e.png

image.png.378546e5d49259a2ac3128588f3f8126.png


i.cardIndicatorIcon {
    box-shadow: inset 0px 1px 0px 20px black;
}

 

 

Thanks for all the help with the folder icon ... I think I am going to go with this for now.  (I'm playing with the text stuff now)

IconFixed.jpg.e3047b73ac0f303d2bdf185d89cc0e58.jpg

image.png.204300762e559a7a08bc435d09354e41.png

Happy2Play
Posted

Or change the color of the icon.

i.cardIndicatorIcon {
    color: antiquewhite;
}

 

DigitalRebel
Posted

@Happy2Play thanks for that last suggestion!  I think this looks even better as the folder is very visible with both very dark and very light backgrounds.  The text wrapping looks great too.

1291522993_Iconv2.jpg.744940f52f9467e823cca8517be8eedb.jpg

373904193_Codev2.jpg.ff89d13f7f14c22dbb7eb3ccc2f93e65.jpg

 

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...