Move stuff down

[arrbee99 1713]

Er. I still like and use the effect in post #6, but am wondering if there's a way to keep that no poster effect in a slightly more specific way, as it also kills the poster you (normally) get when looking at an actor detail screen.

 

Existing css (assuming I've copied the right bit) is

 

/* ----- Change Movie Active Thumbnail Image Size ----- */

#itemDetailPage .portraitDetailImageContainer {

     display: none; !important;

}

[Happy2Play 9455]

 

Er. I still like and use the effect in post #6, but am wondering if there's a way to keep that no poster effect in a slightly more specific way, as it also kills the poster you (normally) get when looking at an actor detail screen.

 

Existing css (assuming I've copied the right bit) is

 

/* ----- Change Movie Active Thumbnail Image Size ----- */

#itemDetailPage .portraitDetailImageContainer {

     display: none; !important;

}

 

 

Like this.

#itemDetailPage div.detailImageContainer.detailimg-hidemobile.portraitDetailImageContainer {display: none; }

[arrbee99 1713]

 

Like this.

#itemDetailPage div.detailImageContainer.detailimg-hidemobile.portraitDetailImageContainer {display: none; }

 

Excellent. That worked well. Thanks very much 

[StewieGreen 159]

/* ------------------MAIN PAGE and POSTERS ------------------*/


/*---- Makes the header consistent throughout Emby (Doesn't work on Chrome)---*/
.skinHeader.skinHeader-withBackground.skinHeader-blurred.headroom.noHomeButtonHeader{
   background: linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,0))!important;}


.skinHeader.skinHeader-withBackground.skinHeader-blurred.headroom{
    background: linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,0))!important;}

/* ----- Change background Image Transparency ----*/
.backgroundContainer.withBackdrop {
    background: rgba(0, 0, 0, .65)!important;
}

