Add theme to emby

[cjlong45 17]

Hi my freind has a jellyfin server and I love the purple haze theme that jellyfin has and I would like to find a way of putting it on my emby server can any one help me please I have copied the purple haze folder that has a file called bg.jpg and theme.css into the emby themes folder 

[Luke 37062]

Hi, you'd have to do this via custom css.

[cjlong45 17]

Hi Thanks for the reply,  how do i do that , also iv noticed whilst searching the Web that there a skin manger for jellfin via add plug in through repository is there a way to do this for emby?

[cjlong45 17]

I know where custom css is on the server but what would I type in to get the theme to work/add

[cjlong45 17]

this is what is current in the purple haze folder 

theme.css

[Happy2Play 8281]

Emby does not allow you to just drop a new theme into the themes folder and it just be recognized.  As that theme would be deleted with every update as the entire system folder gets replaced.

Sure you could hack another theme profile with the updated code or place this code in custom css box.  But I highly doubt themes between these to programs will be completely compatible.

Hacked Light puple with above code.

Edited December 8, 2021 by Happy2Play

[cjlong45 17]

Hi Is there a code to that hacked purple light as you said place this code in the custom css

[Happy2Play 8281]

27 minutes ago, cjlong45 said:

Hi Is there a code to that hacked purple light as you said place this code in the custom css

All I did is place the theme.css and image posted above in an existing theme.  I actually renamed the existing theme.css in that folder.

So you are hacking the existing theme.  But am pretty sure this will only affect the web client just like custom css does.  Other clients technically have their own theme build around the web client themes as they require their own language of code.

So it is impossible to create a theme for every client with one specific code language.

Edited December 9, 2021 by Happy2Play

[cjlong45 17]

Ah I see , that's such a shame its a shame emby isn't more customisable, thank you 

[visproduction 122]

I find Emby very customizable, but you need to really know how to tweak CSS and understand the process of updating styles in a server that is running.  CJ, are you thinking that customizing would be going to a theme builiding page, with buttons and color controls to add background and you click and drag to change everything?  Sure, that is a customizing interface, but you would always be limited to whatever features are added to that page.  Making a page like that is a lot of work and it would have to be regularly updated with every release.  Just that page could maybe cost 10% of your workload.

Emby allows custom css with very few feature limits, but there are complex rules and issues that you need to have a good understanding of,  to add the css code updates correctly.  This forum group has a lot of examples.  I would argue that this custom css code option makes Emby very customizable, but the learning curve is a little steep. That also makes it rather fun to work on.  I have probably over a 100 csutomized style changes in my server.

Here is the code to add to the custom .css inside Settings page. 

But here is a warning:  This solution does not adjust the original background color.  So it's incomplete.  In order to cover the background color better, I adjusted the width, height and margins.   You could adust the blend gradients instead. Also any changes you try, may  need to have the cache cleared to see the change.  

It's sort of like the purple and blue curtains in my old home town movie theater.  I think I might keep this.  I added in some width, height, repeat and rotate styling so you can play with those.  I think it looks good without the extra transparency blending.

Some of the changes need to have the cache deleted to show up.  Each browser has a different way to do this.  

Have fun.
 

.backgroundContainer {
    background: linear-gradient(to right, #000420 0%, #06256f 18%, #2b052b 38%, #2b052b 45%, #06256f 78%, #000420 100%) !important;
    -webkit-backdrop-filter: none !important;
    background-blend-mode: color !important;
    width: 132% !important;
    height: 178% !important;
    margin: -205px;
    background-repeat-y: repeat !important;
    transform: rotate(63deg) !important;
}

Another slight variation:
 

.backgroundContainer {
    background: linear-gradient(to right, #000420 0%, #06256f 18%, #2b052b 27%, #2b052b 28%, #06256f 62%, #000420 100%) !important;
    -webkit-backdrop-filter: none !important;
    background-blend-mode: color !important;
    width: 186% !important;
    height: 220% !important;
    margin: -164px;
    background-repeat-y: repeat !important;
    transform: rotate(63deg) !important;
}

 

 

I just noticed that this background also affects the admin dashboard, so you can no longer read the text on some pages.  Hmmm,  here are some color style adjustments to allow the text to be readable. 

This is the problem with tweaking CSS with custom styles.  You start to break the theme that has been balanced to work on all pages.  This text color update only fixes a few pages in the admin area.  Several other pages also need fixing.  It's annoying. Ha!   

This is the very reason why most all App UI  locks out users from easily making changes in theme colors.  You quickly get into a cascade of errors.  It's a real profession as a graphic artist specializing in web design to get a site's colors and themes to look good.  Everyone thinks it should be easy, but it is not.  This color style custom changes only fixes 2 or 3 admin pages.  There are still more to do.  Be careful if you start to customize with this background, it's just not that simple. I don't think my color choices are that great in the admin area, but I am the only person that sees this area.

/* Dashboard right column */
.fieldDescription, .verticalSection.verticalSection-extrabottompadding > h2, .listItemBodyText-secondary, #windowsStartupDescription {
    color: #FFFFF0 !important;
}

#windowsStartupDescription, #fldEnableAutomaticRestart > label > span, .verticalSection.autoUpdatesContainer > h2 {
	color: #efeeb9;
    margin-bottom: 12px;
}

 

 

Edited December 29, 2021 by visproduction