Jump to content

Custom CSS with Emby Web App


Luke

Recommended Posts

Happy2Play

This works for me on v3.1.119.0, same as posted in post 187.

/*Background Image brightness*/
.background-theme-b .backgroundContainer.withBackdrop {background-color: rgba(0,0,0,.5);}

57bdcbeeafe00_back.jpg

Link to comment
Share on other sites

Blueeyiz702

This works for me on v3.1.119.0, same as posted in post 187.

/*Background Image brightness*/
.background-theme-b .backgroundContainer.withBackdrop {background-color: rgba(0,0,0,.5);}

57bdcbeeafe00_back.jpg

Interesting that one decided it wanted to work,thanks again.

 

 

 

 

57be01d2105a0_screenshotlocalhost8096201

Link to comment
Share on other sites

GroundZero

Quick question.. Not sure if it's been asked before, and I've tried to search to no avail.

I'm trying to figure out how to add/edit tabs in Version 3.0.6400.0.

 

This is what I'm aiming to do..

 

 

Change this:

QiPrhaS.jpg

 

To This:

 

45EpZQ3.jpg

 

 

Now, my guess is that it is within the following code...however, I'm not too proficient with css... Could someone possibly point me in the right direction?


    <div is="emby-tabs" class="libraryViewNav">
        <div class="emby-tabs-slider">
            <button is="emby-button" class="emby-tab-button emby-tab-button-active" data-index="0">
                <div class="emby-button-foreground">${TabHome}</div>
            </button>
            <button is="emby-button" class="emby-tab-button" data-index="1">
                <div class="emby-button-foreground">${TabNextUp}</div>
            </button>
            <button is="emby-button" class="emby-tab-button homeFavoritesTab" data-index="2">
                <div class="emby-button-foreground">${TabFavorites}</div>
            </button>
            <button is="emby-button" class="emby-tab-button" data-index="3">
                <div class="emby-button-foreground">${TabUpcoming}</div>
            </button>
        </div>
    </div> 
Link to comment
Share on other sites

Happy2Play

Only by manually editing the js scripts and they get reset with every release.

Link to comment
Share on other sites

GroundZero

Only by manually editing the js scripts and they get reset with every release.

 

 

oh, damn.. that's too bad :(  ..sadly I'm not too familiar with java...  Thanks for letting me know though. 

Link to comment
Share on other sites

  • 1 month later...
Akilian

Hover Over Menu

 

Not sure if someone posted this, but I'm teaching my 3 yr old daughter to use a PC. She kept clicking on the wrong thing due to the hover action when selecting a movie.

 

 

.cardOverlayTarget {display: none !important;}

Link to comment
Share on other sites

  • 3 weeks later...

Hello there ! :)

 

I have two little questions and I think this topic regroups all kind of questions / answers about anything related to css ? If I'm wrong, please excuse me, I'll open a new topic ^^

 

1) Is there a way to "hide" the scrollbar while browsing my librairies ?

I've found a css on this forum that tricks the scrollbar by adding "right: -17px;" to ".libraryDocument .mainAnimatedPage", but my pages aren't centered anymore :P

 

2) I can't find why I have a pretty huge empty space at the bottom of all my pages...

When I inspect the element with my browser, it seems related to this :

<div class="ui-content" role="main" data-role="content"></div>

And I don't know how to hide it without messing up with all the application, If someone has an idea ?

 

Thanks a lot ! (and thanks again for this awesome appli :D )

Link to comment
Share on other sites

  • 2 months later...
Blueeyiz702

Using this CSS to lighten up background     

 

/*Background Image brightness*/
.withBackdrop .pageBackground {background-color: rgba(0,0,0,.5);}
 
but its showing real dark again, any fix?
 
 
 
tCArvZH.png
Link to comment
Share on other sites

Happy2Play

@

:) 
 

/*Background Image brightness*/
.background-theme-b .backgroundContainer.withBackdrop {
    background: rgba(0, 0, 0, .5) !important;
}
  • Like 1
Link to comment
Share on other sites

Blueeyiz702

 

@

:) 

 

