NinjaFirewall (Pro/Pro+ Edition) v3.3 new user interface.

NinjaFirewall (Pro/Pro+ Edition) v3.3 has a brand new user interface.
It is responsive, makes use of Bootstrap and jQuery, and looks pretty much like our website user accounts section. You can even customize it (see below).

Why a new user interface?

Since its first release, in December 2011, NinjaFirewall has been continuously improved: performances, security rules, filtering engine, portability (WP/WP+ Edition) etc. But there’s one thing we never updated, the user interface. It was time to change that.

The left menu was replaced with a top navigation bar in order to maximize the width for portable devices.

Menu items were reorganized:

Both the “Firewall Policies” and “Access Control” pages were split into a few tabs:

You don’t need to save your changes before switching to another tab. You can switch back and forth between the tabs, change options and then click the “Save” button afterwards.

Help is using Bootstrap’s Modal (and its content was updated):

That’s all. All the rest is identical to the previous versions because we know our users don’t like changes. Neither do we!

User style sheet

You can customize NinjaFirewall’s UI (fonts, colors etc) very easily with your own style sheet:

  • Create a style sheet and name it user.css
  • Upload it into the {NinjaFirewall_folder}/static/ folder

You can verify that NinjaFirewall detected and loaded it from the “Account > Options > Appearance” section:

The style sheets loading order is:

  1. Bootstrap ({NinjaFirewall_folder}/static/bootstrap.min.css).
  2. NinjaFirewall ({NinjaFirewall_folder}/static/styles.css).
  3. User style sheet ({NinjaFirewall_folder}/static/user.css).

Internationalization

Internationalization, aka “i18n”, now uses the GNU gettext package so that it is much easier than before to translate NinjaFirewall into other languages. We will ship v3.3 with the default en_US POT file (locale/ninjafirewall_pro.pot) that can be used by translators with software such as Poedit. Note that NinjaFirewall also includes the French fr_FR languages files in the package:

If you want to translate NinjaFirewall into your language, please follow the files structure below:

Make sure your server has a corresponding locales installed, otherwise your language file will not be loaded. Installed locales can be viewed with the following shell command: $ locale -a