Something more elegant…
Well, after there was not too much love for my last theme I tried to do something more masscompatible this time trying to take all the critics in consideration that I earned so far:
- less colorful, stick with the original pfSense-colors (grey/red)
- don’t waste too much space for the header/footer
- kind of corporate look
- static menu, that doesn’t scroll away (I guess that at least was something everybody liked about the hackathon theme)
- more lightweight on graphics
So here is what I came up with so far. This is still in the making so (like always) your feedback is appreciated and might influence the final result.
Update 1:
I worked on some bits so here’s an updated screenshot for you.
- Menutext changed to white
- Who needs a footer anyway? Found a way to present the copyright information without getting into the way with content. Netbookusers will love it
- Made the alerter a bit less “agressive” (it’s showing notices too, not only “end of the world alerts”)
So there is one thing left: changing the alerter completely and displaying the hostname at the same time. I have looked into this and it is only a minor code change in PHP, however all other themes need some css-fixing then as the hostname gets out of place when the alerter is displayed. Not sure if we want to do that and if so, if this will be a change that only would affect the 2.0 branch or gets backported to 1.2.x as well (as the themes that are in 1.2.x are a bit different from the themes in 2.0 css-wise).
Stay tuned, we are not there yet…
Update 2:
Lots of small changes on lots of elements that you probably will only notice when comparing older screenshots…
Here’s a screeny with alerter
and one without.
Update 3:
Tonight I worked out lots of browser- and os-compatibility issues. It now looks the same on all the browsers that I have tested so far (Firefox, Opera, Safari and I got reports on IE and Chrome too). Also tweaked some fontsizes again and added a shadoweffect to the dropdownmenus. Only some 2.0 specific things left open and maybe redoing the alerter as this seems to be a frequent request in the comments.
Screenshot here.
Update 4:
Guys, we listen closely to all your suggestions and there are some news especially on the alerter topic: Erik Kristensen, the original author of the themesupport in pfSense just rejoined the team after being away for a few years. I already had some discussions regarding the alerter and other theme topics with him. Atm it looks like the theme will come to the 1.2.x-branch like shown on the screenshots (no alerter change for this version) though we won’t make it the defaut theme for now but it probably will be part of the 1.2.3 release.
However for 2.0 (and here comes the great news) Erik will work on improving the theme support as well as on a new alert system. We already have some great ideas for this:
- different levels of alerts e.g. critical, notice,…and maybe different treatments of these alerts
- being able to not only display alerts locally in the webgui but to email them, maybe even growl them away or whatever might be useful
- alerts dashboard widget
- different presentation of alerts in the webgui (looks like the scroller is anoying too many people)
- …
Like always: keep the comments comming. We already got some good suggestions from you here 
Update 5:
Perry has added the theme to the Fit123 package (thank you Perry!). It’s pretty final (at least for the 1.2.x branch). Please note that you will get some other addons by installing this package, so have a look at the package description before bumping the install button.
April 26th, 2009 at 10:55 pm
Very clean, professional look. This looks more serious than the nervecenter and the default 1.2 pfSense theme.
April 26th, 2009 at 11:56 pm
I like this theme much better, it looks very clean and usable. Keep up the great work
April 27th, 2009 at 12:51 am
I do like the smaller header giving me more room to see the stats on the screen. Very useful for those lugging around tiny laptops with small screens.
The red and grey color scheme still works well.
April 27th, 2009 at 1:03 am
Very nice! I like it!
Regards,
Chris
April 27th, 2009 at 1:22 am
2 THUMBS UP!
The first for really caring of all the suggestions and considerations that us – humble users
– try to note down here and in the forum!
The second thumb up is for the design itself. Very, very clean and stylish, non distracting, and with the successful grey/red color scheme… and defintely agree with the choice of the header always on top.
April 27th, 2009 at 1:49 am
Looking good, Holger.
April 27th, 2009 at 2:00 am
Wow! Very nice!
But I find the black text over dark-red background a little “dark-over-dark”.
Maybe you could try to add some luminance to the background red of the menu, or try white text instead of black text, to get a better readability.
April 27th, 2009 at 2:23 am
Looks fantastic!
On another note I just moved my 30 IPSEC setup from Debian linux to my pfSense gateway and it runs beautifully. Total setup took less that 45 minutes which is a lot quicker than editing racoon.conf using Vi through SSH
April 27th, 2009 at 2:55 am
Much better!
What would ppl think of making the status msg bar full with, so you don’t have to wait to read the whole msg?
also, perhaps reduce the size of the footer even more? ( Or put the status msg bar full width in the footer?
April 27th, 2009 at 3:51 am
Nice, very nice.
April 27th, 2009 at 4:03 am
Looks nice, and has more space for information that the original. I do however miss a small caption that states the host name of the firewall. Some of us are managing many pfSense firewalls, and the host name caption is good to have so we don’t end up making changes on the wrong firewall.
Good job.
April 27th, 2009 at 4:21 am
Great theme but I think the menu font color should be white instead of black, because IMO black font on top of red is not readable, well that’s just me. BTW, good work.
April 27th, 2009 at 4:25 am
Looks a lot better! Some thoughts…
1) The footer is quite large for showing only the copyright
2) I would like very much the option to change the ‘red’ color as an option in the gui (helps a lot if you have multiple firewalls) Perhaps this can be added as a single color code from the gui?
Nico
April 27th, 2009 at 4:38 am
I like the overall color scheme, but I agree with Max, can you try white letters for the menus please?
It’s difficult to read now, dark on dark.
A larger status message bar could indeed be handy sometimes.
But here’s an idea: leave it like this, but expand it on mouse over.
Also, the footer looks a bit strange now (the bottom part of it – you can get rid of that IMHO).
April 27th, 2009 at 5:37 am
Not Bad, Not Bad.
It does look more corporate than the last one. I would have had trouble getting my Tech-Sup manager to migrate over to pfSense with the last interface. People are fickle!
I shall enjoy “tweaking” this new interface
April 27th, 2009 at 6:34 am
Nice,
But I think you should change the color of text in upper menu to a lighter color. I don’t like black on dark red.
April 27th, 2009 at 6:40 am
Looks nice, but I agree with Max, the black text over the dark red
background is a little bit difficult to read…
But the rest: very very nice
April 27th, 2009 at 7:04 am
Looks really good!
1. in the logo, the Sense over powers the “pf”, it’s hard to see, but maybe that’s because it’s just a screenshot.
2. I agree with Max about the black on red, maybe gray on red? or white, maybe make it an option.
3. the alert seems weird over on the right. maybe if there’s an alert it fades in a little div under the menu and bumps the page down a tiny bit.
4. the darker gray bar in the footer seems a little much, I like the design of that footer, with the red bar, but maybe you could lose the dark gray mini-bar.
overall I love it, just a couple minor issues for me. you asked for it! =)
April 27th, 2009 at 7:58 am
It would be nice if the hostname and/or location appeared in the header/footer always. Sure you can look at the URL in the browser, but when you’ve got 4 or 5 different pfsense interfaces up at the same time you have to be really careful to identify which box you’re about to change.
April 27th, 2009 at 8:44 am
super…
looks very nice…
April 27th, 2009 at 9:00 am
looks good, i’d also suggest more contrast in the menu font and definitely drop the footer down 20 pixels – too much precious space taken up on my 600 pixel netbook display!
April 27th, 2009 at 9:25 am
Can the colors in the graphs be more diverse. It’s difficult to make sense of the data because the colors are close and very similar.
April 27th, 2009 at 10:00 am
I like it as well. I like the smaller UI of the header and footer. It feels like it’s staying out of the way while still being within easy reach.
April 27th, 2009 at 1:02 pm
Now that’s the theme I’ve been looking for. I want I want.
April 27th, 2009 at 2:15 pm
Looking good.
April 27th, 2009 at 2:18 pm
pfSense to me is the best, I am liking it very much, and how with your new theme the look is even better, when will we see the new theme for testing maybe in the next 1.2.3 release
Thanks to all of pfSense developers for a great product.
April 27th, 2009 at 3:52 pm
Very nice and clean look!
Looking forward to using it in the future releases!
April 27th, 2009 at 4:27 pm
Thanks for the feedback! Looks like I’m on the right track this time. Regarding some of the comments:
- The menu textcolor: looks like it depends on the monitor that you use but a lot of monitors seem to be too dark for the current menu colorset. I’ll change this to have more contrast and post an upgraded screenshot soon.
- The hostname is usually right where the alerter is but with a grey background instead of the shiny red. It just gets replaced while there is an alert. Not sure if you noticed that yet but in all themes the hostname goes away, even if the alerter is not using the same screenspace. Will have to look into this if this can be changed easily.
- I’ll play around with the alerter to present more information. Not sure where to put it yet. The footer doesn’t seem to be the right place for an alerter imo. Should be somewhere on the top of the page… I need to play around with this idea some more
- reducing the footer in size would probably break 1.2.x compatibility as the text in the footer has 2 lines there. The screenshot is from a 2.0 system but I plan on making this theme 1.2.x compatible as well so this is something that I need to test on 1.2.x There is still the option to have the footer scroll with the page and place it at the bottom of the content. It’s not a vital element like the menu, so it doesn not have to stay in sight all the time. I might just try that to save that precious screen property on netbooks
- regarding availability: depending on when this one is finished it might appear in a 1.2.x release, maybe not as default theme but as option. As I got some pretty nice feedback this probably will become the default theme of an upcoming version. I just started work on this one but wanted to keep the users posted for exactly the good recommendations that I got. Once it is done it also could be offered as seperate download to be installed on your system (the “fit1.2.3 package” comes to mind).
Thanks for the feedback, Keep it coming!
April 27th, 2009 at 6:00 pm
I concur on the menu color – black on red is not suitable…too dark…
April 27th, 2009 at 6:37 pm
“I concur on the menu color – black on red is not suitable…too dark…”
I agree. White on red is better, or soften the red.
April 28th, 2009 at 12:34 am
Yo … a Very nice start. I liked the other also … but I would include them both if you could … or at least as a package. I would use the hackathon theme for the house and this one for other places. As always, great work and many thanks.
April 28th, 2009 at 8:08 am
Wouldn’t it be more practical to display notifications ala libnotify/Growl, e.g.
jGrowl:
http://www.webappers.com/2008/07/07/jgrowl-unobtrusive-notification-system-for-jquery/
roar:
http://digitarald.de/project/roar/
protogrowl:
http://www.midgard-project.org/documentation/protogrowl/
Similarly can the static RRD graphs be converted to interactive Flot charts so you can check individual values, zoom in and out, etc,
http://code.google.com/p/flot/
April 28th, 2009 at 3:06 pm
it looks so awesome i’m sitting in a puddle of a hot chocolate milk!
April 28th, 2009 at 6:27 pm
[...] gave a sneak preview of the new pfSense dashboard theme. Following feedback and comments, Holger Bauer has now designed a new theme: Well, after there was not too much love for my last theme I tried to do something more [...]
April 28th, 2009 at 9:14 pm
It just keeps getting better and better, Holger. Great work!
Two things I noticed when using the theme:
1 – The text inside the menu options could be a little larger. It looks good in white, though.
2. On my netbook (1024×600) the license text gets cut off halfway and there is no horizontal scroll to make it fully visible. (I only tested it on my netbook for kicks, I don’t use it to manage things
April 29th, 2009 at 2:34 am
full cool
when new pfsense 2.0*?
April 29th, 2009 at 8:58 am
Would it be possible for the “alerter” to show up underneath the menubar (possibly to the right of the logo) and posibly have it only take up that ’space’ when it’s displaying text – I agree with some posts about the alerter being hard to read/wait/etc. Having the alerter be obscured by the menus when they drop down is honestly probably not a problem.
(I’m not a fan of marquee type stuff, it’s the only thing in pfsense that annoys me a bit. Anything to improve the usability of that particular feature would be a plus – and a full-width marquee might be sort of neat – stock-ticker style)
This is a great looking theme from what I can tell – props.
April 30th, 2009 at 2:59 am
Hi,
It’s nice to have alternatives and it’s looking good. I however think that a few of the standard ones are good looking. A little space for a header of footer is also not an issue, since some may find it useful to add some customized header logo etc too.
Thanx,
April 30th, 2009 at 1:18 pm
I like it, very nice. I has a good style and feel to it. I agree with Overand’s comment about the alerter going underneath when needed.
But overall i like the feel of it!
Good work!
April 30th, 2009 at 6:41 pm
It’s pretty much perfect for my tastes!
….the only thing that annoys me w/ 1.X is if you have a lot of interfaces the firewall rules page & dhcp are difficult to view because lots of horizontal scrolling is involved. Any chance it’s possible to create a second row of tabs for these situations?
April 30th, 2009 at 7:07 pm
mrguitar: that’s addressed in 1.2.3 partially, you get a drop down instead of a mess of tabs. In 2.0 you can group interfaces rather than doing them individually.
May 1st, 2009 at 1:53 pm
Looks better very update !
Keep on the very good work.
May 2nd, 2009 at 3:15 pm
Update #3 looks awesome!! Very easy to read as the shadows provide better contrast from the drop downs.
Keep up the great work!
May 3rd, 2009 at 12:41 pm
I think a thin “one line” footer with copyright infoes is nicer, but should keep it thin and one line only.
The new gui look very professional. Thanks for the future gui improvment.
May 4th, 2009 at 1:53 pm
Gui looks very good!
But I think the background image should only be a gradient.
Thanks for all the work
May 4th, 2009 at 3:49 pm
Nice. Try making sure your CSS works with various font sizes and user-defined minimums. The current pfSense default theme becomes unusable for me on certain browsers because the Diagnostics menu wraps around under the General menu, and then the menu logic blows up. So, I usually run the m0n0wall-ish theme, just to be cautious.
May 4th, 2009 at 3:58 pm
Looks great!
May 4th, 2009 at 5:00 pm
Bill: that’s usually font size related, though in some obscure browsers with the default font size it’ll do that, it works with the defaults in every major browser (IE, Firefox, Opera, Chrome, Safari) in every widely used OS. I agree we should accommodate all font sizes across all browsers where possible, but Holger already has enough nightmares making sure every browser works the same on every OS with the defaults, so that may not be reasonable.
The m0n0wall-like theme will always be available for the edge cases if this continues to be an issue.
May 4th, 2009 at 6:58 pm
This looks much better!
May 5th, 2009 at 6:47 pm
Holger,
Absolutely awesome! So awesome it would be a shame having to wait for your theme until 2.0 GA. Hopefully it’ll be back-ported.
May 6th, 2009 at 6:14 am
the transparancy of the menus in the last screenshot makes me fear that this will be compleately incompatible and useless with ie6.
yes, i don´t install/upgrade any browsers on my servers, but in very rare cases i just need to adjust something from there.
i just hope the ancient monowall theme will still be supported/availble in the next versions…
May 6th, 2009 at 8:48 am
toro: as I said above, the old m0n0wall theme will always be available. But you shouldn’t be running IE 6 on anything anymore unless you’re dropping all egress traffic from that to the Internet, or you want to get owned.
May 6th, 2009 at 2:55 pm
The Update 3 is very nice, and very easy to read.
Thank you for fixing the dark color
May 8th, 2009 at 9:28 am
Love it! Gets the interface out of the way to make room for the data that matters.
May 10th, 2009 at 5:35 am
Very, very nice!
Agree that the scrolling alerter has always been annoying.
Maybe have a very thin “alert bar” under the top menu which has a string of icons for different alerts (arranged by severity of course) and click or hover over one drops down the text for it? With click-to-clear within the drop-down and an “uber-click” button at one end to acknowledge all.
May 10th, 2009 at 10:36 pm
Awesome job Holger! It’s looking great. Thank you for putting in so much effort to the project!
May 11th, 2009 at 1:32 am
I love it ! Nice work !
May 12th, 2009 at 12:06 am
Thanks for the Opera love!
May 12th, 2009 at 11:50 am
looks great but I wouldnt complain if the red in the drop downs went a little more toward the burgundy side. I actually really like the metallic theme in the product now, with the exception of the drop downs that get white lines through them horizontally.
anyway, does look good!
May 15th, 2009 at 6:36 pm
This looks excellent. My only request would be that you consider ordering the menu items alphabetically so it’s easier to quickly find a particular item.
May 15th, 2009 at 6:43 pm
Eric: they are ordered alphabetically, not sure what you mean?
May 16th, 2009 at 11:33 am
Looking at it again; it appears they are indeed ordered alphabetically, but that the first three items are ordered separately.
May 16th, 2009 at 1:22 pm
Ah, there are a couple in there that aren’t in order in 2.0, thanks for the heads up Eric.
May 18th, 2009 at 11:25 am
When is it going to be the default theme on pfSense 1.2.3 7.1 release
May 18th, 2009 at 12:08 pm
There will be no change in theme for 1.2.x, this is just for 2.0.
May 19th, 2009 at 3:22 am
Since current screen resolutions are going to give more space in the horizontal pane I wonder if it would be beneficial to sort the menues vertically underneath the pfSense logo (sort of the m0n0wall theme).
Hoba’s current version leaves unused space there and quenches the menu on top.
Looks more like space saving than relaxed, IMHO.
Other than that I look forward to using it someday.
May 19th, 2009 at 10:46 am
Very nice. This is much better than the last one. Keep up the good work!
May 19th, 2009 at 2:35 pm
Chris Horn: yeah but a large number of visitors to our websites at least don’t have widescreen resolutions. #1 most popular resolution is 1280×1024 (21%), second is 1024×768 with 17.5% (really? It’s 2009, seems like IT people at a minimum should be using better displays by now…). 0.5% are using 800×600. Numbers from Google Analytics.
Roughly 40% aren’t using any sort of widescreen or high resolution, that’s a big enough number that we can’t cater specifically to widescreen/high resolutions.
May 19th, 2009 at 3:42 pm
@jahonix: Sure, the theme system is open for creating such a theme too but someone simply has to create it. The theme that is mentioned in this thread of course will work on widescreen resolutions too as it really cuts the usable vertical screenspace only by a minimum (no footer and just a few pixels for the navigation bar. But of course, the next theme that I’ll be working on might be something completely different, who knows
May 22nd, 2009 at 9:08 am
Awesome Theme!!
It really looks great, simple, nice colours combination (respecting the traditional ones) and contrast.
May 24th, 2009 at 11:41 am
Maybe the possibility to put a custom Corporate logo could be nice too!
And I think that the alerter should show 5 alert when mouse over.
For the rest it’s wonderfull! Keep the transparency on the menu that was cool
May 29th, 2009 at 3:50 am
Nice theme, some good suggestions here in this thread. Can’t wait for 2.0!
June 6th, 2009 at 5:35 am
Where is the new theme in Fit123?
(I’m using 1.2.3-RC2 )
June 7th, 2009 at 6:50 pm
Sweetness, look forward to this going into 1.2.3 and 2.0. Will not be default for 1.2.X but we should make it available at least.
June 17th, 2009 at 11:52 am
I have one wish. In “rules” when you have many interfaces/vlans, the tabs will continue to grow to the left, and It’s hard to get an overview. It would be very nice if they could be put in rows.
June 17th, 2009 at 1:44 pm
Smakodak: there are already ways that’s improved in 1.2.3 and 2.0.
June 18th, 2009 at 2:11 pm
I installed Fit123 but their is no new theme on 1.2.3-RC
June 19th, 2009 at 12:12 pm
Looks really sweet. Very clean.
Only one prob, RRD traffic graphs are now broken.
June 20th, 2009 at 10:52 am
Yes, where is the new theme in Fit123??
July 2nd, 2009 at 11:17 am
Just tried 1.2.3-RC1
So happy that you did the “Rules” scroll list. I have a network with 125 vlans, and now I also know what I’m doing…
July 10th, 2009 at 12:22 pm
Looks cleaner than nervcenter, but i don’t like that it isn’t centered.
(On a 24″ TFT don’t looks great)
Well, maybe in a future release there is a centered version available…