Yo dawg, we heard you liked themes...

43 posts / 0 new
Last post
#1 Sun, 09/15/2013 - 01:59
Joe
Joe's picture

Yo dawg, we heard you liked themes...

Just an update on current progress in the new Bootstrap/jQuery theme for Virtualmin/Webmin/Cloudmin/Usermin.

Bootstrap themes (like those from Bootswatch) are working pretty well now, so I thought I'd share some screenshots of what that'll be like (sort of). So click away, and get a tiny taste of the flexibility of the new theme:

Amelia theme

Readable theme

Slate theme

Cerulean theme

United theme (That orange looks familiar...)

You'll note that the themes (especially Slate) gives a lot clearer indication of what has been converted to bootstrap styles and what remains of the old. I'm working my way through it all one UI element at a time. Just the ui-lib has hundreds of tags and classes to be updated...not to mention all the modules that haven't yet been converted to using ui-lib. This is going to be a long, tedious, slog, to get everything converted...but, it's going much more rapidly than every other attempt I've made to AJAX-ify Webmin over the past several years, and I've already defeated all of the really hard problems I ran into in those previous attempts.

A lot of the work of the past week has been behind the scenes, or at least visible only on a few select pages. Getting the UI consistent across all pages has been my goal all week, and I'm pretty close to having every element in Virtualmin converted. That still leaves a couple hundred of the standard Webmin modules...but, it's coming along.

I think we're still only schedule to have an alpha version of this available for testing (but not production use!) within the next week or so, and a usable (but still imperfect) beta in less than a month.

Cheers, Joe

Mon, 09/16/2013 - 07:56
siddeswara

Hello Joe,

Those themes look awesome.. I cant wait to download them and install them. Thanks...

Regards,

Sidd

Mon, 09/16/2013 - 10:03
helpmin

Great news!

Tue, 10/01/2013 - 16:54
Jasin

I like slate! Look forward to it.

Thank you for the hard work.

Thu, 10/10/2013 - 13:50
Jesse OBrien

Any idea when these will be made available to the public? I'm really looking forward to Readable.

Fri, 10/11/2013 - 16:09
yngens

Great news on great themes! I think would be even better to gather all our kudos and feedbacks in one topic instead of three different:

http://virtualmin.com/node/29823 http://virtualmin.com/node/30047 http://virtualmin.com/node/29797

Thu, 10/17/2013 - 07:29
sidd

Hi Joe,

I am really looking forward to these awesome themes. Do we have any progress updates or an approximate release date?

Thanks..

Mon, 10/21/2013 - 12:53
Joe
Joe's picture

It's still moving forward. I'm working on back button functionality right now (which is trickier than I expected, and without a functioning back button, the UI feels horrible). There's also several bits where events aren't attached, so clicking things doesn't work. We're getting closer, but it's a bigger job than even I realized (and I've tried this major AJAX-y type of overhaul twice in the past). But, so far, I've been able to resolve all the issues we had in the past...so we're over the showstoppers we had with previous revisions.