/*Background Image brightness*/
.background-theme-b .backgroundContainer.withBackdrop {
    background: rgba(0, 0, 0, .5) !important;
}

Happy2Play, i used that code and it did't change one bit. And i noticed in Ben Z Colors with updates something didn't seem

rite. I'm not css skilled but it just seemed that when i put your code in it kicked it out when i checked to make sure it stuck.

After i put css in you gave me refreshed and checked,it was gone? So i had to do again and still not lightening it up? Looks the same as previous screenshot i showed you.

I just put your code in custom css without anything else and it worked. So maybe there is confiict with code and Ben Z's Automated colors css. When i put it in with his it stops working.

Edited by blueeyiz7021
Link to comment
Share on other sites

Happy2Play

Not sure @, but it sounds like a break in the one of the description lines.

I use the blue theme and add all my custom codes below the theme code. I don't import the code, I download the raw code.

Link to comment
Share on other sites

Blueeyiz702

Not sure @, but it sounds like a break in the one of the description lines.

 

I use the blue theme and add all my custom codes below the theme code. I don't import the code, I download the raw code.

I got it fixed Happy2Play, i had to start from scratch and just re-enter the code i use,for some reason it keep duping your code so i just deleted it all

and started fresh.

  • Like 1
Link to comment
Share on other sites

  • 1 month later...
Blueeyiz702

@@Happy2Play, hey the last css you gave me to lighten the background isn't working. Do you by chance have a new one. Thanks

Link to comment
Share on other sites

Happy2Play

@@Happy2Play, hey the last css you gave me to lighten the background isn't working. Do you by chance have a new one. Thanks

 

I am still using the code from post 211 without issue on current beta 3.2.8.4.

Link to comment
Share on other sites

Blueeyiz702

I am still using the code from post 211 without issue on current beta 3.2.8.4.

I got it to work,.

Link to comment
Share on other sites

  • 2 weeks later...
Happy2Play

How do i remove this?

 

58dd8005d236d_screenshotlocalhost8096201

/*Hide Media Info*/
div.detailSection.audioVideoMediaInfo {display: none}
Link to comment
Share on other sites

Blueeyiz702

 

/*Hide Media Info*/
div.detailSection.audioVideoMediaInfo {display: none}
Thank you,worked like a charm as always.[emoji108]

 

Sent from my Rooted Z987 on the Deathstar via Tapatalk

Link to comment
Share on other sites

CarlosLima

Can anyone help with the CSS code to change the color of the links that are in green and I would like the royal blue color?

 

58e7e42e6f06d_css.png

Edited by CarlosLima
Link to comment
Share on other sites

Happy2Play

Can anyone help with the CSS code to change the color of the links that are in green and I would like the royal blue color?

 

58e7e42e6f06d_css.png

 

Something like this.

.ui-body-b a, .ui-body-b a:visited {color: RoyalBlue; }
  • Like 1
Link to comment
Share on other sites

CarlosLima
He stayed as he wished, thank you very much.
By hovering the mouse on the link, it turns green. I would like to have another color, like yellow or white, please.
It's the last. The border of the poster, also in green, would like to have the same in royal blue as well. Thank you very much.
 
58e820dc88d7b_2.png
Link to comment
Share on other sites

Happy2Play

 

He stayed as he wished, thank you very much.
By hovering the mouse on the link, it turns green. I would like to have another color, like yellow or white, please.
It's the last. The border of the poster, also in green, would like to have the same in royal blue as well. Thank you very much.

 

58e820dc88d7b_2.png

 

 

Here you go.

/*Link and Visited color*/
.ui-body-b a, .ui-body-b a:visited {color: RoyalBlue; }

/*Active and Hover color*/
.ui-body-b a:active, .ui-body-b a:hover {color: yellow; }

/*Image glow*/
.itemDetailGalleryLink img:hover {
    -webkit-box-shadow: 0 0 20px 3px RoyalBlue;
    box-shadow: 0 0 20px 3px RoyalBlue;
}

Just change yellow to white if you prefer.

 

 

And Tagline if you want it to stand out.

/*Tagline*/
h1.tagline {color: Yellow;}
Edited by Happy2Play
  • Like 1
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...