Jump to content

Move stuff down


arrbee99

Recommended Posts

arrbee99

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.

Link to comment
Share on other sites

Happy2Play

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;}
Link to comment
Share on other sites

arrbee99

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
Link to comment
Share on other sites

arrbee99

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

Link to comment
Share on other sites

  • 2 months later...
adamstewiegreen

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

Link to comment
Share on other sites

arrbee99

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.

Link to comment
Share on other sites

Happy2Play

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.

Link to comment
Share on other sites

arrbee99

Because Luke changes code and moves stuff around.

 

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

Link to comment
Share on other sites

adamstewiegreen

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.

Link to comment
Share on other sites

adamstewiegreen

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

Link to comment
Share on other sites

arrbee99

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.

Link to comment
Share on other sites

  • 1 month later...
Karl Blixt

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.

Link to comment
Share on other sites

arrbee99

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

Link to comment
Share on other sites

arrbee99

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.

Link to comment
Share on other sites

Happy2Play

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

Link to comment
Share on other sites

PenkethBoy

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?

Link to comment
Share on other sites

adamstewiegreen

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

  • Like 2
Link to comment
Share on other sites

Happy2Play

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;
}
  • Like 1
Link to comment
Share on other sites

Karl Blixt

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

Link to comment
Share on other sites

PenkethBoy

 

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

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
Link to comment
Share on other sites

Happy2Play

 

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
Link to comment
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...