A simple custom visual style for the Dynamix Web GUI

[Drakknar]

Hi everyone,

New user here; I have recently installed unRAID on my new system to test if it fits my needs; I'm still running the preclear script (x3) to check if my disks are OK, and in the meanwhile I decided to slightly customize the WebGUI (v2016.10.04) to better fit my taste. Sharing is caring so I thought to share with you the result

 

I can't promise that this css will ever be updated (during my test phase I'll probably try to fix the biggest issues, though) or that it won't have any bugs or unthemed areas - for example, I can't mount my array and create shares, yet, so I have no idea on how the relative sections will look

 

1. What this theme is:

- A CSS done in just a few days, so consider this to be alpha / beta quality at best;

- CSS Only on top of the Default White skin, no other modifications performed;

- Despite being sort of responsive, the padding, the margins and the overall look'n'feel are optimised only for high resolution monitors;

- It uses the Montserrat font family from Google Fonts, so your machine will have to be connected to the internet for the theme to work correctly

 

2. Some images:

 

 

 

 

 

3. The customised CSS:

http://pastebin.com/YBA8mmPn

 

4. How to test it on your system:

I'm a total Linux noob, so feel free to correct me if I've done anything wrong. I took a few ideas on how to proceed from this post and from some basic Linux tutorials.

• Save the css as default-white.css;
  
• Use telnet to backup the original default-white css: mv -i /usr/local/emhttp/plugins/dynamix/styles/default-white.css /usr/local/emhttp/plugins/dynamix/styles/default-white.bak
  
• Copy the new file to /usr/local/emhttp/plugins/dynamix/styles/
  
• If open, reload the Web GUI
  

 

5. I have more disks and they are not being shown in the Dashboard!

Look for the "table.share_status td:nth-child(10) ~ td{display:none;}" line and increase the (10) with as many extra columns you'd like to see

 

6. I hate it / It totally broke my Web GUI!:

As far as I could understand from the aforementioned thread, anything written to the usr/local folder won't survive a reboot; in any case you can simply delete my style and restore the original backed up css using the terminal.

 

7. Version History:

- 1.0: Initial version

- 1.1: New compact menu with hover tooltip; more themed areas; overall tidying up and bug fixes. Chrome users: if you have troubles with the menu, just find the string: "#nav-block #nav-item{width:65px;float:left;text-align:left;padding:15px 20px;box-sizing:padding-box;}" and replace it with "#nav-block #nav-item{width:65px;float:left;text-align:left;padding:15px 20px;box-sizing:border-box;}"; it was just a typo on my end

 

I hope you'll like it

[Squid]

Sweet looking

 

Sent from my LG-D852 using Tapatalk

 

 

[Drakknar]

Thanks man

[Squid]

Although of course CA would need a whack of work to get it to look right in it since it assumes its got the full width of the display to work with...

[CyberSkulls]

I have to say upfront that I do like the Black Dynamix GUI but I wish it were updated for modern monitors that we all use today on our regular desktops while viewing the GUI. Seems like a lot of wasted space. Reminds me of watching a old full frame tv episode on a modern 1080P flat panel with the hideous black bars!

 

Now with that out of the way, this style looks great. I'm gonna have to try it out on one of my servers. Now we just need a black version...

 

 

Sent from my iPhone using Tapatalk

[Drakknar]

Although of course CA would need a whack of work to get it to look right in it since it assumes its got the full width of the display to work with...

 

tbh CA runs mostly fine. Some elements are not perfectly aligned; the Icon Details view could be tweaked, but the Table and the regular Icon views are quite OK. It all depends on your resolution I suppose Maybe I'll look into overwriting some of the default styles in the future to make it fit perfectly.

 

I have to say upfront that I do like the Black Dynamix GUI but I wish it were updated for modern monitors that we all use today on our regular desktops while viewing the GUI. Seems like a lot of wasted space. Reminds me of watching a old full frame tv episode on a modern 1080P flat panel with the hideous black bars!

 

Now with that out of the way, this style looks great. I'm gonna have to try it out on one of my servers. Now we just need a black version...

 

Thanks man. The preclear on my disks is almost done, so hopefully over the course of the next few days I'll be able to do a more comprehensive testing. Should you find any issue while testing the css, let me know

[Squid]

Although of course CA would need a whack of work to get it to look right in it since it assumes its got the full width of the display to work with...

 

tbh CA runs mostly fine. Some elements are not perfectly aligned; the Icon Details view could be tweaked, but the Table and the regular Icon views are quite OK. It all depends on your resolution I suppose Maybe I'll look into overwriting some of the default styles in the future to make it fit perfectly.

 

