Jump to content

Custom CSS with Emby Web App


Recommended Posts

Happy2Play

Not seeing any issues with

 

/*Background Image brightness*/
.backgroundContainer.withBackdrop {background-color: rgba(0,0,0,.5);}

OR

/*Background Image brightness*/
.withBackdrop {background-color: rgba(0,0,0,.5);}
Link to post
Share on other sites
arrbee99

Duh, note to self, read the post properly - copied the 3.1.78 version, not the .79 one. If I had a brain I'd be dangerous.....

Link to post
Share on other sites
bigjohn

@@bigjohn

 

 

Does this still work in latest beta vs: 3.1.70.0? I have tried it but do not see the blue border.

 

Sorry, been without internet connection for a while. Luke is right, I don't run beta on my home system anymore because I haven't had time to deal with it. I also took out all of my css customizations to the dashboard because I kept having to spend time on it that I just couldn't afford to spend. My world will eventually calm back down and I can get back to playing  :D

Link to post
Share on other sites

Sorry, been without internet connection for a while. Luke is right, I don't run beta on my home system anymore because I haven't had time to deal with it. I also took out all of my css customizations to the dashboard because I kept having to spend time on it that I just couldn't afford to spend. My world will eventually calm back down and I can get back to playing  :D

Thanks for your response.

Link to post
Share on other sites
Blueeyiz702

 

@

 

What are you trying to do to them, change their color or hide them?

div.playedIndicator, div.countIndicator {background: blue;}

div.playedIndicator, div.countIndicator {display: none;}

I'm tying to hide all the buttons. the black play button and the green episode buttons,your css was working now since update it doesn't.

Link to post
Share on other sites

@@Happy2Play

 

Thanks. Works great.

 

 

Tested, the last version that code worked in was 3.1.68.0, doesn't work in .69 or .70. 

 

:) Here you go UPDATED and working with .70.


/*Blue border and glow for userview cards */
.itemsContainer.homeTopViews .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);
}

Not working with beta,95

Link to post
Share on other sites

Since he is taking the time to design this css for you, I would at least take a minute to produce a screenshot to show him what the issue is.

Link to post
Share on other sites
Happy2Play

I'm tying to hide all the buttons. the black play button and the green episode buttons,your css was working now since update it doesn't.

 

 

Didn't have an issue with played/count indicator but modified overlay play button.  This was tested on Dev Version 3.1.6064.23837

button.cardOverlayButton, div.playedIndicator, div.countIndicator {display: none;}
  • Like 2
Link to post
Share on other sites
Happy2Play

Not working with beta,95

 

Here you go.

/*Glow for userview cards */
div.homePageSection.section0 button.cardContent {
  border: 1px solid rgba(66, 133, 244, 0.5) !important;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(66, 133, 244, 0.6) !important;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(66, 133, 244, 0.6) !important; }
Link to post
Share on other sites
Blueeyiz702

 

Didn't have an issue with played/count indicator but modified overlay play button.  This was tested on Dev Version 3.1.6064.23837

button.cardOverlayButton, div.playedIndicator, div.countIndicator {display: none;}

Thanks,this one worked,the other one you had gave me stopped.

Edited by blueeyiz7021
Link to post
Share on other sites
Happy2Play

@@Happy2Play, the Css you gave me to lighten up background is not working again,this is how it looks.

 

 

@ Here you go.

/*Background Image brightness*/
.background-theme-b .backgroundContainer.withBackdrop {background-color: rgba(0,0,0,.5);}
Link to post
Share on other sites
Happy2Play

*Adjusted Glow on Home Screen to be maintained after selected

/*Glow for userview cards */
div.homePageSection.section0 div.cardScalable, div.homePageSection.section0 div.cardScalable.withHoverMenu {
  border: 1px solid rgba(66, 133, 244, 0.5);
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(66, 133, 244, 0.6) ;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(66, 133, 244, 0.6); }
Link to post
Share on other sites

 

Here you go.

/*Glow for userview cards */
div.homePageSection.section0 button.cardContent {
  border: 1px solid rgba(66, 133, 244, 0.5) !important;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(66, 133, 244, 0.6) !important;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(66, 133, 244, 0.6) !important; }

Thanks

Link to post
Share on other sites
  • 2 weeks later...
CarlosLima

Hi.
Returning after a long time.
I would like to delete the entries highlighted and I'm using CSS code below, which should solve ??

 

