[Plugin] Theme Engine - a webGui styler


Skitals

Recommended Posts

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 :)

  • Like 1
Link to comment

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

Link to comment
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 :)

Link to comment
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!

Link to comment
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.

Link to comment

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
Link to comment
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/

Link to comment
  • 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.

  • Haha 1
Link to comment
  • 2 weeks later...
  • 2 weeks later...
  • 1 month later...

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

Link to comment
  • 2 weeks later...
  • 1 month later...

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?

Link to comment
  • 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)

 

 

Link to comment
  • 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
Link to comment

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

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.