Jump to content
Skitals

[Plugin] Theme Engine - a webGui styler

62 posts in this topic Last Reply

Recommended Posts

Posted (edited)

**Beta**

 

Theme Engine
 A plugin for the unRAID webGui

 

Theme Engine lets you re-style the unRAID webGui. Instead of creating a whole new theme, it adjusts settings that override the theme you are already using. You can adjust as few or as many settings as you like. Mixing and matching the base themes with Theme Engine settings creates endless possibilities. Import one of the included styles, or remix and export your own.

---
How to install

Search for Theme Engine on Community Applications.
-OR- the URL to install manually:

https://github.com/Skitals/unraid-theme-engine/raw/master/plugins/theme.engine.plg

---

How to use

 

To load an included theme, select it under Saved Themes and hit Load.

 

To import a theme (zip file) from the community, paste the url under Import Zip and hit Import. The theme is now available to Load under Saved Themes.

 

To import a theme (zip file) from usb, place the zip file in the folder /boot/config/plugins/theme.engine/themes/ select it under Import Zip and hit Import. The theme is now available to Load under Saved Themes.

 

Note that when you Apply changes to a theme, it applies to your current configuration but does not overwrite the Saved Theme. If you want to update the saved theme, check the checkmark next to "Export to Saved Themes" before hitting Apply. To save it as a new theme, change the Theme Name, check the checkmark, and hit Apply.

 

To export your theme as a zip file, hit Apply to save any changes, toggle on Advanced View, and click "Download current confirguration as Zip File" at the bottom of the page.

 

---

Screenshots

 

Basic View:

basic_view.thumb.jpg.5207a6ea400e9aa5abe929f69ddf32e2.jpg

 

Advanced View:

advanced_view.thumb.jpg.a2bace616f2665025b300c6ecd80d915.jpg

 

---
Advanced / Hidden Options
You can inject custom css by creating the following files and enabling custom.css under advanced view. The files, if they exist, are included on every page just above `</style>` in the html head. The custom.css files are independent of the theme engine theme you are using. If custom.css is enabled, it will be included even if theme engine is disabled.

/boot/config/plugins/theme.engine/custom.css
  • Will be included in all themes.
/boot/config/plugins/theme.engine/custom-white.css
/boot/config/plugins/theme.engine/custom-black.css
/boot/config/plugins/theme.engine/custom-gray.css
/boot/config/plugins/theme.engine/custom-azure.css
  • Will only be included when using the corresponding base theme.

 

 

Edited by Skitals
Update for 2020.01.13 release
  • Like 2
  • Thanks 1

Share this post


Link to post

Great work @Skitals !!

 

I've always wished for something like this in Unraid. Playing around with it now.. now to find a colour scheme :) 

Share this post


Link to post

Done button doesn't work

image.png.bd93842a35e31f19100ef7e6c7b3f0fa.png

Share this post


Link to post
3 hours ago, Squid said:

Done button doesn't work

image.png.bd93842a35e31f19100ef7e6c7b3f0fa.png

Thanks, just pushed out a fix. Not exactly sure why it's not calling the function on DefaultPageLayout anymore, I included the function (with a different name) in the plugin.

Share this post


Link to post
26 minutes ago, Skitals said:

Thanks, just pushed out a fix. Not exactly sure why it's not calling the function on DefaultPageLayout anymore, I included the function (with a different name) in the plugin.

Lol   I know  I looked at it quickly, saw that the function did exist and just threw it into your hands

Share this post


Link to post
Posted (edited)

Just discovered a bit of an easter egg in my own plugin. custom.css gets parsed as php, and you can easily call values saved in Theme Engine. Take a look at the file /boot/config/plugins/theme.engine/theme.engine.cfg to see the name of the variables for the values you have saved. For example:

 

[ThemeEngine]
enabled="1"
headertext="#9b9b9b"

If you want to use the headertext value to theme another element, an example custom.css would be:

 

.switch-button-background {
    background-color: <?php echo $ThemeEngine['headertext']; ?> !important;
}

This works because custom.css is included at the end /usr/local/emhttp/plugins/theme.engine/include.php where theme.engine.cfg is parsed.

Edited by Skitals

Share this post


Link to post
31 minutes ago, Skitals said:

custom.css gets parsed as php

OT.  Yeah, I could personally never understand the reluctance of people to use php files with an appropriate header instead of pure css.  Allows CA for instance to use a single file that effectively only has minor changes for each of the 4 built-in themes.

Share this post


Link to post

I added an option to enable/disable custom.css. If you leave Theme Engine "off" but custom.css "on", you can still use the colors/variables saved in the ui.

 

I will probably hide this and custom variables behind an "advanced view" toggle once I figure out how to do that to match the rest of the unraid ui.

Share this post


Link to post
10 hours ago, Skitals said:

I added an option to enable/disable custom.css. If you leave Theme Engine "off" but custom.css "on", you can still use the colors/variables saved in the ui.

 

I will probably hide this and custom variables behind an "advanced view" toggle once I figure out how to do that to match the rest of the unraid ui.

Can you add an option to change the background color and the boxes background color?

 

imagen.png.63b7caa99ef94d58becf4d447ac50510.png

