Something more elegant…

April 26th, 2009 by Holger Bauer

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.

81 Responses to “Something more elegant…”

  1. Donovan Says:

    Very clean, professional look. This looks more serious than the nervecenter and the default 1.2 pfSense theme.

  2. Justin Hayes Says:

    I like this theme much better, it looks very clean and usable. Keep up the great work :)

  3. Darkk Says:

    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.

  4. Chris Says:

    Very nice! I like it!

    Regards,
    Chris

  5. Marco Says:

    2 THUMBS UP!

    The first for really caring of all the suggestions and considerations that us – humble users :P – 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.

  6. Chris Buechler Says:

    Looking good, Holger.

  7. Max Says:

    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.

  8. Lloyd Says:

    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 :-)

  9. crash Says:

    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?

  10. Mac Says:

    Nice, very nice.

  11. Skaar Says:

    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.

  12. Jan Gestre Says:

    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.

  13. Nico Says:

    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

  14. Frederic Says:

    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).

  15. cheesyboofs Says:

    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 :-)

  16. Ataa Says:

    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.

  17. CryoGenID Says:

    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 :-)

  18. Charles Says:

    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! =)

  19. Casey Says:

    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.

  20. Martin Says:

    :-)
    super…
    looks very nice…

  21. ian Says:

    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! :)

  22. jits Says:

    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.

  23. PredatoryFern Says:

    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.

  24. Phill Kenoyer Says:

    Now that’s the theme I’ve been looking for. I want I want.

  25. Jonathan Says:

    Looking good.

  26. Leo Says:

    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.

  27. Christer Says:

    Very nice and clean look!
    Looking forward to using it in the future releases!

  28. Holger Bauer Says:

    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! :-)

  29. JasonB Says:

    I concur on the menu color – black on red is not suitable…too dark…

  30. Robert Says:

    “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.

  31. Podilarius Says:

    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.

  32. Steve-o Says:

    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/

  33. MxxCon Says:

    it looks so awesome i’m sitting in a puddle of a hot chocolate milk!

  34. FreeBSD link roundup - 28/04/09 | FreeBSD - the unknown Giant Says:

    [...] 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 [...]

  35. jim-p Says:

    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 ;-)

  36. Simbad Says:

    full cool

    when new pfsense 2.0*?

  37. Overand Says:

    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.

  38. Jörgen Says:

    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,

  39. haXs Says:

    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!

  40. mrguitar Says:

    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?

  41. Chris Buechler Says:

    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.

  42. Juve Says:

    Looks better very update !
    Keep on the very good work.

  43. Darkk Says:

    Update #3 looks awesome!! Very easy to read as the shadows provide better contrast from the drop downs.

    Keep up the great work!

  44. DeCex Says:

    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.

  45. ChaosKreativ Says:

    Gui looks very good!
    But I think the background image should only be a gradient.
    Thanks for all the work

  46. Bill McGonigle Says:

    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.

  47. Unlogic Says:

    Looks great!

  48. Chris Buechler Says:

    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.

  49. Gabriel Says:

    This looks much better!

  50. Martin Says:

    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. :)

  51. toro Says:

    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…

  52. Chris Buechler Says:

    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.

  53. Max Says:

    The Update 3 is very nice, and very easy to read.
    Thank you for fixing the dark color :-)

  54. David H Says:

    Love it! Gets the interface out of the way to make room for the data that matters.

  55. Itwerx Says:

    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.

  56. PredatoryFern Says:

    Awesome job Holger! It’s looking great. Thank you for putting in so much effort to the project!

  57. Anthony Says:

    I love it ! Nice work !

  58. stabbim Says:

    Thanks for the Opera love! ;)

  59. Jon Says:

    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!

  60. Eric Says:

    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.

  61. Chris Buechler Says:

    Eric: they are ordered alphabetically, not sure what you mean?

  62. Eric Says:

    Looking at it again; it appears they are indeed ordered alphabetically, but that the first three items are ordered separately.

  63. Chris Buechler Says:

    Ah, there are a couple in there that aren’t in order in 2.0, thanks for the heads up Eric.

  64. Ron Says:

    When is it going to be the default theme on pfSense 1.2.3 7.1 release

  65. Chris Buechler Says:

    There will be no change in theme for 1.2.x, this is just for 2.0.

  66. Chris 'jahonix' Horn Says:

    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.

  67. Bill A Says:

    Very nice. This is much better than the last one. Keep up the good work!

  68. Chris Buechler Says:

    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.

  69. Holger Bauer Says:

    @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 ;-)

  70. Arl Says:

    Awesome Theme!!

    It really looks great, simple, nice colours combination (respecting the traditional ones) and contrast.

  71. Joe Says:

    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 :P

  72. Tim A Says:

    Nice theme, some good suggestions here in this thread. Can’t wait for 2.0!

  73. Emanuele Says:

    Where is the new theme in Fit123?
    (I’m using 1.2.3-RC2 )

  74. Scott Ullrich Says:

    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.

  75. Smakodak Says:

    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.

  76. Chris Buechler Says:

    Smakodak: there are already ways that’s improved in 1.2.3 and 2.0.

  77. Elf Says:

    I installed Fit123 but their is no new theme on 1.2.3-RC

  78. raigue Hyland Says:

    Looks really sweet. Very clean.

    Only one prob, RRD traffic graphs are now broken.

  79. Eric Says:

    Yes, where is the new theme in Fit123??

  80. Smakodak Says:

    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…

  81. Roger Says:

    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…

Please don’t post technical questions or off-topic comments. It is far more likely that your questions and concerns will be addressed effectively through one of our support channels.

Leave a Reply