Jump to content

About the music player screen - EmbyServer 4.4.2.0


CarlosLima
Go to solution Solved by CarlosLima,

Recommended Posts

PenkethBoy

Yes it is

 

1. One option is to edit the theme.css file for you prefered theme - although you have to do this for each update - just change the colours in the root section of the theme.css file - themes are in the system\dashboard-ui\modules\themes folder

2. try Ben z themes which are still available and add additional css from the various threads that exist on modifications - as some of Ben's css does not work anymore as things change in emby on a regular basis - and Ben is not supporting them anymore.

https://emby.media/community/index.php?/topic/28743-emby-dark-themes-in-different-accent-colors/

 

5eb7455b001b6_Annotation20200510010515.j

 

so it can look like this

 

3. as for the logo - change the logowhite.png in the themes directory - on Ben z github page he has a few images of the emby logo in diff colours

4. change the favicon.ico in the dashboard-ui folder - again Ben z has diff colour images you can use - save as an icon file though

 

both of the above need to be changed with each server update

Edited by PenkethBoy
  • Like 1
Link to comment
Share on other sites

arrbee99

Thanks very much. That should keep me quiet for a bit (if you're lucky...)

Link to comment
Share on other sites

arrbee99

Yes it is

 

1. One option is to edit the theme.css file for you prefered theme - although you have to do this for each update - just change the colours in the root section of the theme.css file - themes are in the system\dashboard-ui\modules\themes folder

2. try Ben z themes which are still available and add additional css from the various threads that exist on modifications - as some of Ben's css does not work anymore as things change in emby on a regular basis - and Ben is not supporting them anymore.

https://emby.media/community/index.php?/topic/28743-emby-dark-themes-in-different-accent-colors/

 

3. as for the logo - change the logowhite.png in the themes directory - on Ben z github page he has a few images of the emby logo in diff colours

4. change the favicon.ico in the dashboard-ui folder - again Ben z has diff colour images you can use - save as an icon file though

 

both of the above need to be changed with each server update

 

Have just tried option 1 so far, but can't see any difference. Probably doing something dumb (unusually).

 

Edit - Think I've modified it correctly, just changed the first three # colours given in the file, but no joy - yet.

Edited by arrbee99
Link to comment
Share on other sites

arrbee99

Logo via css, but changing the actual image will apply to the splash also.

 

Progress bar

Thanks. Do you know if for the logo its possible to point to a file on a local disk, not a url ?

 

Edit - I tried this to point it to the normal image

 

/*Change Logo*/

.pageTitleWithLogo { background-image: url("C:\Users\xxxxx\AppData\Roaming\Emby-Server\system\dashboard-ui\modules\themes\logodark.png") !important;

  height: 50px !important;

  width: 190px !important;

}

.pageTitleWithDefautLogo { height: 53px !important; }

 

but it just puts up nothing, a blank space.

Edited by arrbee99
Link to comment
Share on other sites

arrbee99

Also, managed to make these controls pale using a greyscale thing -

 

5eb75eeb72300_EmbyPalePlayerControls1.jp

 

am wondering if someone knows how to do the same with these please -

 

EDIT - Am going through a Firefox phase at the moment

 

5eb75f101e280_EmbyPalePlayerControls2.jp

Edited by arrbee99
Link to comment
Share on other sites

PenkethBoy

Thanks. Do you know if for the logo its possible to point to a file on a local disk, not a url ?

 

Edit - I tried this to point it to the normal image

 

/*Change Logo*/

.pageTitleWithLogo { background-image: url("C:\Users\xxxxx\AppData\Roaming\Emby-Server\system\dashboard-ui\modules\themes\logodark.png") !important;

  height: 50px !important;

  width: 190px !important;

}

.pageTitleWithDefautLogo { height: 53px !important; }

 

but it just puts up nothing, a blank space.

as its a web server with its root in dashboar-ui it cant access the file system like that

 

you could try a relative path - but iirc it wont work to a folder higher than the root of dashboard-ui - but not tested that in a while - so give that a go

 

other than that a simple script to do a file copy across to the dashboard-ui and/or themes folder would be best - you just run that after the server is updated

Link to comment
Share on other sites

PenkethBoy

Have just tried option 1 so far, but can't see any difference. Probably doing something dumb (unusually).

 

Edit - Think I've modified it correctly, just changed the first three # colours given in the file, but no joy - yet.

did you temporarily remove all you other css to see the theme changes on their own

 

and you did edit the theme or themes you are using via your user settings?

 

5eb7ef475bff3_Annotation20200510130908.j

 

i have changed the first four colour settings for the dark theme as i use dark/dark theme with my other css

Edited by PenkethBoy
Link to comment
Share on other sites

arrbee99

as its a web server with its root in dashboar-ui it cant access the file system like that

 

you could try a relative path - but iirc it wont work to a folder higher than the root of dashboard-ui - but not tested that in a while - so give that a go

 

other than that a simple script to do a file copy across to the dashboard-ui and/or themes folder would be best - you just run that after the server is updated

Thanks, think the easiest way, for me, is just to edit the original and hopefully it'll use that, while keeping a copy of the edited one to reuse if/when it gets overwritten.

Link to comment
Share on other sites

arrbee99

did you temporarily remove all you other css to see the theme changes on their own

 

and you did edit the theme or themes you are using via your user settings?

 

5eb7ef475bff3_Annotation20200510130908.j

 

i have changed the first four colour settings for the dark theme as i use dark/dark theme with my other css

 

Didn't remove the other css to try, am way to unorganised for that.

 

Not sure what you mean by editing via user settings...

 

But anyway, it started working by itself. I guess either all those page refreshes and cache clearings did something, or I accidentally got rid of some css that was interfering without realising it (or of course something else).

 

What editor do you use for that view - I just used Notepad++ and it loads as one long single line, although searching and replacing the css code for green with blue still seemed to work.

Link to comment
Share on other sites

PenkethBoy

Hi

 

user settings i ment the theme settings under user profile - i.e. you edited the theme file for the themes you have specified in your user settings.

 

That view is from Visual Studio Code (free) - but with the addition of the "beautify" extension - which takes things like css, js files etc and makes them more readable - i.e. not one line

 

Once the extension is loaded and a css etc file is loaded press F1 and pick "Beautify File" - magic happens :)

 

