convert home page 4.0.2.0 to 3.4.1.0

[z3ndra 7]

Hello everyone

here I am currently using version 3.4.1.0 emby and I want to upgrade to version 4.0.2.0, except what bothers me is the layout of the home page. I find thumbnails of "resume" and "latest media added" too small compared to version 3.4.1.0. therefore I would like to resemble the home page of version 4.0.2.0 to the home page of version 3.4.1.0. but I can not. if you would have a way. thank you

 

version 3.4.1.0

 

 

emby version 4.0.2.0

 

[Happy2Play 9441]

Not sure how the scaling differs but you can adjust it to your liking.

#homeTab div.overflowPortaitCard {width: 11.6vw; }

​This only affects Poster images.

[z3ndra 7]

thank you. I just tried and unfortunately nothing changes.

[Happy2Play 9441]

thank you. I just tried and unfortunately nothing changes.

 

Did you increase the width value?

 

Note custom css only applies to LAN and WAN/DDNS connections.  It will now work on the online web client.

Edited April 21, 2019 by Happy2Play

[z3ndra 7]

yes i increase the value, i have tried with 30vw , 50vw but nothing changes with #homeTab div.overflowPortaitCard {width: 11.6vw; }

 

yes i tried on the web client

Edited April 21, 2019 by z3ndra

[Happy2Play 9441]

Sorry there was a typo in portrait

#homeTab div.overflowPortraitCard {width: 13vw; }

[z3ndra 7]

ah well yes I had not seen the fault, I'll try

[z3ndra 7]

it still has no effect, it's strange

 

edit : its ok, but the size its higher than 13vw.

 

so do you know how make the same for the resume tab and trailers tab ?

 

how do you find this attributes for a specific page please ? in inspect element, i dont find that

Edited April 21, 2019 by z3ndra

[z3ndra 7]

it's ok, but I can not put the progress bar back in green.

[Happy2Play 9441]

it's ok, but I can not put the progress bar back in green.

 

And does it go back to green if you remove all your custom css?  What css code to you have that contains "progress"?

[z3ndra 7]

that's the problem, it's that it does me that without any css

[Happy2Play 9441]

that's the problem, it's that it does me that without any css

 

Have you tried a different browser?  Sounds like a browser cache issue to me if there is no css applied.

[z3ndra 7]

here is what it gives under chrome without css

the progress point has disappeared

 

and the picture above is under firefox

[z3ndra 7]

ok, it must come from the fact that I replace the theme dark by the theme light version 3.4.1.0

how to adapt it so that the bar reapplies?

[Happy2Play 9441]

Here is what I get on a Windows 10 machine with no css. (Dark theme)
 
Chrome 73, Firefox 67 and Edge

Edited April 21, 2019 by Happy2Play

[Happy2Play 9441]

ok, it must come from the fact that I replace the theme dark by the theme light version 3.4.1.0

 

how to adapt it so that the bar reapplies?

 

I don't see a difference in progress indicators when changing themes.  Are you just changing themes via user preferences-display, or are you actually editing the Themes files?

[z3ndra 7]

what I mean is that I copied the contents of the css file of the theme light of version 3.4.1.0 into the file theme dark (so that it defaults) in version 4.0.2.0. and I took a look and there is an element called moz-range-progress which is not in the css of the themes of version 3.4.1.0

 

i prefer the 3.4.1.0 version because the light theme version of the 4.0.2.0 version is different

Edited April 21, 2019 by z3ndra

[Happy2Play 9441]

what I mean is that I copied the contents of the css file of the theme light of version 3.4.1.0 into the file theme dark (so that it defaults) in version 4.0.2.0. and I took a look and there is an element called moz-range-progress which is not in the css of the themes of version 3.4.1.0

 

i prefer the 3.4.1.0 version because the light theme version of the 4.0.2.0 version is different

 

Okay I see what your talking about, would assume code changed between versions as it can only be reproduce coping the theme from old version into new version.  I will have to look threw the file and see if I see the changes.

[z3ndra 7]

thank u so much

[Happy2Play 9441]

thank u so much

 

This should work as this is part of what I use to change colors in those sections.

/* Google Now Playing Bar & Now Playing Page */
.emby-slider-background-lower, .emby-slider::-webkit-slider-thumb {
  background: #52B54B !important; }


/* Firefox Now Playing Bar & Now Playing Page */
.emby-slider::-moz-range-thumb, .emby-slider::-moz-range-progress {
  background: #52B54B !important; }

Edited April 21, 2019 by Happy2Play

[Happy2Play 9441]

how do you find this attributes for a specific page please ? in inspect element, i dont find that

 

Right click on the area and select inspect.  You may have to click through elements above or below the element you opened on.

 

Edited April 21, 2019 by Happy2Play

[z3ndra 7]

top it works, thank u. finally how would you change the resolution of images in every portraitscard ? because with enlargement, the image has become blurry

 

and how modify scroll buttons on the home page ? please

Edited April 21, 2019 by z3ndra

[Happy2Play 9441]

top it works, thank u. finally how would you change the resolution of images in every portraitscard ? because with enlargement, the image has become blurry

 

and how modify scroll buttons on the home page ? please

 

There isn't a way that I know of as the images are scripted for maxHeight, maxWidth, and Quality.

 

What do you want to modify?