January 9, 20206 yr **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: Advanced View: --- 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 January 13, 20206 yr by Skitals Update for 2020.01.13 release
January 9, 20206 yr Great work @Skitals !! I've always wished for something like this in Unraid. Playing around with it now.. now to find a colour scheme
January 9, 20206 yr Author 3 hours ago, Squid said: Done button doesn't work 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.
January 9, 20206 yr 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
January 9, 20206 yr Author 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 January 9, 20206 yr by Skitals
January 9, 20206 yr 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.
January 10, 20206 yr Author 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.
January 10, 20206 yr 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? Edited January 10, 20206 yr by L0rdRaiden
January 11, 20206 yr Great plugin! I've made a Nord inspired theme with it. Imgur Album Theme Engine settings CSS File
January 11, 20206 yr Author 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.
January 11, 20206 yr 9 hours ago, Raz said: Great plugin! I've made a Nord inspired theme with it. Imgur Album Theme Engine settings CSS File I noticed there is an export button now. I applied your theme, and made this cfg. Nord-black.cfg Thank you for the theme, and thanks @Skitals for the theme engine.
January 12, 20206 yr Author 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.
January 12, 20206 yr 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!)
January 12, 20206 yr 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
January 13, 20206 yr Author 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.
January 13, 20206 yr 25 minutes ago, Skitals said: Would you mind if I included NordDark with the plugin? I'm not Raz, but that would be awesome
January 13, 20206 yr 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 January 13, 20206 yr by Raz
January 13, 20206 yr Author 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.
January 13, 20206 yr 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
January 13, 20206 yr Author 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.
January 13, 20206 yr 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
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.