Jump to content


Photo

Move stuff down

css move

  • Please log in to reply
40 replies to this topic

#1 arrbee99 OFFLINE  

arrbee99

    Advanced Member

  • Members
  • 2567 posts
  • Local time: 02:51 AM
  • LocationNew Zealand

Posted 24 June 2018 - 11:49 PM

Just wondering if anybody would happen to know some css to move everything down please...

 

5b3065f229855_EmbyCSStestmovestuffdown.j

 

i.e move picture, text, logo everything down apart from the back arrow, home etc across the top.



#2 Luke OFFLINE  

Luke

    System Architect

  • Administrators
  • 126578 posts
  • Local time: 10:51 AM

Posted 24 June 2018 - 11:57 PM

Why?

#3 Happy2Play OFFLINE  

Happy2Play

    Trial and Error

  • Moderators
  • 14045 posts
  • Local time: 07:51 AM
  • LocationWashington State

Posted 25 June 2018 - 12:08 AM

Some thing like, you will have to adjust the numbers to your liking. Note this code came from beta server.
 
.detailLogo {top: 11em;}

.detailPageContent {padding-top: 7em;}


#4 arrbee99 OFFLINE  

arrbee99

    Advanced Member

  • Members
  • 2567 posts
  • Local time: 02:51 AM
  • LocationNew Zealand

Posted 25 June 2018 - 12:09 AM

I'm a fan of Ember for Emby's movie page and thought something similar would look nice in ET (EDIT: meant Chrome but ET would be nice as well). Or maybe it wouldn't but css baffles me so I have to rely on the good offices of others for help.

 

5b306a90d11ae_EmbyCSStestEmber.jpg


Edited by arrbee99, 25 June 2018 - 12:19 AM.


#5 arrbee99 OFFLINE  

arrbee99

    Advanced Member

  • Members
  • 2567 posts
  • Local time: 02:51 AM
  • LocationNew Zealand

Posted 25 June 2018 - 12:18 AM

Some thing like, you will have to adjust the numbers to your liking. Note this code came from beta server.
 

.detailLogo {top: 11em;}

.detailPageContent {padding-top: 7em;}

 

 

Thanks very much dude, distinct possibilities I feel...

 

5b306cd8d3625_EmbyCSStestChrome.jpg



#6 arrbee99 OFFLINE  

arrbee99

    Advanced Member

  • Members
  • 2567 posts
  • Local time: 02:51 AM
  • LocationNew Zealand

Posted 25 June 2018 - 02:32 AM

or possibly...

 

5b308c873753d_EmbyCSStestChrome1.jpg



#7 adamstewiegreen OFFLINE  

adamstewiegreen

    Advanced Member

  • Members
  • 188 posts
  • Local time: 01:51 AM

Posted 04 September 2018 - 05:55 AM

@arrbee99 Thanks for the inspiration.  It game me the kick in the pants to play around with the CSS.

 

This is what I have so far.

 

I want to move the tagline directly under the title and play with the look of the pages below.

 

5b8e560c23ec0_ScreenShot20180904at62601p



#8 arrbee99 OFFLINE  

arrbee99

    Advanced Member

  • Members
  • 2567 posts
  • Local time: 02:51 AM
  • LocationNew Zealand

Posted 04 September 2018 - 05:41 PM

Thats really nice. Wish I knew how to help. CSS baffles me, especially the way something that used to work occasionally just stops and a different command is required to do the same thing. I have to rely on asking politely and hope that some nice person such as Happy2play or Penkethboy or someone else will kindly help out.



#9 Happy2Play OFFLINE  

Happy2Play

    Trial and Error

  • Moderators
  • 14045 posts
  • Local time: 07:51 AM
  • LocationWashington State

Posted 04 September 2018 - 06:24 PM

Thats really nice. Wish I knew how to help. CSS baffles me, especially the way something that used to work occasionally just stops and a different command is required to do the same thing. I have to rely on asking politely and hope that some nice person such as Happy2play or Penkethboy or someone else will kindly help out.

Because Luke changes code and moves stuff around.



#10 arrbee99 OFFLINE  

arrbee99

    Advanced Member

  • Members
  • 2567 posts
  • Local time: 02:51 AM
  • LocationNew Zealand

Posted 04 September 2018 - 06:45 PM

Because Luke changes code and moves stuff around.

 

I know. What can I say - doesn't take much to baffle me  :)



#11 adamstewiegreen OFFLINE  