/* ---- changing some colors (notably home and fav.) ---*/
.emby-tab-button-active{
color: #5F9EA0!important;}

.actionSheetContent{
background: #5F9EA0;}



/* ----- Section Title Font Adjustments ----*/
.sectionTitle h1, h2 {

    font-family: Futura, Tahoma, sans-serif;
    font-size:27px;
    text-shadow: 1px 1px 2px rgba(0,0,0, 0.45);
     font-weight: bold!important;
}

/* ---- Removes play button overlay on posters ----*/
.cardOverlayFab-primary {
   display:none;
}

/*----- Remove dark overlay on posters on hover ----*/
.cardOverlayContainer{background: none!important;}

/*----- Posters slightly transparent then opaque on hover ----*/
.cardBox{
opacity: .85;}
.cardBox:hover{
opacity: 1;}



/* ----- Poster enlarge on hover ----*/
.cardBox{transition:all 0.2s;}
.cardBox:hover {transform:scale(1.075);transition:all 0.2s;}



/* ----- Poster background colour change and shadow on hover ----*/
.cardBox:hover {

background:#5F9EA0 !important;

-webkit-box-shadow: 0px 2px 4px #000000;
  -moz-box-shadow: 0px 2px 4px #000000;
  box-shadow: 0px 2px 4px #000000;
}





/*----Movie & TV Section Changes ----*/

/* ----- Small Cast Pictures to fit in single row ----*/
.card.portraitCard.personCard{
    width: 9.5em!important;
    height: auto;
}

/* ----- Remove Logo from Movie and TV pages ----*/
.detailLogo {display: none;}


/* ----- hide media information ----*/
.verticalSection.detailVerticalSection.audioVideoMediaInfo{
    display: none!important;
}


/*----------removes links on movie and tv pages (IMDB TMDB etc-------*/
.itemExternalLinks {display: none;}



/*----Complete Overhaul of Movie/TV buttons: play, resume, ... etc etc ----*/

.detailButton.emby-button{transition:all 0.2s;}
.detailButton.emby-button:hover {transform:scale(1.085);transition:all 0.2s;}


.detailButton.emby-button{
   border: 0px;
  display: inline-block;
  position: relative;
  z-index: 1;
  border: 0px solid #000000;
  background-color: transparent;
  font-family: Futura, Tahoma, sans-serif;
  color: #ffffff;
  padding: 15px;
  margin-left: 20px;

}

.detailButton.emby-button::after{

-webkit-box-shadow: 0px 2px 4px #000000;
  -moz-box-shadow: 0px 2px 4px #000000;
  box-shadow: 0px 2px 4px #000000;
content: "'";
  color: transparent;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  z-index: -1;
  border-radius: 3px;
  background-color: #5F9EA0;
  transform: skew(-30deg);
-webkit-transform: skew(-30deg);
-o-transform: skew(-30deg);
-moz-transform: skew(-30deg);
-ms-transform: skew(-30deg);
}


/*----Change Movie/TV Font settings ----*/
.itemName {
    font-family: Futura, Tahoma, sans-serif !important;
    font-size:60px!important;
    
   font-weight: bold!important;
   
}

.parentName{
font-family: Futura, Tahoma, sans-serif;
    font-size:80px;
    font-weight: bold;
}

/*----Change Movie/TV Poster settings ----*/
.itemDetailImage {
    margin-top: 350px;
    width: 125%;
    height: auto;
}

.mainDetailButtons {
    font-size: 100%;
    margin: .5em 1;
}

/*--- some stuff to make the dashboard similar ----*/
.actionSheetContent{
background: #5F9EA0;}

.cardOverlayButton{
padding: .2em!important;}


.cardOverlayContainer{
opacity: 85%!important;}


/* --- Movie title and descriptions over ----*/
.detailSection {padding-top: 27em; padding-left: 5em;}



/*---- background change to tv episodes list---*/
.listItem-content{
background: linear-gradient(to right,#000,rgba(0,0,0,0))!important;
}

This is my entire setup.  I still have to fine tune it because some settings have consequences elsewhere.

Edited October 24, 2018 by adamstewiegreen

[StewieGreen 159]

/*---drawer transparent----*/
.mainDrawer{
opacity: .75;}

Another quick adjustment.

[StewieGreen 159]

 

 

Smaller cast and crew, bigger poster/titles and button changes

 

 

The drawer - not sure if I like it yet ... might add a shadow or change the color to something more grey and make the hover very noticeable

[PenkethBoy 2066]

Thanks for your settings think i will use a few of those

 

One thing in return from looking at your images above.

 

i dont like the tooty fruity colours for missing actor images as its a glaring colour clash!

 

so...

/* ---- Modify Blank Actors Appearance ---*/
#castContent .cardImageIcon {color: grey;}

#castContent .defaultCardBackground1,
#castContent .defaultCardBackground2,
#castContent .defaultCardBackground3,
#castContent .defaultCardBackground4,
#castContent .defaultCardBackground5
 {background-color: transparent;}

Looks like this (with no other css applied)

Edited October 24, 2018 by PenkethBoy

[StewieGreen 159]

Longshot here: is there a way to replace the title with the logo?

[Happy2Play 9455]

Longshot here: is there a way to replace the title with the logo?

 

What title are you referring to?

[StewieGreen 159]

Actually, I think I can move the one I have hidden into place and then hide the text beside the poster... Might work.

[StewieGreen 159]

Last one for today:

 

I dislike backgrounds that are a clear, in focus photos.  I find my eyes think the background is the foreground and everything starts looking muddled (making the backgrounds dark definitely helps solve this problem too...)

 

Here is another solution to the problem: background blur.

/*----blur backgroound----*/
.backdropImage.displayingBackdropImage{
-webkit-filter: blur(7px);
  filter: blur(7px);
}

[PenkethBoy 2066]

Nice like that effect - works well

[PenkethBoy 2066]

Update to make Cast & Crew images smaller for the Beta Server

/* ----- Smaller Cast Pictures Beta Server----*/
.card.overflowPortraitCard.personCard{
    width: 9.5em!important;
    height: auto;
}

[PenkethBoy 2066]

Changes for the Scroll Button - Beta Server

/* ----- Emby Scroller Button Icon Beta Server----*/
.scrollbuttoncontainer .md-icon{
    color: #4285F4;
}

/* ----- Emby Scroller Scroll Button - Beta Server----*/
.scrollbuttoncontainer{
    background:LightSkyBlue !important;
    width: 50px;
    height: 60px;
}

[StewieGreen 159]

Thanks for your settings think i will use a few of those

 

One thing in return from looking at your images above.

 

i dont like the tooty fruity colours for missing actor images as its a glaring colour clash!

 

so...

/* ---- Modify Blank Actors Appearance ---*/
#castContent .cardImageIcon {color: grey;}

#castContent .defaultCardBackground1,
#castContent .defaultCardBackground2,
#castContent .defaultCardBackground3,
#castContent .defaultCardBackground4,
#castContent .defaultCardBackground5
 {background-color: transparent;}

Looks like this (with no other css applied)

 

Thanks for this.  Didn't even notice the colors until you mentioned it, then I had to change it.

 

Transparent didn't really work for me so I made the background grey and the decapitated dudes black.

[PenkethBoy 2066]

No Problem

 

each to their own taste

[arrbee99 1713]

Seems like in the latest beta (Chrome is all I've checked), and maybe a previous version or two, the moving stuff down bit has stopped working, as in post #6, any thoughts on getting it working again please.

 

Think it was this bit for me -

 

.detailLogo {top: 40em;}

 

.detailPageContent {padding-top: 30em;}

[Happy2Play 9455]

 

Seems like in the latest beta (Chrome is all I've checked), and maybe a previous version or two, the moving stuff down bit has stopped working, as in post #6, any thoughts on getting it working again please.

 

Think it was this bit for me -

 

.detailLogo {top: 40em;}

 

.detailPageContent {padding-top: 30em;}

 

 

You have two options.

div.detailLogo {top: 40em ;}
div.detailPageContent {padding-top: 30em ;}

or

.detailLogo {top: 40em !important ;}
.detailPageContent {padding-top: 30em !important ;}

[arrbee99 1713]

 

You have two options.

div.detailLogo {top: 40em ;}
div.detailPageContent {padding-top: 30em ;}

or

.detailLogo {top: 40em !important ;}
.detailPageContent {padding-top: 30em !important ;}

 

Thanks very much, worked a treat.

[arrbee99 1713]

Yummy...

 

[Rafick 3]

 

how to leave the buttons like this?

[arrbee99 1713]

If you took that image from the Star Wars one above, they're a bit transparent. For me in Chrome they're a solid grey, but in the new Edge browser they're transparent, which is where I got that screenshot from.

 

If thats what you're referring too...

[Happy2Play 9455]

 

how to leave the buttons like this?

 

Don't specifically know what that is, but it is different with every theme.  So you would need to use the browser console it inspect that element to know what the ".detailButton-icon" background is.

Like the Dark theme ".detailButton-icon" has a background of "#313235" where BlueRadience is "rgba(0,0,0,.5)".

 

So the css would be something like this

i.detailButton-icon {background: rgba(0,0,0,.5); }
i.detailButton-icon {background: #313235; }


i.detailButton-icon {background: YOURCOLOR; }

[Rafick 3]

this is my

 

It's not color, I wanted to change the shape of the buttons

[arrbee99 1713]

this is my

 

It's not color, I wanted to change the shape of the buttons

 

Is this from a browser, like Chrome, or an app ?