Skitals Posted January 13, 2020 Author Share Posted January 13, 2020 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. Quote Link to comment
Skitals Posted January 13, 2020 Author Share Posted January 13, 2020 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. Quote Link to comment
Skitals Posted January 13, 2020 Author Share Posted January 13, 2020 (edited) 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 January 13, 2020 by Skitals 1 Quote Link to comment
Raz Posted January 13, 2020 Share Posted January 13, 2020 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 Quote Link to comment
Skitals Posted January 13, 2020 Author Share Posted January 13, 2020 (edited) 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 January 13, 2020 by Skitals Quote Link to comment
Skitals Posted January 13, 2020 Author Share Posted January 13, 2020 I updated the first post with basic instructions and new screenshots. Quote Link to comment
Raz Posted January 13, 2020 Share Posted January 13, 2020 (edited) 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 January 13, 2020 by Raz 1 Quote Link to comment
Skitals Posted January 13, 2020 Author Share Posted January 13, 2020 (edited) 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 January 13, 2020 by Skitals Quote Link to comment
Skitals Posted January 13, 2020 Author Share Posted January 13, 2020 (edited) 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 January 13, 2020 by Skitals Quote Link to comment
Raz Posted January 13, 2020 Share Posted January 13, 2020 (edited) 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 January 13, 2020 by Raz Quote Link to comment
Skitals Posted January 14, 2020 Author Share Posted January 14, 2020 (edited) 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 January 14, 2020 by Skitals Quote Link to comment
csrihari Posted January 14, 2020 Share Posted January 14, 2020 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. 1 Quote Link to comment
Skitals Posted January 14, 2020 Author Share Posted January 14, 2020 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. Quote Link to comment
lococola Posted January 14, 2020 Share Posted January 14, 2020 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! Quote Link to comment
Raz Posted January 14, 2020 Share Posted January 14, 2020 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! #nav-block #nav-item:focus:after, #nav-block #nav-item:hover:after { background-color: #f15a2c; } Here you go Quote Link to comment
lococola Posted January 14, 2020 Share Posted January 14, 2020 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! Quote Link to comment
eafx Posted January 15, 2020 Share Posted January 15, 2020 (edited) @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 January 15, 2020 by eafx Quote Link to comment
Skitals Posted January 15, 2020 Author Share Posted January 15, 2020 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. Quote Link to comment
eafx Posted January 15, 2020 Share Posted January 15, 2020 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. Quote Link to comment
eafx Posted January 15, 2020 Share Posted January 15, 2020 Seems like it's hitting some character limit, it won't let me save past certain number of lines/characters. Quote Link to comment
Skitals Posted January 15, 2020 Author Share Posted January 15, 2020 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. Quote Link to comment
Skitals Posted January 15, 2020 Author Share Posted January 15, 2020 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? Quote Link to comment
Skitals Posted January 15, 2020 Author Share Posted January 15, 2020 (edited) 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 January 15, 2020 by Skitals Quote Link to comment
eafx Posted January 16, 2020 Share Posted January 16, 2020 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? Quote Link to comment
Skitals Posted January 16, 2020 Author Share Posted January 16, 2020 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. Quote Link to comment
Recommended Posts
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.