Edited by L0rdRaiden

Share this post


Link to post
4 hours ago, Raz said:

Great plugin!
I've made a Nord inspired theme with it.

 

Imgur Album
Theme Engine settings
CSS File

Looks awesome, I will check it out when I get home. I think my plan is to add an "advanced mode" and allow you to save save custom css in your theme cfg. That way you can export and share a theme like this with one file.

Share this post


Link to post

The update I'm working on lets you download your theme as a zip with the cfg + custom styling. I have that part working, need to add importing from a zip file. I also have custom styling and additional color options hidden behind an advanced mode toggle.

Share this post


Link to post
6 hours ago, Skitals said:

Looks awesome, I will check it out when I get home. I think my plan is to add an "advanced mode" and allow you to save save custom css in your theme cfg. That way you can export and share a theme like this with one file.

Thanks man! I love your plugin anyway. I am going to build A LOT of themes based on famous base16 color palettes and the feature you're planning to add is perfect.

Right now the only problem is that i have to have multiple css files and edit the name if i want to activate a theme with the corresponding css file. With that feature it would be soooo simple to ad a tons of themes (i can help with that!)

Share this post


Link to post

This plugin looks really cool. Raz's post on Reddit brought me here.

 

Next we'll 'need' a 'store' from where to preview and get the themes :)

 

Share this post


Link to post
On 1/11/2020 at 7:45 PM, Raz said:

Thanks man! I love your plugin anyway. I am going to build A LOT of themes based on famous base16 color palettes and the feature you're planning to add is perfect.

Right now the only problem is that i have to have multiple css files and edit the name if i want to activate a theme with the corresponding css file. With that feature it would be soooo simple to ad a tons of themes (i can help with that!)

 

I'm almost ready to release the update. I unfortunately couldn't get uploading to work so to install a theme a user still need to manually put the files in place. There is now theme-specific styling. It is editable in the gui hidden behind an advanced mode toggle. The theme-specific styling gets saved as a css file, so an advanced theme is composed of two parts. For example NordDark-black.cfg and NordDark-black.css. There is a link in advanced view to download both files in a zip.

 

Would you mind if I included NordDark with the plugin?

 

Attached is a preview toggled to advanced mode.

 

advanced_mode.jpg

Share this post


Link to post
25 minutes ago, Skitals said:

 

Would you mind if I included NordDark with the plugin?

 

I'm not Raz, but that would be awesome ;)

Share this post


Link to post
6 hours ago, Skitals said:

Would you mind if I included NordDark with the plugin?

sure man! I am making some edits to the css file and i have some ideas to make the base theme easier to edit.

Using css variables and a form to edit those variables in the custom.css file, we could edit the theme using only one css file.

This is the refactored custom css file with the latest edits:
EDIT: https://pastebin.com/YnZnRXrY updated css file

I am going to point out that i am using the base16 design architecture. We could pull the themes color from this list https://github.com/chriskempson/base16 and give the users the possibility to select the preferred one.

Another feature could be the option to edit the css variables in a form like you did for the base16 colors:

:root {
  --base00: #2e3440;
  --base01: #3b4252;
  --base02: #434c5e;
  --base03: #4c566a;
  --base04: #d8dee9;
  --base05: #e5e9f0;
  --base06: #eceff4;
  --base07: #8fbcbb;
  --base08: #88c0d0;
  --base09: #81a1c1;
  --base0a: #5e81ac;
  --base0b: #bf616a;
  --base0c: #d08770;
  --base0d: #ebcb8b;
  --base0e: #a3be8c;
  --base0f: #b48ead;
}


Let me know if i can help you with anything 👌🏽

 

Edited by Raz

Share this post


Link to post
3 hours ago, Raz said:


Let me know if i can help you with anything 👌🏽
 

I like the idea, but there are still a lot of use cases that will require 2 files (custom styling beyond colors). Good news is I got importing a zip file from usb *or* url working. You will be able to throw up the zips in a github repository or somewhere and share the raw links.

Share this post


Link to post
7 minutes ago, Skitals said:

I like the idea, but there are still a lot of use cases that will require 2 files (custom styling beyond colors). Good news is I got importing a zip file from usb *or* url working. You will be able to throw up the zips in a github repository or somewhere and share the raw links.

Ok, what about something like this:

-one base css file provided by the plugin with some edits

-one base css file with css variables for the colors

-one custom empty css for user custom css

?

 

Url upload is pretty neat, so people can share custom themes easily :)

Share this post


Link to post
46 minutes ago, Raz said:

Ok, what about something like this:

-one base css file provided by the plugin with some edits

-one base css file with css variables for the colors

-one custom empty css for user custom css

?

 

Url upload is pretty neat, so people can share custom themes easily :)

My thought was instead of having the first 2 being separate files I would simply add "custom" color pickers to the advanced ui, that don't do anything but are available as variables in the custom styling section.

Share this post


Link to post
3 minutes ago, Skitals said:

My thought was instead of having the first 2 being separate files I would simply add "custom" color pickers to the advanced ui, that don't do anything but are available as variables in the custom styling section.

Ok, but without a base css file every background will be the color of the base unraid theme

Share this post


Link to post

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.