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.

Share this Post:

81 Responses to “Something more elegant…”

  1. 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…

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

  3. Max Says:

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

  4. David H Says:

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

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

  6. PredatoryFern Says:

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

  7. Anthony Says:

    I love it ! Nice work !

  8. stabbim Says:

    Thanks for the Opera love! 😉

  9. 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!

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

  11. Chris Buechler Says:

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

  12. Eric Says:

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

  13. Chris Buechler Says:

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

  14. Ron Says:

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

  15. Chris Buechler Says:

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

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

  17. Bill A Says:

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

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

  19. 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 😉

  20. Arl Says:

    Awesome Theme!!

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

  21. 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 😛

  22. Tim A Says:

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

  23. Emanuele Says:

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

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

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

  26. Chris Buechler Says:

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

  27. Elf Says:

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

  28. raigue Hyland Says:

    Looks really sweet. Very clean.

    Only one prob, RRD traffic graphs are now broken.

  29. Eric Says:

    Yes, where is the new theme in Fit123??

  30. 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…

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