Simply download the full theme and copy it into /usr/local/www/themes/ then select it from System -> General Setup as you would any other theme. <- Faster Mirror

    Any further changes will be minimal and purely cosmetic unless the whole theme process gets re-vamped for pfSense v2.0

    ***Confirmed to now work not only with v1.2.x but also v2.A thanks to the heads up from Hoba

    ****Have removed the FreeBSD logo from the banner pictured in the second post below (now replaced with a globe) due to licencing restrictions that may lead to confusion between the two brand names. I do however still have the image as I think it looks sick ;0)

    Comments welcome.

  • New background.gif added, now a deep red also gets rid of the scrolling white box problem when not maximised that occurred with the old gray background, also looks less like a hospital now  ;)

  • Not bad, not bad!!

    Let us know when it's ready and we will add it to 2.0 builds.

  • :o I'm so not worthy !!!

    One quick question, is there any way I can force the ticker tape banner to appear without breaking something? I have made a new one but can't get it to appear to see what it looks like.

  • Hey, looks nice!  :D

    For the tickertape, just configure a carp sync to a non existing node (firewall>virtual IPs, sync settings, at the very bottom). This will throw an alert if you reload your firewallrules by e.g. editing a rule without changing anything and applying the changes.

  • Hey, cheers.

    Yeh I figured it out by setting a vLAN to an interface that was down.

    Nearly there now - bit of a perfectionist, cant stop fiddling.

  • I haven't seen your latest version, but doesn't the menu bar slightly bent down in both sides?

  • Not sure I know what you mean? If you mean the attached, then this will only show up on really high resolutions.

  • Or do you mean this colour change that only shows up under Explorer? For some reason although the colours are the same between background.gif and header.png, Explorer renders them slightly different - this is not a problem under google chrome of firefox so I'm not that bothered.

  • laptop 1280x800 ubuntu firefox, don't know if you can see it on the attach picture

    ![pfSense.local - pfSense webGUI_1235309234461.png](/public/imported_attachments/1/pfSense.local - pfSense webGUI_1235309234461.png)
    ![pfSense.local - pfSense webGUI_1235309234461.png_thumb](/public/imported_attachments/1/pfSense.local - pfSense webGUI_1235309234461.png_thumb)

  • Originally I had intended to have the bar go right across the screen as on my Vaio laptop 1366 wide. But then when I looked on my wide screen monitor at home I noticed that anything over 1600 would look as if the ends where chopped off (attached) so rather than create a .gif that went on for ever I just faded the ends out, a bit of a fudge I know but it looks ok.

    As for your attached picture, it looks as I intended to me. ;)

  • Or maybe you mean the shadow under the bar is fatter when its over the red background than when over the white? Again this is correct, its supposed to look like the white background is slightly lifted off the red.  ;D

  • Btw, you should get a new name for it. It's not just a spinoff of nervecenter, it deserves a name of it's own. How about "condition red"?  ;)

  • Just as some alternate suggestions:

    Code Red

    Red Alert

    Loving the look, good work Cheesyboofs

  • @ hoba, since it was basically a complete rip off of Nervecenter with some new graphics I wanted the nod from the original author, which I think/thought was you. If your happy then I'm happy to give it a new name.

    @ onhel, Like these suggestions, warming to Red-Alert as a homage to "command and conquer" that I thrashed to death back in the day, moved on to "company of heroes" now, obviously.

    @ dev's there seems to be allot of legacy stuff (icons and pictures) in these theme folders and duplication of. Is there a definitive list of what is required so that I can throw some things out? It seems if we encourage theme'ing before long the theme's could be larger than the OS its self. Also I'm no web developer by far but could pfsense not look in the /themes/theme-name/ folder first for a graphic then fall back to a default folder if one is not found (say with some ELSE statement)

    Glad people like it and have also noticed a new "wall' theme on the CVS site but not quite sure how to get it.

  • Yep, nervecenter was my creation and you have permission to do anything with it. Go ahead and give it a nice name :)

    We have been discussing earlier to have a default theme template that's elements could be used if they are missing in another theme. We just have not gotten into changing th needed bits and pieces. That would save some space in case only few elements are changed (and you can see with your theme that few changes can get you a complete new look and feel). As you already have noticed there are lots of graphics that have been added for some ideas that didn't quite work out or that have never been finished due to lost interest. We probably should clean that up before going live wit pfsense 2.0  ;)

  • CODE-RED it is then, executive decision.

    Hoba, as you are a theme veteran I wonder if you can scratch an itch I have?

    I'm pretty sure line 144,#header-right .alert { / color: #fff; }is the blue ticker tape text but every alert has a white date stamp. I was sure this was, line 219;```
    #marquee-text {color: #ffffff; }

    Thank you for being so gracious and I think theme'ing should be encouraged. People are fickle, if a web site looks professional people won't think twice about punching their credit card details in to it. If a screenshot of some freeware looks professional people won't think twice about installing it _"this won't be full of spyware, look at all the effort they've gone to to make the icons look like glass"_
    We all know pfSense is a fantastic product, the hard bit is already done.  ;)

  • You can modify the blue linkcolor of the alerter (and all other appearence of links on all guipages) by adding something like this below the body section of the all.css:

    a:link {
    	color: #b38507;
    a:visited {
    	color: #b38507;
    a:active {
    	color: #b38507;
    a:hover {
    	color: #b38507;

    Modifying the rest of the Tickertext should work by changing the color attribute of the #marquee-text element. I have done so in various themes already. Maybe you have to dump your browsercache to see it getting applied? It should work though I have to admit that I do most of my themeingwork based on pfSense 2.0 as 2.0 requires some additional elements like a logonpage and so on and as usually these themes are backwardscompatible (for the most part, some elements are not themeable but hardcoded in the 1.2 branch, maybe even the tickertape?).

    Oh, and btw, you should work with a 2.0 based theme if you want to make it 2.0 ready as this css includes additional elements for things that are not present in 1.2. Get a 2.0 snapshot and download the nervecenter theme from there, then copy and paste your modifications over. A 2.0 theme will work on a 1.2 just fine but this way your theme is 2.0 ready too :)

  • Mmmm, I think I'm gunna have to run me a v2 dev box along side my 1.2.3 production box I've been building this theme on :P

  • Just updated my last post. Yes, you should develop on 2.0, however be prepared that not all elements that you can change on 2.0 will show effect on 1.2 due to some hardcoding in 1.2.

  • I was hoping to run a dev Hyper-V v2 VM but there is a freebsd bug that prevents them shutting down. So I'll have to go for full hardware - its all good fun.

  • As long as you keep the red/grey color for the theme all is well for 1.2, however a complete colorchange can only be done for 2.0 (see 2 examples attached). I use parallels on my mac to do the developing on. Vmware works fine too of course.

  • …and another one

  • I have now made it compatible with v2.A - the only single difference I can see at this stage using the same theme between v1.2.x and v2.A is the little pen icon doesn't show up under 1.2.x even though it is there in the icon folder? I'm sure I'll figure it out.

    I would also like to get rid of the grey background on the login page but I can't for the life of me find the relevant part of the all.css file. As I'm no developer I have to go through by trial and error changing colours until I find the right one.

  • Figured out the pen icon thing - this is one of those hard coded differences between v1.2.x and v2.A Hoba was on about, I would have to (I think) change every reference to "formfld" to "formfld unknown" in the system.php and other files too I suppose.

    I think we can live with the small gap when running the theme under v1.2.x. I hope the pen doesn't do more than just look like a pen  :D

  • The wizard pages and the login page will use a different css if available in 2.0. see the original nervecenter 2.0 theme. You'll see a login.css and a wizard.css. Those are there for being able to use different backgoundwallpapers for example.

  • Thanks for that Hoba, I have now tweaked the logon page and the wizard and have tried the theme under both v1.2.3 and v2.0A in IE8, Firefox v3.06 and Google chrome (my preferred). There are some tiny browser quirks but its still usable and pleasing to the eye. I use to hate the red colour in pfSense but if you swamp it all over the screen it's not so bad.

    I'm still yet to get any real feedback as to whether people actually like it and whether there are any bits they like or dis-like.

  • Great Job! I really like it. We should include it with the official builds to be selectable  :)

  • Cheers,

    I wasn't as adventurous perhaps as I could have been as I wanted it to be compatible with both 1.2.x and 2.0 when it comes out. Also the muddy red colour has become somewhat of a trademark I think and I quite like it now.

    I would like to know what I can delete from the theme folder as I don't want to delete something that may be required in an up and coming feature that I'm not aware of, I'm sure a nice dev will do the honors though.

    I did think maybe I'd get the odd post saying "I like it but what if the freebsd icon was red?" for example, Well it looks like this if your interested. But I think I'll keep it gray.

  • I like the one with the grey freebsd logo better. I'll work on a new theme during the hackathon (which will start this saturday). I'm going to clean up the new theme from old files as much as possible. Once this is done you can have a look at this to see which files have been removed and clean up your theme as well then.

  • Well, looks like we are not allowed to add your theme to the official distribution due to copyright issues with the used logos. Neither the freebsd logo is freely usable without permission nor the firefox and chrome logo I guess. I have to change my hackathon theme too now. See for further details on the freebsd trademarks. Maybe you can strip them from your theme?

  • That's fine, I kinda guessed that might be the case with the firefox and chrome logo but I can't figure the freebsd one? I mean pfsense is freebsd - If its ok to distribute the whole OS surely one can ship the logo too. I'm not too bothered I mean I know how these things work - I look at it that your promoting their product as well as yours/ours but they look at it like you may imply you are affiliated with them. They don't want the freebsd forums filling up with pfsense users bitchin that this or that doesn't work.

    I got the same response from Intel in my other case badge thread;,14783.0.html

    Thank you for your enquiry.

    Intel will not approve the use of a logo that bears a resemblance to any of its intellectual property, if it is designed to ‘not look out of place’ next to our badge then it will cause confusion that a product is owned or affiliated with Intel. We would request that you amend your proposed logo to one which would compliment our badge as opposed to bearing a resemblance to it.

    Once again, thank you for asking.

    Best regards


    I can easily remove the contentious bits, I'll just have to be more creative with their replacements  :P


    I'm gunna ask - you never know!

  • I'm not a lawyer, and the usage terms make my head hurt, but this:

    Any individual, organization, or company may use the Marks to show support for the Project or as part of a notice to users that your product incorporates the FreeBSD operating system.

    Seems to cover the usage in a pfSense theme.
    The numbered requirements seem to be only if you use the logo on packaging or for product promotion-

    The Marks may not be used on product packaging or to promote products and services, or to create the impression of an endorsement or certification unless you comply with all of the following:

    1. Anyone who uses any of our Marks is required to comply with these use guidelines, as well as the requirements in your license, if you are a licensee. For special or unusual projects, we may ask you to comply with requirements specific to your use.

    2. You must request our permission to use the Marks at prior to any use of the Marks, and we may grant or withhold permission to use the Marks in our sole discretion.


  • Well I have a reply from The FreeBSD Foundation and I think its quite a fair responce!

    The problem I see with your request, is that you tied the logo with the pfSense logo.

    Our trademark usage terms and conditions states:

    "If we grant you permission to use the Marks, your use of the Marks must always be fully and clearly reproduced, and you may not incorporate any of our Marks into the trademarks, service mark, logos, or name of your business, project, or organization, unless you have the express prior written permission of the Foundation."

    You need to separate our logo from yours. That way your logo identifies your organization/project and our logo represents FreeBSD separately.

    Please submit new artwork for us to consider.

    Let me know if you have any questions.


    The FreeBSD Foundation

    Like I said I'll just have to be a little more creative and I can and will still use the freebsd logo as long as I don't change/mask/mix it in any way plus seek approval which I will do.

  • Well I've replaced the FreeBSD logo with a globe, now I can't decide on - lens flare or not lens flare!

  • Rebel Alliance Developer Netgate

    I'd have to vote for "no lens flare"  :)

  • I would vote for the lens flare

  • +1 for the lenseflare :-)

  • yep, lensflare.

  • flare ;)

Log in to reply