adamstewiegreen

    Advanced Member

  • Members
  • 188 posts
  • Local time: 01:51 AM

Posted 05 September 2018 - 01:01 AM

Welcome to the club, I have no idea what I'm doing either.  Google + trial and error + luck = decent results.

 

The biggest improvement though was copying the transparent top menu bar to the rest of the pages!  Makes the main page look so much better.

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

For some reason though it works on firefox but not Chrome.



#12 adamstewiegreen OFFLINE  

adamstewiegreen

    Advanced Member

  • Members
  • 188 posts
  • Local time: 01:51 AM

Posted 05 September 2018 - 06:05 AM

Here's some more of what I've done.

 

The top bars the same as the movie screen (dark and very faded)

Changed the font of the headers and made them bold so they stand out a bit more.

Added 2 hover scripts: one adds a green highlight and the other makes the poster slightly larger. (See 'Oldboy' for the example)

 

 

 

5b8faa0e5bafd_ScreenShot20180905at75631p



#13 arrbee99 OFFLINE  

arrbee99

    Advanced Member

  • Members
  • 2567 posts
  • Local time: 02:51 AM
  • LocationNew Zealand

Posted 05 September 2018 - 03:28 PM

Looks like its going well. Have to admit though my OCD has hysterics with the small My Media icons, they have to be the same size as the Continue Watching stuff - Think this

 

/* My Media Image Size */
.smallBackdropCard {width: 20.0% !important;}

 

is what Happy2play provided if you feel the urge.



#14 Karl Blixt OFFLINE  

Karl Blixt

    Advanced Member

  • Members
  • 75 posts
  • Local time: 03:51 PM

Posted 23 October 2018 - 04:18 PM

hi I'm new to customizeing emby-css and was wondering what i was doing wrong. I took the code provided by Happy2Play and pasted it into the custom css field in settings and clicked save. but nothing chagend on the title screens.  What am I doing wrong? I tried with different values but nothing changed.



#15 arrbee99 OFFLINE  

arrbee99

    Advanced Member

  • Members
  • 2567 posts
  • Local time: 02:51 AM
  • LocationNew Zealand

Posted 23 October 2018 - 04:22 PM

Just guessing, but maybe refreshing the page, restarting Chrome (or whatever), clearing caches. Maybe you're not using Chrome and it needs modifying for Firefox (or whatever).



#16 Karl Blixt OFFLINE  

Karl Blixt

    Advanced Member

  • Members
  • 75 posts
  • Local time: 03:51 PM

Posted 23 October 2018 - 04:29 PM

I'm using chrome and I tried to restart it and clear cache but nothing changed.



#17 arrbee99 OFFLINE  

arrbee99

    Advanced Member

  • Members
  • 2567 posts
  • Local time: 02:51 AM
  • LocationNew Zealand

Posted 23 October 2018 - 04:38 PM

Happy2play will know better, I just copy and paste his (awesome) stuff. Might be just worth repeating the process. I once copied and pasted some css I'd saved to Word and it didn't work, just repeated the process and it worked fine. Don't know if you'd be that lucky though.

 

Or maybe it depends on stable vs css builds (though probably not). I'm on latest betas btw.

 

It can just stop working between builds and need fixing, though far as I can tell, its still working for me (touch wood).

 

Sorry, not much help.



#18 Happy2Play OFFLINE  

Happy2Play

    Trial and Error

  • Moderators
  • 14045 posts
  • Local time: 07:51 AM
  • LocationWashington State

Posted 23 October 2018 - 05:05 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.



#19 PenkethBoy OFFLINE  

PenkethBoy

    Advanced Member

  • Members
  • 3210 posts
  • Local time: 03:51 PM
  • LocationWarrington,UK

Posted 23 October 2018 - 08:25 PM

Here's some more of what I've done.

 

The top bars the same as the movie screen (dark and very faded)

Changed the font of the headers and made them bold so they stand out a bit more.

Added 2 hover scripts: one adds a green highlight and the other makes the poster slightly larger. (See 'Oldboy' for the example)

 

 

 

5b8faa0e5bafd_ScreenShot20180905at75631p

 

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



#20 adamstewiegreen OFFLINE  

adamstewiegreen

    Advanced Member

  • Members
  • 188 posts
  • Local time: 01:51 AM

Posted 23 October 2018 - 08:39 PM

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

 

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

 

 

 

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

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.

 

5bcfbea8526b6_ScreenShot20181024at81215a


  • Happy2Play and PenkethBoy like this





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