Skip to content
View in the app

A better way to browse. Learn more.

Unraid

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

[Plugin] Theme Engine - a webGui styler

Featured Replies

7 hours ago, Skitals said:

What elements in particular are you having trouble styling? I might have a look into it.

 

What are your thoughts on including all your themes with the plugin? Or would you rather distribute them yourself via a zip url? 

The tables are a mess basically! 

 

It's good man! Include them with the plugin :)

  • Replies 247
  • Views 108.4k
  • Created
  • Last Reply

Top Posters In This Topic

Most Popular Posts

  • In the works  

  • Replacement now published No it doesn't Replacement Theme Engine is now within Apps. Uninstall the original from the plugins tab and reinstall the new one from Apps Note that this plugin will be 1

  • THANK YOU FOR THIS PLUGIN.   Allowed to make it look like something not from 20 years ago        

Posted Images

  • Author
10 hours ago, Raz said:

The tables are a mess basically! 

 

It's good man! Include them with the plugin :)

Thanks, Raz. Today's update includes all your themes. You took this plugin up to another level, and I hope it inspires more people to share their work!

Maybe I'm misunderstanding something, but if the theme engine is disabled, shouldn't the custom colors that were set by loading a theme also no longer be applied to one of the built-in dynamix themes?  I had to clear the settings in order to completely revert to a stock skin

I love the layout of the Azure Base Theme but it seems I can't use it with this plugin, can I? When ever I change a theme it reverts to Black, and if I change the base theme to Azure, everything goes grayish and looks disgusting...

 

Any tips?

2 minutes ago, ThaDaVos said:

I love the layout of the Azure Base Theme but it seems I can't use it with this plugin, can I? When ever I change a theme it reverts to Black, and if I change the base theme to Azure, everything goes grayish and looks disgusting...

 

Any tips?


Azure has a different layout and it changes css classes! You can edit the custom css file to make it works :)

Just now, Raz said:


Azure has a different layout and it changes css classes! You can edit the custom css file to make it works :)

Oh, that explains a lot... a bit stupid, normally with themes you use the same classes 😂
But, good to know, maybe I'll need to convert one of the themes I like to the Azure one (which is sometimes a bit buggy though)

I guess this is the case for all the default Dynamix Themes?

 

Ps: Thanks for the quick reply!

I noticed I can use the Gray one instead and have the same layout 😂

  • Author
2 hours ago, ThaDaVos said:

I love the layout of the Azure Base Theme but it seems I can't use it with this plugin, can I? When ever I change a theme it reverts to Black, and if I change the base theme to Azure, everything goes grayish and looks disgusting...

 

Any tips?

When you load a saved (or included) theme, it switches to the "base theme" that theme uses (black, white, gray, azure, etc). All the included themes use "black" as the base theme.

 

You can certainly use the plugin to design your own theme with azure as the "base theme." Since the layout is so different some of the options might not do exactly what you expect, but I know basic stuff like text color, link color, etc work fine. The rest would probably take a lot of "custom styling", like Raz has done with his black based themes.

Holy guacamole... this is AWESOME!  Thank you so much for your incredibly hard work, Skitals!  And you, too, Raz!

Is it better to use this (more actively developed?) rather than your first one Dark Theme plugin?

I believe this includes Dark Theme anyway so just wondering if I should bother switching or not?

 

If I do switch do I need to disable the Dark Theme and then remove the plugin.

Do I also need to include a restart after removing the plugin, before installing the Theme Engine?

 

Thanks again.

@Skitals

Edited by SavellM

Do you have this as open source? Wouldn't mind having a look and contributing. I want to be able to replace the icons.

  • Author
On 1/19/2020 at 4:22 PM, SavellM said:

Is it better to use this (more actively developed?) rather than your first one Dark Theme plugin?

I believe this includes Dark Theme anyway so just wondering if I should bother switching or not?

 

If I do switch do I need to disable the Dark Theme and then remove the plugin.

Do I also need to include a restart after removing the plugin, before installing the Theme Engine?

 

Thanks again.

@Skitals

 

Yes, this is more actively developed. You don't have to uninstall Dark Theme first, so feel free to try Theme Engine out. No need to restart.

 