I have to say upfront that I do like the Black Dynamix GUI but I wish it were updated for modern monitors that we all use today on our regular desktops while viewing the GUI. Seems like a lot of wasted space. Reminds me of watching a old full frame tv episode on a modern 1080P flat panel with the hideous black bars!

 

Now with that out of the way, this style looks great. I'm gonna have to try it out on one of my servers. Now we just need a black version...

 

Thanks man. The preclear on my disks is almost done, so hopefully over the course of the next few days I'll be able to do a more comprehensive testing. Should you find any issue while testing the css, let me know

It's CA's navigation buttons that really are messed in their placement.  And wouldn't you know that those buttons I didn't make skinnable in my last rewrite

 

Sent from my LG-D852 using Tapatalk

 

 

[dalben]

Very nice skin.  I need to try that.

[CHBMB]

Have you considered working with Kode from linuxserver (He's also the man responsible for fanart.tv) on the Aesir skin?

 

Here's the link.

 

And the github site.

 

Kode started it with the aim of it being a collaborative project.  Perhaps you two could combine your skills? 

[Squid]

Have you considered working with Kode from linuxserver (He's also the man responsible for fanart.tv) on the Aesir skin?

 

Here's the link.

 

And the github site.

 

Kode started it with the aim of it being a collaborative project.  Perhaps you two could combine your skills? 

Of the two projects, this is the better route because it is a skin for the existing UI, rather than a whole new UI...  But it would do well to get those two people together

[Drakknar]

For those of you who feel like trying the CSS, I have uploaded a new version with some changes and various fixes - you can find some more images in the OP

 

@CHBMB, Wow, the Aesir skin looks awesome! My preclear script is done, now I'm rebuilding parity; once that is done I'll play a little with unRAID and if it will fit my needs I'll definitely get in touch with Kode and see if I can help. I wonder if the project is still ongoing, though; the last commits are from 8 months ago / 1 year...

 

My approach is definitely safer, but at the same time I'm limited in what I can do. Working with many tables with many rows and columns each can be very tricky

 

@Squid, yep I could notice the problems with the buttons on my skin; You are using the <form method="get" id="myForm"> to wrap all the contents, though, and if I remember correctly I didn't find that element anywhere else in the Dynamix Web UI. Maybe I can hook into the #myForm id to fix a few things. Oh well, in any case it doesn't look too bad

[CHBMB]

@CHBMB, Wow, the Aesir skin looks awesome! My preclear script is done, now I'm rebuilding parity; once that is done I'll play a little with unRAID and if it will fit my needs I'll definitely get in touch with Kode and see if I can help. I wonder if the project is still ongoing, though; the last commits are from 8 months ago / 1 year...

 

Kode started it and wanted it to be a collaborative effort and I spoke to him earlier about your project, he's replied on the Aesir thread that he wants to get it going again.  To be fair he's been kind of busy with kids etc.... 

 

Hopefully he's stopped breeding now, and he'll have more time for Aesir. 

[zoggy]

could always just make the side menu responsive,  that way it can use more screen space for the devices that have it..

 

example:

http://bootsnipp.com/snippets/featured/responsive-sidebar-menu

 

[bonienl]

Nice initiative.

 

I recommend you to make this available as style sheets and give it a name, e.g. default-grey.css. You need to accompany this with the associated dynamix style sheet, e.g. dynamix-grey.css

 

I can change the Display Settings to do an active scan for available themes and make them available as a choice (see attached picture). This allows users to easily choose and change themes.

 

 

[Drakknar]

Kode started it and wanted it to be a collaborative effort and I spoke to him earlier about your project, he's replied on the Aesir thread that he wants to get it going again.  To be fair he's been kind of busy with kids etc.... Hopefully he's stopped breeding now, and he'll have more time for Aesir. 

Ohhh I see lol; yep, family always comes first

 

could always just make the side menu responsive,  that way it can use more screen space for the devices that have it.. example: http://bootsnipp.com/snippets/featured/responsive-sidebar-menu

Sooner or later I plan to add some sort of responsiveness to it, but first I need to have a stable base to work on. I started the project by modifying the original CSS, so there are many things that can and have to be changed / optimised / rewritten before I can think about performing this kind of tweaks.

 

Nice initiative. I recommend you to make this available as style sheets and give it a name, e.g. default-grey.css. You need to accompany this with the associated dynamix style sheet, e.g. dynamix-grey.css I can change the Display Settings to do an active scan for available themes and make them available as a choice (see attached picture). This allows users to easily choose and change themes.

Thanks man Sure, it won't really take much time for me to do this. As soon as the feature will be ready, I'll release the updated theme with the associated style sheets.

 

If you don't mind me asking, would you consider tweaking Dynamix to add a body id or class for each of its pages (i.e. Dashboard: <body class="dashboard">, Plugins <body class="plugins">, etc.)? This would make it much easier for anyone who'd like to style the default theme to tweak elements that are often recurring in more than a single page but have different positioning or need to have their own set of styles

[bonienl]

If you don't mind me asking, would you consider tweaking Dynamix to add a body id or class for each of its pages (i.e. Dashboard: <body class="dashboard">, Plugins <body class="plugins">, etc.)? This would make it much easier for anyone who'd like to style the default theme to tweak elements that are often recurring in more than a single page but have different positioning or need to have their own set of styles

 

I need to look into that and see what is possible. All pages are dynamically built and may consist of different parts.

 

Ok, I added a class identifier to the body element. To avoid possible class name conflicts, the class name is prefixed with "page_". So it looks like

<body class="page_dashboard">

or

<body class="page_plugins">

(class names are all in lowercase).

 

[Drakknar]

If you don't mind me asking, would you consider tweaking Dynamix to add a body id or class for each of its pages (i.e. Dashboard: <body class="dashboard">, Plugins <body class="plugins">, etc.)? This would make it much easier for anyone who'd like to style the default theme to tweak elements that are often recurring in more than a single page but have different positioning or need to have their own set of styles

 

I need to look into that and see what is possible. All pages are dynamically built and may consist of different parts.

 

Ok, I added a class identifier to the body element. To avoid possible class name conflicts, the class name is prefixed with "page_". So it looks like

<body class="page_dashboard">

or

<body class="page_plugins">

(class names are all in lowercase).

Sounds great, thanks!

[bonienl]

If you don't mind me asking, would you consider tweaking Dynamix to add a body id or class for each of its pages (i.e. Dashboard: <body class="dashboard">, Plugins <body class="plugins">, etc.)? This would make it much easier for anyone who'd like to style the default theme to tweak elements that are often recurring in more than a single page but have different positioning or need to have their own set of styles

 

I need to look into that and see what is possible. All pages are dynamically built and may consist of different parts.

 

Ok, I added a class identifier to the body element. To avoid possible class name conflicts, the class name is prefixed with "page_". So it looks like

<body class="page_dashboard">

or

<body class="page_plugins">

(class names are all in lowercase).

Sounds great, thanks!

 

The Dynamix Bleeding Edge plugin has this addition. Installing that plugin allows you to make further tests.

 

[Drakknar]

If you don't mind me asking, would you consider tweaking Dynamix to add a body id or class for each of its pages (i.e. Dashboard: <body class="dashboard">, Plugins <body class="plugins">, etc.)? This would make it much easier for anyone who'd like to style the default theme to tweak elements that are often recurring in more than a single page but have different positioning or need to have their own set of styles

 

I need to look into that and see what is possible. All pages are dynamically built and may consist of different parts.

 

Ok, I added a class identifier to the body element. To avoid possible class name conflicts, the class name is prefixed with "page_". So it looks like

<body class="page_dashboard">

or

<body class="page_plugins">

(class names are all in lowercase).

Sounds great, thanks!

 

The Dynamix Bleeding Edge plugin has this addition. Installing that plugin allows you to make further tests.

I'll keep an eye on that but I may have to pass on the bleeding edge features; my Linux troubleshooting skills aren't that great and at the moment I need my unRaid config to be as stable as possible

 

To your knowledge, will these features be added to the next stable release?

[lionceau]

This is amazing, I hope it gets updated with unRAID as new versions come out. The unattractive unRAID webinterface was one of the main things why I refused to even give it a try in the past. Once I tested it, I quickly understood why unRAID is so highly regarded and quickly saw past the interface design but this CSS shows that it could be perfect.

[Drakknar]

This is amazing, I hope it gets updated with unRAID as new versions come out. The unattractive unRAID webinterface was one of the main things why I refused to even give it a try in the past. Once I tested it, I quickly understood why unRAID is so highly regarded and quickly saw past the interface design but this CSS shows that it could be perfect.

Thanks man Work and life have been crazy but I plan to release an update in january to address some issues with a few plug-ins and menu elements, and then I'll do my best to improve this css until one of the other UI replacement projects will be completed.

[Drakknar]

On 26/04/2017 at 4:43 PM, NAStyBox said:

 

Were you ever able to get this to work in 6.3.3? LOVE this one. 

 

Other than two small issues with the side menu that have been there since pretty much the beginning - and it's totally my fault - on my rig it's working OK. Did you experience any problems?