57b7c3204763c_Capturar.png
 

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;}
Edited by CarlosLima
Link to post
Share on other sites
Happy2Play

 

Hi.

Returning after a long time.

I would like to delete the entries highlighted and I'm using CSS code below, which should solve ??

 

57b7c3204763c_Capturar.png

 

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

 

This will remove the label only on that section and not affect any other.

.homePageSection.section0 .cardTextCentered {display: none;}
  • Like 1
Link to post
Share on other sites
CarlosLima

 

This will remove the label only on that section and not affect any other.

.homePageSection.section0 .cardTextCentered {display: none;}

 

Case solved. Thank you very much.

Link to post
Share on other sites
CarlosLima

Hi, you can change the color and shape of the highlights ?
I would have blue and square or rectangular.
Thank from now. Greetings from Brazil.

57b88f3a4ed30_Capturar.png

Edited by CarlosLima
Link to post
Share on other sites
CarlosLima

 

I used some of the code in this thread to customize my poster/thumb view and thought I'd share:

Screenshots: http://imgur.com/a/QGJsz

/* Played Indicator Size+Color+Shadow+Border */
.playedIndicator {
font-size: 13px;
border-radius: 3px;
background: rgba(49,124,186,0.9);
height: 20px;
width: 34px;
top: 6px;
right: 3px;
border-style: groove;
border-width: 1px;
border-color: #99E5FF;
-webkit-box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.9);
-moz-box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.9);
box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.9);
}
/* Thumbs & Posters Border+Shadow */
.cardImage {
border-radius: 5px;
border-style: solid;
border-width: 1px;
border-color: #333333;
-webkit-box-shadow: 0px 0px 1px 2px rgba(0,0,0,0.9);
-moz-box-shadow: 0px 0px 1px 2px rgba(0,0,0,0.9);
box-shadow: 0px 0px 1px 2px rgba(0,0,0,0.9);
}

Very cool, congratulations.

I applied but did not work.

Does it has to do with the language in Portuguese, my Emby ?

Edited by CarlosLima
Link to post
Share on other sites
Happy2Play

I used some of the code in this thread to customize my poster/thumb view and thought I'd share:

 

/* Played Indicator Size+Color+Shadow+Border */
.playedIndicator {
font-size: 13px;
border-radius: 3px;
background: rgba(49,124,186,0.9);
height: 20px;
width: 34px;
top: 6px;
right: 3px;
border-style: groove;
border-width: 1px;
border-color: #99E5FF;
-webkit-box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.9);
-moz-box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.9);
box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.9);
}
/* Thumbs & Posters Border+Shadow */
.cardImage {
border-radius: 5px;
border-style: solid;
border-width: 1px;
border-color: #333333;
-webkit-box-shadow: 0px 0px 1px 2px rgba(0,0,0,0.9);
-moz-box-shadow: 0px 0px 1px 2px rgba(0,0,0,0.9);
box-shadow: 0px 0px 1px 2px rgba(0,0,0,0.9);
}

Very cool, congratulations.

I applied but did not work.

Does it has to do with the language in Portuguese, my Emby ?

 

 

For the first one update the ".playedIndicator" with "div.playedIndicator, div.countIndicator".

Edited by Happy2Play
  • Like 1
Link to post
Share on other sites
CarlosLima

 

For the first one update the ".playedIndicator" with "div.playedIndicator, div.countIndicator".

 

My Hero. Tks

Link to post
Share on other sites
CarlosLima

Hi,

I think the new version of Server broke my CSS code. I want can use the space 1 in the same amount of space 2.

 

Is there anything wrong with this CSS code?

 

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

.homePageSection.section0 .cardTextCentered {display: none;}

 

57bb75ab3190c_Capturar.png

Edited by CarlosLima
Link to post
Share on other sites
Happy2Play

:) Here you go, all you need is this, for now.

 

/* My Media Image Size */
.smallBackdropCard {width: 33% important;}
or

 

div[data-type=CollectionFolder] {width: 33% !important;}
Edited by Happy2Play
  • Like 1
Link to post
Share on other sites
CarlosLima

:) Here you go, all you need is this, for now.

 

/* My Media Image Size */
.smallBackdropCard {width: 33% important;}
or

 

div[data-type=CollectionFolder] {width: 33% !important;}

Solved. Thank you very much

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