Move stuff down

[arrbee99 1712]

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

 

 

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

[Luke 40073]

Why?

[Happy2Play 9441]

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

[arrbee99 1712]

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.

 

Edited June 25, 2018 by arrbee99

[arrbee99 1712]

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

 

[arrbee99 1712]

or possibly...

 

[StewieGreen 159]

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

 

[arrbee99 1712]

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.

[Happy2Play 9441]

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.

[arrbee99 1712]

Because Luke changes code and moves stuff around.

 

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

[StewieGreen 159]

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.

[StewieGreen 159]

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)

 

 

 

[arrbee99 1712]

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.

[Karl Blixt 8]

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.

[arrbee99 1712]

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

[Karl Blixt 8]

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

[arrbee99 1712]

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.

[Happy2Play 9441]

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

[PenkethBoy 2066]

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)

 

 

 

 

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

[StewieGreen 159]

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.

 

[Happy2Play 9441]

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

[Karl Blixt 8]

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

[PenkethBoy 2066]

 

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

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;

}

 

Edited October 24, 2018 by PenkethBoy

[Happy2Play 9441]

 

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;

}

 

 

 

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

Edited October 24, 2018 by Happy2Play

[PenkethBoy 2066]

Maybe it is - changed it so many times