[Plugin] Theme Engine - a webGui styler


Recommended Posts

**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 3
  • Thanks 1
Link to comment
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

Link to comment

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

Link to comment

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.

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

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

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

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

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

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

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.