On 1/21/2020 at 10:36 AM, dbinott said:

Do you have this as open source? Wouldn't mind having a look and contributing. I want to be able to replace the icons.

 

https://github.com/Skitals/unraid-theme-engine/

  • 3 weeks later...

So I got a warning message from my Fix Common problems plugin this morning telling me that the original plug-in (Dark Theme) should be removed.  So I did that..... and then all hell broke loose.  I couldn't see ANYTHING on the GUI of unRaid after removal.  Everything was white on white on white.

 

You might want to put a disclaimer in there to set up your factory default colors BEFORE removing the Dark Theme plugin. lol

 

Also, where are more theme colors for the new plug-in??  I've been on NORD forever now.

Thanks. How do I revert back to default unraid dark theme, though?

 

Edit: You need to uninstall the plug in.

Edited by Rendeaust

  • 2 weeks later...
  • 2 weeks later...

Thank you !
Great plugin !!!

 

  • 1 month later...

Hi all,

the device status icon of the unassigned devices (or the whole plugin icons) looks still blurry and has no flat design. Is it possible to fix this?

thanks a lot!

2020-04-21_17-02-19.png

Edited by Dexter84

I try to change the unRaid logo and look for several options.
I think i found an noob way to get an easy change with custom css.
And its safe for reboot.
Feel free to correct and optimize :)
 

#header .text-left {border-right: solid medium #001798}
#header .logo svg {visibility:hidden}
#header .logo {
    background-image: url(/boot/home/UN-logotype-gradient.svg);
    background-repeat: no-repeat;
    background-position: center;
}

Just to make it clear, i realy like the original, it just doesnt match my colour preferences.
Now it looks like this: K2pTzWS.png

  • 2 weeks later...

Are any of the themes mobile friendly?

  • 1 month later...

A plex flavoured version. 

 

If you find anything I've missed let me know. I can github this if you like but I'm more than happy for Skitals to host it.

Plex-azure.zip

So I just discovered this yesterday and love it, but is there a way to more control over the buttons? I would like to just change the border color, and then the highlight color to be granulated but a different color than whats there now.

 

Is there anywhere I can go to find all the css stuff that can be changed? Also in the Dashboard section, the headers have 2 different colors showing, and way to make all the headers change together, but not affect the even, odd line highlights?

  • 4 weeks later...
On 1/8/2020 at 4:57 PM, Skitals said:

**Beta**

 

Theme Engine
 A plugin for the unRAID webGui

So first off thanks for making this for us. Do you plan on expanding the theme engine?

 

I have been playing around creating a them and found this app limited in what I could make it do, so I started to play with settings and dug really deep into the files and came up with my current them. Check it out below. most of what I have done us all using a user script and a little bit of the theme engine, but I believe I can make almost all of it active from the script. You could maybe incorporate it into your app and make it really slick. 

 

There are more things I would like to clean up and then label the areas for easier editing,  Let me know what you think. (Even got the logo and wait logo edited without having to replace them image.)

 

And if anyone else want to take a look and let me know what you think.

 

(Should be compatible with updates, Unable to test for now)

 

 

  • 3 weeks later...

Only just testing Unraid this week having always used Synology devices. And have to say loving it so far so.

 

However this plugin is absolutely brilliant, i love me some CSS and along with nextcloud this will keep my mind going on what can be tweaked for days to come lol.

 

I do like the dark and unraid orange combo, but love to glitz it up for the hell of it, i mean servers shouldnt be drab and boring right lol.

 

Only just started tweaking and a lot are subtle tweaks that you would be hard pressed to find but makes the text more readable, other things are in your face. Added another key colour so now my unraid UI matches my Hackintosh water cooling setup lol.

 

Anyway if you do not like Gaudy schemes look away now.

 

 

 

 

 

 

Screenshot 2020-08-14 at 11.19.41.png

Screenshot 2020-08-14 at 11.19.58.png

 

 

 

Screenshot 2020-08-14 at 12.24.18.png

Screenshot 2020-08-14 at 22.38.13.png

Screenshot 2020-08-14 at 22.40.10.png

Screenshot 2020-08-14 at 22.43.56.png

Screenshot 2020-08-14 at 22.45.09.png

Edited by thering1975
more tweaks added

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.