Jump to content
Skitals

[Plugin] Theme Engine - a webGui styler

70 posts in this topic Last Reply

Recommended Posts

11 minutes ago, Raz said:

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

Oh, I think I misunderstood. It is how I think you describe. I moved the base00-base0f variables into the gui so they can be edited with the color picker. A theme consists of the base config + custom theme css (zipped together in one file for sharing/importing). The original "custom.css" still exists and is independent of the theme.

Share this post


Link to post
52 minutes ago, Raz said:

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

Here is a sample of what I mean. Of course you could use the php variables directly instead of declaring them in root, but either works.

preview2.jpg

Share this post


Link to post

The update just rolled out. It might not look like much, but it was 4 days of work, 17 files changed, 829 insertions(+), 127 deletions(-).

 

Hopefully there aren't TOO many bugs I didn't catch...

 

Quote

 

2020.01.13

  • Includes NordDark by Raz.
  • Import theme from zip file (usb or url).
  • Toggle advanced mode.
  • Advanced: Additional color settings.
  • Advanced: Custom theme styling.
  • Advanced: Custom color variables for theme styling.
  • Advanced: Download theme as zip file.

 

Edited by Skitals

Share this post


Link to post
1 minute ago, Skitals said:

The update just rolled out. It might not look like much, but it was 4 days of work, 17 files changed, 829 insertions(+), 127 deletions(-).

 

Hopefully there aren't TOO many bugs I didn't catch...

 

Nice! Going to test it now :)

Share this post


Link to post
18 minutes ago, Raz said:

Nice! Going to test it now :)

If you could, uninstall the plugin and reinstall fresh to make sure your theme (that is included) looks right.

 

Of course when you uninstall it deletes everything in the /boot/config/plugins/theme.engine folder, so make sure any of your work is backed up.

Edited by Skitals

Share this post


Link to post
2 hours ago, Skitals said:

If you could, uninstall the plugin and reinstall fresh to make sure your theme (that is included) looks right.

 

Of course when you uninstall it deletes everything in the /boot/config/plugins/theme.engine folder, so make sure any of your work is backed up.

No worries! Everything works as intended anyway :)

I've made some themes, i am going to list them here

You can unzip the themes.zip file and place everything inside the themes folder or download and upload the single theme files;


EDIT: the styling can't be perfect. Some UI elements (tables) have common classes so i couldn't style everything as i would've liked to!
 

 

themes.zip ashes.zip brushthrees.zip dracula.zip grayscale.zip monokai.zip nova.zip rebecca.zip solarizedDark.zip

Edited by Raz

Share this post


Link to post
9 minutes ago, Raz said:

No worries! Everything works as intended anyway :)

I've made some themes, i am going to list them here

You can unzip the themes.zip file and place everything inside the themes folder or download and upload the single theme files;
 

 

themes.zip 15.68 kB · 0 downloads ashes.zip 1.76 kB · 0 downloads brushthrees.zip 1.81 kB · 0 downloads dracula.zip 1.74 kB · 0 downloads grayscale.zip 1.76 kB · 0 downloads monokai.zip 1.76 kB · 0 downloads nova.zip 1.74 kB · 0 downloads rebecca.zip 1.75 kB · 0 downloads solarizedDark.zip 1.78 kB · 0 downloads

Note that if the zip file is in the format as exported from the plugin, they can be loaded directly from usb without extracting by putting them in the themes folder. That is themename-basename.zip containing themename-basename.cfg and (optionally) themename-basename.css.

Edited by Skitals

Share this post


Link to post
21 minutes ago, Raz said:

No worries! Everything works as intended anyway :)

I've made some themes, i am going to list them here

You can unzip the themes.zip file and place everything inside the themes folder or download and upload the single theme files;


EDIT: the styling can't be perfect. Some UI elements (tables) have common classes so i couldn't style everything as i would've liked to!
 

 

I uploaded themes.zip to github, and you can load the whole themepack by pasting this url and hitting import:

 

 

https://github.com/Skitals/theme-engine-styles/raw/master/ThemePackbyRaz.zip

 

Note that the current behavior is that if a theme file already exists it wont get overwritten when importing a zip. So if you wanted to update a theme from a zip, you would need to delete it from Saved Themes first. How do you think that should be handled? Checkbox option to overwrite if file exists?

Edited by Skitals

Share this post


Link to post
20 minutes ago, Skitals said:

 

I uploaded themes.zip to github, and you can load the whole themepack by pasting this url and hitting import:

 

 


https://github.com/Skitals/theme-engine-styles/raw/master/ThemePackbyRaz.zip

 

Note that the current behavior is that if a theme file already exists it wont get overwritten when importing a zip. So if you wanted to update a theme from a zip, you would need to delete it from Saved Themes first. How do you think that should be handled? Checkbox option to overwrite if file exists?

Thanks, i was lazy and just uploaded by zipping each cfg and css file together!

The checkbox option could be the way to go, or simply overwrite the theme if exist by default? If it's a theme update, is for an improvement i suppose 😆
Either way, people can always rename the theme and export it using the GUI before importing the new one, am i wrong?

PS: i am still searching for a way to properly style everything. I think i am going to rewrite the whole views some point in the future 😂! Do you think it is possible to do given the way the frontend is built? I have to dig it but i am kinda full of work these days. 

