Jump to content

Change some css in web app.


niceguy79

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.

Link to comment
Share on other sites

PenkethBoy

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

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

Link to comment
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;
}
 

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

Link to comment
Share on other sites

niceguy79

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

Happy2Play

 

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
Link to comment
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;}

 

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