5eb88bc0101da_Annotation20200511001544.j

 

5eb88bcc8f19b_Annotation20200511001745.j

 

You get the view in post above

  • Like 1
Link to comment
Share on other sites

Happy2Play

Didn't remove the other css to try, am way to unorganised for that.

 

Not sure what you mean by editing via user settings...

 

But anyway, it started working by itself. I guess either all those page refreshes and cache clearings did something, or I accidentally got rid of some css that was interfering without realising it (or of course something else).

 

What editor do you use for that view - I just used Notepad++ and it loads as one long single line, although searching and replacing the css code for green with blue still seemed to work.

 

Here you go, you can add a plugin.

 

https://www.javamadesoeasy.com/2016/12/how-to-format-css-in-notepad.html

  • Like 1
Link to comment
Share on other sites

arrbee99

Hi

 

user settings i ment the theme settings under user profile - i.e. you edited the theme file for the themes you have specified in your user settings.

 

That view is from Visual Studio Code (free) - but with the addition of the "beautify" extension - which takes things like css, js files etc and makes them more readable - i.e. not one line

 

Once the extension is loaded and a css etc file is loaded press F1 and pick "Beautify File" - magic happens :)

 

5eb88bc0101da_Annotation20200511001544.j

 

5eb88bcc8f19b_Annotation20200511001745.j

 

You get the view in post above

Thanks, sounds like I edited the right thing.

 

And thanks for the info, though to be honest, the number of times I edit css, getting a copy of Studio, even for free, well...

Link to comment
Share on other sites

  • 3 months later...
CarlosLima

Hi,
Is it possible for a CSS / HTML code to include the disc cover in the location indicated by the arrow?
Thank you very much from now on.

download878.png

Link to comment
Share on other sites

arrbee99
11 hours ago, CarlosLima said:

Hi,
Is it possible for a CSS / HTML code to include the disc cover in the location indicated by the arrow?
Thank you very much from now on.

 

I can make it smaller, I can make it paler, but no idea how to move it.

Link to comment
Share on other sites

CarlosLima

Originally the disc is large and in the center. (post #3)
In my OSD I removed it, but now I think it would be better if I had it displayed, but not in the center and as big as the original.

Edited by CarlosLima
Link to comment
Share on other sites

arrbee99

Well, as I said, I can do the size thing. Hopefully @Happy2Play or someone will know about the moving bit.

I also removed mine completely, but was also thinking it would be nice if I could move the Goodbye Yellow Brick Road and the line below it to the far right (in you example) and have the album cover over to the far left and in line with Goodbye Yellow Brick Road and line below it.

  • Thanks 1
Link to comment
Share on other sites

CarlosLima
2 minutes ago, arrbee99 said:

Bem, como eu disse, posso fazer a coisa do tamanho. Esperançosamente@ Happy2Play ou alguém saberá sobre a parte móvel.

Eu também removi o meu completamente, mas também estava pensando que seria bom se eu pudesse mover a Goodbye Yellow Brick Road e a linha abaixo dela para a extrema direita (no seu exemplo) e ter a capa do álbum na extrema esquerda e alinhada com Goodbye Yellow Brick Road e linha abaixo dela.

+1

Link to comment
Share on other sites

Happy2Play
23 hours ago, CarlosLima said:

Hi,
Is it possible for a CSS / HTML code to include the disc cover in the location indicated by the arrow?
Thank you very much from now on.

download878.png

You mean something like this

div.osdPoster-img {    
	background-position: left 10px bottom;
	background-size: 150px;}

 

Edited by Happy2Play
  • Thanks 1
Link to comment
Share on other sites

CarlosLima

Thank you very much for your commitment.
The result was as expected, changing a few in the position and size of the poster.

download.png

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