With something like tailwindcss restyling everything and importing new themes would be a breeze

Edited by Raz

Share this post


Link to post

I just pushed out an update that adds an option (checkbox) to overwrite existing files when importing a zip.  My concern was that if a user customizes a theme, their work might get inadvertently overwritten if a theme pack or the like unknowingly contains a theme with the same file name. 

 

The code for importing from a url had little logic and would have unzipped literally any zip file into your themes directory. Now it will only extract .cfg and .css files from an archive.

 

I'm new to all this programming stuff and I've quickly learned getting something to do what you want is only 10% of the work. The other 90% is plugging holes so a user doesn't break something doing something you didn't anticipate ;)

Edited by Skitals

Share this post


Link to post

Thank your @Skitals for this awesome plugin. Also thank you @Raz for your themes. SolarizedDark looks beautiful and will be the theme of my server for a long time.

Share this post


Link to post

Along the lines of what I said above, zip handling will now only extract files in the format *-*.cfg and *-*.css. Just pushed out another minor update.

Share this post


Link to post

Very cool plugin! Been playing around with it. One question. When you hover a menu item there appears this little colored underline. How can you change the color of this underline? I tried to find out the object using Chrome Inspector, but I haven't been succesfull. Very strange!

 

unraid-menu-underline.png.fa99a36ebc4ea24b85f65547afcaf33b.png

Share this post


Link to post
24 minutes ago, lococola said:

Very cool plugin! Been playing around with it. One question. When you hover a menu item there appears this little colored underline. How can you change the color of this underline? I tried to find out the object using Chrome Inspector, but I haven't been succesfull. Very strange!

 

unraid-menu-underline.png.fa99a36ebc4ea24b85f65547afcaf33b.png

#nav-block #nav-item:focus:after, #nav-block #nav-item:hover:after {

background-color: #f15a2c;

}

Here you go :)

Share this post


Link to post
58 minutes ago, Raz said:

#nav-block #nav-item:focus:after, #nav-block #nav-item:hover:after {

background-color: #f15a2c;

}

Here you go :)

Perfect, thanks! :)

Share this post


Link to post

@Skitals I'm trying to use my own custom variables for my theme in 'custom styling (advanced)' , so whenever I try to save my css with the :root { } block it won't save it, to get it to work I have to either get rid of root block or manually edit the theme's css file and then it will show up fine on the plugin but it won't allow me to edit & save it from the plugin.

 

Any idea what's going on here?

Edited by eafx

Share this post


Link to post
4 minutes ago, eafx said:

@Skitals I'm trying to use my own custom variables for my theme in 'custom styling (advanced)' , so whenever I try to save my css with the :root { } block it won't save it, to get it to work I have to manually edit the theme's css file and then it will show up fine on the plugin but it won't allow me to edit & save it from the plugin or use css without custom variables (root block).

 

Any idea what's going on here?

Can you save any changes, or only when trying to use custom variables? If you add just a few letters and hit apply, does it save? It's possible what you are inputting has special characters that are getting misinterpreted when the textarea is passed to the script.

Share this post


Link to post
1 minute ago, Skitals said:

Can you save any changes, or only when trying to use custom variables? If you add just a few letters and hit apply, does it save? It's possible what you are inputting has special characters that are getting misinterpreted when the textarea is passed to the script.

Happens only when using my own custom variables, no issues saving random text or css otherwise.

Share this post


Link to post

Seems like it's hitting some character limit, it won't let me save past certain number of lines/characters.

Share this post


Link to post
21 minutes ago, eafx said:

Seems like it's hitting some character limit, it won't let me save past certain number of lines/characters.

Ah, yes. I believe there is a 2048 character limit with the method I'm using to move data around. It will work fine editing the css file manually as you are doing. I will look into a workaround.

Share this post


Link to post
On 1/13/2020 at 6:03 PM, Raz said:

Thanks, i was lazy and just uploaded by zipping each cfg and css file together!

The checkbox option could be the way to go, or simply overwrite the theme if exist by default? If it's a theme update, is for an improvement i suppose 😆
Either way, people can always rename the theme and export it using the GUI before importing the new one, am i wrong?

PS: i am still searching for a way to properly style everything. I think i am going to rewrite the whole views some point in the future 😂! Do you think it is possible to do given the way the frontend is built? I have to dig it but i am kinda full of work these days. 

With something like tailwindcss restyling everything and importing new themes would be a breeze

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? 

Share this post


Link to post
21 hours ago, eafx said:

Seems like it's hitting some character limit, it won't let me save past certain number of lines/characters.

It's definitely hitting the character limit for the GET request. I am changing it to a POST request.

 

Edit: Update should be live!

Edited by Skitals

Share this post


Link to post
28 minutes ago, Skitals said:

It's definitely hitting the character limit for the GET request. I am changing it to a POST request.

 

Edit: Update should be live!

Works as expected now :) thanks!

 

If I want to include my theme with the plugin, does my theme need to use the plugin variables or can I have it set entirely within custom styling?

Share this post


Link to post
20 minutes ago, eafx said:

Works as expected now :) thanks!

 

If I want to include my theme with the plugin, does my theme need to use the plugin variables or can I have it set entirely within custom styling?

You can use entirely custom styling. The nice thing about using the included custom variables is users can more easily tweak the colors, though.

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.