Jump to content


Photo

Move stuff down

css move

  • Please log in to reply
40 replies to this topic

#21 Happy2Play OFFLINE  

Happy2Play

    Trial and Error

  • Moderators
  • 14065 posts
  • Local time: 10:10 PM
  • LocationWashington State

Posted 23 October 2018 - 08:40 PM

Curious what css did you use to make "MyMedia" "Continue Watching" etc bigger and/or change the font?

 

You mean something like this?  This only target the homepage.

#homeTab h2 {
    font-size: 3em;
    font-family: serif;
}

  • PenkethBoy likes this

#22 Karl Blixt OFFLINE  

Karl Blixt

    Advanced Member

  • Members
  • 75 posts
  • Local time: 06:10 AM

Posted 23 October 2018 - 08:44 PM

@Karl Blixt
 
If you are using the online web app (app.emby.media), custom css does not carry over.  It only applies to LAN/IP/DDNS connections.


Thank you, that solved my issue.

#23 PenkethBoy OFFLINE  

PenkethBoy

    Advanced Member

  • Members
  • 3211 posts
  • Local time: 06:10 AM
  • LocationWarrington,UK

Posted 23 October 2018 - 08:49 PM

 

-------------------------------

I've made other changes since, such as removing the play graphic on hover and the posters are now slightly transparent and become opaque on hover to give the feeling like they're getting brighter.  Although this had some unintended consequences, such as the white icons in the corner of posters aren't seen on light/white posters.

 

 

Thanks

 

tad big for me but a quick twiddle should fix that

 

Care to share your other creative css changes  :)

 

===================

used with these settings after a bit of play

 

/* ----- Section Title Font Adjustments ----*/
.sectionTitle h1, h2 {
 
    color: #4285F4 !important; 
    text-shadow: 1px 1px 2px rgba(0,0,0, 0.45);
    font-size: 1.5em;
}
 
5bcfc6bc0ce17_Capture.jpg

Edited by PenkethBoy, 23 October 2018 - 09:11 PM.


#24 Happy2Play OFFLINE  

Happy2Play

    Trial and Error

  • Moderators
  • 14065 posts
  • Local time: 10:10 PM
  • LocationWashington State

Posted 23 October 2018 - 09:17 PM

 

Thanks

 

tad big for me but a quick twiddle should fix that

 

Care to share your other creative css changes  :)

 

===================

used with these settings after a bit of play

 

/* ----- Section Title Font Adjustments ----*/
.sectionTitle h1, h2 {
 
    color: #4285F4 !important; 
    text-shadow: 1px 1px 2px rgba(0,0,0, 0.45);
    font-size: 1.5em;
}
 
5bcfc6bc0ce17_Capture.jpg

 

 

:) But 1.5em is the default size at least for h2 section titles.


Edited by Happy2Play, 23 October 2018 - 09:18 PM.


#25 PenkethBoy OFFLINE  

PenkethBoy

    Advanced Member

  • Members
  • 3211 posts
  • Local time: 06:10 AM
  • LocationWarrington,UK

Posted 23 October 2018 - 09:48 PM

Maybe it is - changed it so many times :)



#26 arrbee99 OFFLINE  

arrbee99

    Advanced Member

  • Members
  • 2572 posts
  • Local time: 05:10 PM
  • LocationNew Zealand

Posted 23 October 2018 - 10:30 PM

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


#27 Happy2Play OFFLINE  

Happy2Play

    Trial and Error

  • Moderators
  • 14065 posts
  • Local time: 10:10 PM
  • LocationWashington State

Posted 23 October 2018 - 10:50 PM

 

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


#28 arrbee99 OFFLINE  

arrbee99

    Advanced Member

  • Members
  • 2572 posts
  • Local time: 05:10 PM
  • LocationNew Zealand

Posted 23 October 2018 - 11:07 PM

 

Like this.

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

 

Excellent. That worked well. Thanks very much  :)



#29 adamstewiegreen OFFLINE  

adamstewiegreen

    Advanced Member

  • Members
  • 188 posts
  • Local time: 04:10 PM

Posted 24 October 2018 - 12:38 AM

/* ------------------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 by adamstewiegreen, 24 October 2018 - 12:41 AM.

  • Happy2Play and Oxide like this

#30 adamstewiegreen OFFLINE  

adamstewiegreen

    Advanced Member

  • Members
  • 188 posts
  • Local time: 04:10 PM

Posted 24 October 2018 - 12:55 AM

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

Another quick adjustment.



#31 adamstewiegreen OFFLINE  

adamstewiegreen

    Advanced Member

  • Members
  • 188 posts
  • Local time: 04:10 PM

Posted 24 October 2018 - 01:06 AM

5bcffce518db8_ScreenShot20181024at40121p

 

 

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

 

5bcffd487ac6c_ScreenShot20181024at40337p

 

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



#32 PenkethBoy OFFLINE  

PenkethBoy

    Advanced Member

  • Members
  • 3211 posts
  • Local time: 06:10 AM
  • LocationWarrington,UK

Posted 24 October 2018 - 01:56 AM

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)

5bd0094a0bf08_Capture.jpg


Edited by PenkethBoy, 24 October 2018 - 01:57 AM.


#33 adamstewiegreen OFFLINE  

adamstewiegreen

    Advanced Member

  • Members
  • 188 posts
  • Local time: 04:10 PM

Posted 24 October 2018 - 04:08 AM

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

#34 Happy2Play OFFLINE  

Happy2Play

    Trial and Error

  • Moderators
  • 14065 posts
  • Local time: 10:10 PM
  • LocationWashington State

Posted 24 October 2018 - 04:15 AM

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

 

What title are you referring to?



#35 adamstewiegreen OFFLINE  

adamstewiegreen

    Advanced Member

  • Members
  • 188 posts
  • Local time: 04:10 PM

Posted 24 October 2018 - 04:21 AM

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

#36 adamstewiegreen OFFLINE  

adamstewiegreen

    Advanced Member

  • Members
  • 188 posts
  • Local time: 04:10 PM

Posted 24 October 2018 - 10:08 AM

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

5bd07c93e8347_ScreenShot20181025at10558a


  • PenkethBoy likes this

#37 PenkethBoy OFFLINE  

PenkethBoy

    Advanced Member

  • Members
  • 3211 posts
  • Local time: 06:10 AM
  • LocationWarrington,UK

Posted 24 October 2018 - 01:42 PM

Nice like that effect - works well



#38 PenkethBoy OFFLINE  

PenkethBoy

    Advanced Member

  • Members
  • 3211 posts
  • Local time: 06:10 AM
  • LocationWarrington,UK

Posted 24 October 2018 - 03:07 PM

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



#39 PenkethBoy OFFLINE  

PenkethBoy

    Advanced Member

  • Members
  • 3211 posts
  • Local time: 06:10 AM
  • LocationWarrington,UK

Posted 24 October 2018 - 03:10 PM

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

5bd0c39fc770a_Capture2.jpg



#40 adamstewiegreen OFFLINE  

adamstewiegreen

    Advanced Member

  • Members
  • 188 posts
  • Local time: 04:10 PM

Posted 28 October 2018 - 05:57 AM

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)

5bd0094a0bf08_Capture.jpg

 

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.







Also tagged with one or more of these keywords: css, move

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users