So, maybe another week or two (I know I said that several weeks ago, but it's happening, if slower than expected). If anybody is a JavaScript fu master that wants to help me make history API work, or help figure out how to deal with converting forms to a single-page app model, hit me up! If not, i'll definitely get it sorted...it just may take a little longer.

--

Check out the forum guidelines!

Mon, 10/21/2013 - 16:30 (Reply to #8)
yngens

I wish I could contribute my time and my knowledge of java-script (close to non-existent), but at least I would like to support your always great work financially. Can I send you a little PayPal bounty and to which address?

Mon, 10/21/2013 - 18:05 (Reply to #9)
pcfreak30

Hey joe. I have deep experience in Jquery, jQuery UI, some jquery mobile and have worked with bootstrap. I can give you some time and assist you on the js end if you need. Very interested in getting this theme made.

I am currently in #virtualmin on freenode.

Thu, 11/14/2013 - 12:20
cognosco

Hi joe. If I had the knowledge I would help, but unfortunately I don't have that. But I would to tell you this: it looks great! Good job! Can't wait to use these themes.

Sun, 11/17/2013 - 22:19
harty83

Howdy! So my hesitation to buying an unlimited/lifetime package is the ugliness of the UI as is (please take no offense; but compared to today's standards for UI, well, I think you probably know or else wouldn't be doing this theme adventure). I'm also wanting to be able to offer my clients a webmin login (or at least advertise it), but feared the UI would scare them away :-) But the idea of finally having an jquery/bootstrapped UI may just push me over the edge.

So, any update on where the progress is on these themes? Looking good!

Sat, 12/14/2013 - 05:40
kks21199

Hey any idea on when it will be released ? I really want this theme :D

Sat, 12/14/2013 - 07:49
sidd

Hi Joe... Has this project been shelved? Really looking forward to these themes.. Any updates on the release date?

Thanks..

Sidd

Sat, 12/14/2013 - 21:29 (Reply to #14)
Joe
Joe's picture

It definitely has not been shelved! It is my primary job every day. We're currently working on converting all of Webmin to use ui-lib.pl function calls, and also converting all bare links into ui_link function calls (both of these things have to happen for the theme to work with all of Webmin and Virtualmin). It's time consuming, and tedious, but we have at least one volunteer helping out with it and me and Jamie have mostly stopped all other work to focus on this (so no new features will happen in Virtualmin or Cloudmin for the next couple of weeks while we finish this job).

If anyone knows how to use git/github and knows a little Perl and a little HTML and wants to help out...we could speed this thing up a bit if we had more hands on deck. It's mostly easy coding, but, so far, we haven't been able to automate it. The ui_link conversion really ought to be automated, but it has proven beyond my regex-fu thus far. The other ui-lib conversion stuff requires human labor. Webmin is just so big that it takes a long time to do anything that requires changes in every module, as this new theme does.

Progress has actually been pretty good this week. I fixed a number of forms, and figured out that some of the other showstoppers can be resolved by the ongoing ui-lib and ui_link work (i.e. the things I was trying to solve in hard ways by writing substitutions in JavaScript can be solved in easy ways in the underlying Perl code).

Anyway, don't dispair: This time the new theme will make it out the door. I'm already using it on my personal systems...with the awareness that it breaks a lot, because of modules that haven't been updated, as well as some buggy bits in the form handling (I need to attach form submit events to the individual buttons rather than the form itself...haven't figured out how to do this yet, so forms are still buggy if there's more than one button).

Cheers, Joe

--

Check out the forum guidelines!

Sun, 12/15/2013 - 04:44 (Reply to #15)
Jesse OBrien

I'm more than happy to have a look at this and do what I can find. I'm pretty handy with awk and sed, so I may be able to help with the ui_link part at least. Is this all stored in a public forkable git repo? I could fork, make some changes (hopefully working ones), and just submit a git patch if it'd help.

Sun, 12/15/2013 - 16:48 (Reply to #16)
Joe
Joe's picture

Yes, the Webmin repo is open and here: https://github.com/webmin/webmin

On the ui_link translation, we're taking something like this line in acl/edit_group.cgi:

@grid = map { $_ =~ /^\@(.*)$/ ? "<a href='edit_group.cgi?group=$1'><i>$1</i></a>" : "<a href='edit_user.cgi?user=$_'>$_</a>" }
            @{$group{'members'}};

And converting it to:

@grid = map { $_ =~ /^\@(.*)$/ ? ui_link("edit_group.cgi?group=$1", "<i>$1</i>") : ui_link("edit_user.cgi?user=$_", $_) }
            @{$group{'members'}};

This is a simpler example than some, and they often span multiple lines. My sed-fu isn't bad, but this one is gonna take me a lot more than a few minutes to figure out.

--

Check out the forum guidelines!

Sun, 12/15/2013 - 17:05 (Reply to #17)
Joe
Joe's picture

And, to put into perspective how much more complicated this conversion can look, this is the very next a href found in the edit_group.cgi file:

            $label = sprintf "<a href='edit_acl.cgi?".
                     "mod=%s&%s=%s'>%s</a>\n",
                &urlize($m->{'dir'}),
                "group", &urlize($in{'group'}),
                $m->{'desc'};

I'm having a hard time reasoning that one out by hand! (Which may be what needs to happen for more complex examples like this...if we ended up with, say, 100 instances that have to be updated by hand instead of thousands, that'd still be a big win. But, that would mean the sed or perl script that does the automated substitution would need to recognize when it was out of its league and needs to skip this particular a href tag. I think this problem is actually well above my pay grade when it comes to regexes.

And, just for reference that example might become something like this (and this is what I'm about to check in):

            $label = ui_link("edit_acl.cgi?" .
                     "mod=" . urlize($m->{'dir'}) .
                     "&group=". urlize($in{'group'}),
                     $m->{'desc'})  . "\n";

The sprint isn't really useful since ui_link leads to simpler code. The "\n" gets a little weirder looking, since it hangs off the end outside of the function. But, the a href bit gets shorter and somewhat clearer. We plan to clean up the ui-lib.pl in the Webmin 2.0 branch, but for now, we just want to get this theme fully functional and out the door!

--

Check out the forum guidelines!

Sun, 12/15/2013 - 08:29 (Reply to #18)
pcfreak30

Joe, I would help out on this if I could talk over Skype. E-Mail for me isn't the fastest communication, and you never seem to want to be on IRC :P.

I know Perl decently, PHP, HTML, jQuery, and bootstrap. I am also pretty exp'ed with regex.

Add pcfreak30 on Skype and I can help. i am on IRC some too as well if you decide to go on.

Sun, 12/15/2013 - 16:49 (Reply to #19)
Joe
Joe's picture

I'll see if I can remember my login details for IRC, and will come hang out there to chat about it.

--

Check out the forum guidelines!

Thu, 04/03/2014 - 08:33
Goeny

I was just surfin around, searching for possible available themes for Virtualmin and found this topic. Last reply was in december 2013 so i wondered if this new theme is still being developed. It looks awesome and would be very welcomed for sure.

Tue, 04/08/2014 - 15:39
hugstill

Joe, I am interested in contributing to the new themes, or forking them under gpl. Especially if they are stalled and no one is actively working on them, I'd really like to pick them up.

Wed, 04/09/2014 - 16:44 (Reply to #22)
Joe
Joe's picture

That'd be awesome! I'm swamped lately with non-theme work. It's still gonna happen, one way or another, but with the OpenSSL thing, our migration to Drupal 7, and a new server, I'm kinda overwhelmed.

The theme will, of course, be Open Source, so that's not an issue.

I'll see about making a new git repo just for the theme as it stands today. Right now it's in our virtualmin repo, which has both Pro and GPL in it, so it's not accessible to the world, which is counter-productive for letting others help out.

--

Check out the forum guidelines!

Sat, 04/19/2014 - 02:18
msathesh

Hi Joe,

I'm very desperate to change the look and feel of the Webmin panel. Is it possible for you to release it so that we could also work on it?

Thanks.

Wed, 05/07/2014 - 19:33
dyvel

Hi Joe

I came across your post in my search of themes for Virtualmin. Your Cerulean theme looks awesome!!! I work as a frontend developer my self, and would love a git repo access so perhaps I could help a bit getting this out into the "wild".

Thanks

Mon, 05/12/2014 - 13:07
BJameson

+1 for the git repo.

I tried to set my foot on Proxmox, Opennode, SolusVM, Archipel and others just because they look cool :)

The "Mins" are still cool. It's just that 1990's interface.

These themes will discourage someone from doing the same thing!

Tue, 05/13/2014 - 11:26
Welshman
Welshman's picture

Hi, I can give a small dedicated server if it will help things along.

David

Chaos Reigns Within, Reflect, Repent and Reboot, Order Shall Return.

Tue, 05/13/2014 - 19:48
nibb

I was also looking into building my own bootstrap theme but it may be easier to collaborate into the existing work.

I like the Cerulean theme but the the others look just amazingly awful in terms of colors. Someone needs to take a look at the color wheel to see how to match colors: http://colorschemedesigner.com/

Just kidding, the important thing is to get the code on the new theme working. The rest is just detail which is not important for a basic GUI functionality.

What is the overall progress on this themes so far? I would be happy if just one is finished and released as base so users can work on it for other themes forked out of it and give the product the much needed different themes. It seems this is a long missing point on the Webmin/Virtualmin/Cloudmin products.

I honestly think this will push more users into the software, I love the features, probably because I´m a geek but I noticed that newbie server admin don´t fall for it for the looks.

And yes, I also found this searching on Google because it seems there honestly are not any themes available for the products so far.

Wed, 05/14/2014 - 23:55 (Reply to #28)
Joe
Joe's picture

Note that all the other "themes" for Bootstrap are not being worked on by me; they're just freely available themese that can easily be added once the bootstrap conversion has taken place for Virtualmin/Webmin. i.e. I'm making a Bootstrap theme for Webmin, and any Bootstrap theme that contains the elements we use will work as a style overlay with little or no additional effort. So, I'm not offended by your assessment of their color schemes...I didn't do it!

Yesterday I worked on getting the repo into a state that I can split into a public and private repo (it's currently in our private Virtualmin repo, which contains the commercial Virtualmin Professional and Cloudmin code). I'm probably gonna be able to branch it tomorrow before our company meeting, and make it available publicly.

If we had someone with JavaScript abilities beyond mine able to knock out the last couple of remaining major usability issues, it'd be something we could drop into a development package for people to play with. But, as it stands, it's not actually usable...submit buttons are broken if there's more than one on a page (I don't know how to resolve this without modifying every form in Webmin/Virtualmin/Cloudmin, which isn't feasible), there are still link issues (the href conversion I discussed earlier), back button doesn't work (I think I know how to fix this one, just need a few hours to write the code and test it), and lots of polishing is needed. Hopefully, once it's public some other eyes can sort out what remains to be fixed to make it usable enough for widespread testing.

--

Check out the forum guidelines!

Wed, 05/21/2014 - 22:20 (Reply to #29)
pcfreak30

You have time to do this yet as I would love to work on it myself. Don't forget to write some docs to point out the unfinished work.

Thanks.

Thu, 05/29/2014 - 14:31 (Reply to #30)
Joe
Joe's picture

Here it is:

https://github.com/virtualmin/virtualmin-bootstrap-theme

Instructions for installation are in the README.md. The only dependency other than Webmin is, I think, the Perl JSON::XS module.

The theme is extremely close to functional; one major missing piece of capability is pages with multiple forms don't work (this is very common in Webmin/Virtualmin, so it's not possible to actually use the theme despite how close it is to functional).

But, Webmin itself also needs a tremendous amount of work to make it work with the new theme, which is briefly covered in the WISHLIST file, and in the posts I've made earlier in this thread and elsewhere (ui_link conversion must happen in 11,000+ locations, and we have to strip out all of the old JavaScript and replace it with something more modern and less error-prone...since any uncaught JavaScript error stops everything from working until a page reload).

--

Check out the forum guidelines!

Sun, 06/01/2014 - 07:04
DarkSoroush

Hi Joe,

I tried to use it but it gave me: Error - Missing Content-Type Header When opening: https://xxx.xxx.xxx.xxx:10000/left.cgi

Any Idea? I have rrdtool, perl-CGI, libart_lgpl and perl-JSON-XS installed.

Sun, 06/01/2014 - 07:26 (Reply to #32)
DarkSoroush

Fixed with executing:

find . -name "*.cgi" -type f -exec sed -i "s/#!\/usr\/local\/bin\/perl/#!\/usr\/bin\/perl/g" {} \;

in virtualmin-bootstrap-theme directory. Now I have

Error - Perl execution failed Can't locate bootstrap-theme/bootstrap-theme-lib.pl in @INC

Sun, 06/01/2014 - 07:29 (Reply to #33)
DarkSoroush

Fixed by renaming "virtualmin-bootstrap-theme" directory to "bootstrap-theme"

mv virtualmin-bootstrap-theme bootstrap-theme

We better correct the readme file.

Sun, 06/01/2014 - 12:53 (Reply to #34)
Joe
Joe's picture

Ah, yes! Good catches. I'll update the docs. (And, Jamie does all development on a system with a /usr/local perl, for whatever weird historic reason...so, that path is in all of our modules. It can also be solved by creating a symlink to the system perl in /usr/local/bin, though there have been some weird issues with that in the past.)

--

Check out the forum guidelines!

Sun, 06/01/2014 - 13:02 (Reply to #35)
Joe
Joe's picture

README has been updated.

Also, rather than rename the directory, I've simply made the linking step:

ln -s /path/to/virtualmin-bootstrap-theme bootstrap-theme

So, paths will work fine after this. I may eventually change the code to point to virtualmin-bootstrap-theme...but, if this theme becomes the default Webmin theme (which is likely), it wouldn't make sense to keep calling it the Virtualmin Bootstrap Theme.

And, rrdtool is not a dependency for this theme, though there will be a new graphing library added at some point...and possibly new data gathering tools to provide the data. rrdtool might be a useful data source, though I'm also looking at collectd, as well as simply improving Webmin's data gathering (it has many good tools for collecting data about systems, but it can also be a bit heavy when running for hundreds of systems, rrd or collectd or something else may be preferable for those situations).

--

Check out the forum guidelines!

Sun, 06/01/2014 - 14:07 (Reply to #36)
DarkSoroush

I did some changes. Please take a look at project's pull requests.

Sun, 06/01/2014 - 16:17 (Reply to #37)
Joe
Joe's picture

Wow! That looks great. You even tackled a couple of problems I didn't document! I'll get this merged and tested out.

--

Check out the forum guidelines!

Sun, 06/01/2014 - 23:34 (Reply to #38)
DarkSoroush

There are still some problems. For example some buttons (Like Log's Refresh button) are not working correctly. Also there is lot of room for more tweaks in both javascript and specially css.

Anyway, it was lot better if you could give me push right so I didn't need to open a pull request for every changes. But if you don't want or have no trust in me, it is ok.

Mon, 06/02/2014 - 14:49 (Reply to #39)
Joe
Joe's picture

I'm happy to add you as a contributor for this repo.

--

Check out the forum guidelines!

Sun, 06/01/2014 - 09:01
Welshman
Welshman's picture

:) thanks Joe.

Please keep at it.

Chaos Reigns Within, Reflect, Repent and Reboot, Order Shall Return.

Mon, 06/02/2014 - 14:52
Joe
Joe's picture

BTW, I've started a thread over on the Developers forum for discussion of work on this theme. That thread is here:

http://www.virtualmin.com/node/33324

It'd probably be cool to take the development discussion over there, since this thread has a bunch of non-development stuff in it and is kinda busy and deeply nested.

--

Check out the forum guidelines!

Sat, 09/13/2014 - 08:44
vectorsites

Would like to get the Cerulean theme. Link?

Topic locked