Jump to content
niceguy79

Change some css in web app.

Recommended Posts

niceguy79

I wanted to make some changes in the web app with css. I have never used css before so would really love some help. What I want to do -

1. Remove this Panel behind Home so that the background is consistant

firefox_Zf5Bc4llnr.thumb.png.ffa4ccf90ac294df22795f7a76bd80a2.png

 

2. Maybe its already asked but how do I change the name and logo at left top hand corner.

3. Change The Buttons and cast to circular shape
 

kLUvDc2vKt.thumb.png.8a36c5498ec645bb1355cb69dc9fd4dd.png

 

4. Can the Library Boxes be converted to be more sharp and bigger or placed a bit closer. Its fine if not possible. Just wanted to ask if it is possible.

c9kEjw19yY.png.29571b337284855c13387a354e07e032.png

5. Last If I want to edit the login screen do I have to edit manuallogin.html?

 

Thanks a lot.

Share this post


Link to post
Share on other sites
PenkethBoy

there are numerous threads on all the above if you read this sub forum

Share this post


Link to post
Share on other sites
niceguy79

I Know but the css was changed so many times that I am confused. Like in one of your threads you were able to change the color of the heart icon. I tried to learn using inspect.

The actual css required is 

.md-icon.cardOverlayButtonIcon.cardOverlayButtonIcon-hover.ratingbutton-icon-withrating {
    color: green !important;
}

But I was only able to see this part with inspect -

.md-icon.cardOverlayButtonIcon.cardOverlayButtonIcon-hover


How did you know that this part was also required? -

ratingbutton-icon-withrating

Sorry if my questions are noobish since I am trying to learn. Thanks a lot.

Share this post


Link to post
Share on other sites
niceguy79

Okay So I was able to change the logo on top right with this. Is it correct?

h3.pageTitle.pageTitleWithLogo.pageTitleWithDefaultLogo {
     background-image: url(url to image) !important;
}
 

Share this post


Link to post
Share on other sites
niceguy79

Okay so learned a few things after experimenting and was able to customize the web app. Still unable to do a few things like -

1. Making the Library Boxes a bit bigger and more sharp corners instead of rounded
2. I changed the cast to circular but the names are gone. Is it possible to keep the names as well?

3. Background in login screen

Share this post


Link to post
Share on other sites
niceguy79
Posted (edited)

For the first one I tried to change the color of the headerTop to the background color. It worked by using

.headerTop {
     background-color: #141414 !important
}

But it also changes the color of the header in the movie info page which was transparent before. Anyway to keep the color of the header except in the info page where it was transparent?

before
firefox_ttEm7U25tX.thumb.png.e67045c30950daa68453d04caa38b5de.png

CdyuDIqn0t.thumb.png.62c4dc3589100a48fa5a7818324bce7b.png

 

After -

x3HEU84VWu.thumb.png.d858cf50f5ae5bc90c8c874a627d8562.png

4WM0Ujg4mL.thumb.png.b2c8cf156f099c43df9ea31f3def8954.png

 

I wanted the after for home screen and before one for info page.

Edited by niceguy79
make it better to understand

Share this post


Link to post
Share on other sites
Happy2Play
Posted (edited)

 

On 7/4/2020 at 9:00 AM, niceguy79 said:

Okay so learned a few things after experimenting and was able to customize the web app. Still unable to do a few things like -

1. Making the Library Boxes a bit bigger and more sharp corners instead of rounded
2. I changed the cast to circular but the names are gone. Is it possible to keep the names as well?

3. Background in login screen

1) Where exactly?

2)Did you use the bottom code here and remove the bottom line removing the cardtext?

https://emby.media/community/index.php?/topic/71640-cast-and-images-of-the-circular-team/&do=findComment&comment=862896

 

3) discussed in several topic, requires the addition of page ids to the html.

https://emby.media/community/index.php?/topic/85523-login-screen-with-alternating-background

 

Edited by Happy2Play

Share this post


Link to post
Share on other sites
Happy2Play
On 7/4/2020 at 9:28 AM, niceguy79 said:

For the first one I tried to change the color of the headerTop to the background color. It worked by using

.headerTop {
     background-color: #141414 !important
}

But it also changes the color of the header in the movie info page which was transparent before. Anyway to keep the color of the header except in the info page where it was transparent?

before
firefox_ttEm7U25tX.thumb.png.e67045c30950daa68453d04caa38b5de.png

CdyuDIqn0t.thumb.png.62c4dc3589100a48fa5a7818324bce7b.png

 

After -

x3HEU84VWu.thumb.png.d858cf50f5ae5bc90c8c874a627d8562.png

4WM0Ujg4mL.thumb.png.b2c8cf156f099c43df9ea31f3def8954.png

 

I wanted the after for home screen and before one for info page.

This should do what you want.

div.headerTop-withSectionTabs {background-color: #141414;}

 

Share this post


Link to post
Share on other sites
niceguy79
Posted (edited)

@Happy2Play Wow thanks. That helped a lot. 🥰

Edited by niceguy79

Share this post


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