Change some css in web app.

[niceguy79 1]

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

 

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
 

 

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.



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

 

Thanks a lot.

[PenkethBoy 2066]

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

[niceguy79 1]

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.

[niceguy79 1]

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

[niceguy79 1]

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

[niceguy79 1]

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

 

After -

 

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

Edited July 4, 2020 by niceguy79
make it better to understand

[Happy2Play 9441]

 

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 July 7, 2020 by Happy2Play

[Happy2Play 9441]

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

 

After -

 

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

 

[niceguy79 1]

@Happy2Play Wow thanks. That helped a lot.

Edited July 10, 2020 by niceguy79