☰
Navigation :

Branding

Branding

N2FE can be branded through configuration to use unique colours and logos for each installation. To configure branding there are three key steps required:

  1. Create one custom CSS file for each brand, holding the CSS required for branding.
  2. Upload this CSS file, and any associated assets to the N2FE server, placing the files in /var/lib/n2fe/html/branding/<brand>/, where <brand> is a unique name for the brand.
  3. Configure the N2FE configuration file, /etc/jarvis/n2fe.xml to reference the new branding.

Custom CSS

N2FE is a web application, built on standard web technologies including CSS, HTML and JavaScript. Branding N2FE primarily relies on applying CSS to the user interface, overriding the defaults.

A custom CSS template is included at the bottom of this page. This may be used as a starting point to adjust the user interface style.

This CSS file will need to be placed in the file location as specified by the N2FE Service Configuration.

Translation files

In addition to the theming of the N2FE user interface, the terms and phrases used in the user interface can be customised for each brand. Create the directory /var/lib/n2fe/html/branding/<brand>/i18n, and for each of the translation files stored in /usr/share/n2fe/htdocs/i18n, create copies within the brand directory, adjusting as required.

To include a custom logo on login of N2FE include the following in the CSS file, where the background-image points to your custom logo.

    .login-modal-logo {
        margin-left:20px;
        background-image: url(http://host/localisation/branding/<brand>/logo.png);
        background-repeat: no-repeat;
        background-position: left top;
        padding-top:179px;
        margin-bottom:10px;
    }

Web Server Configuration

Apache will be configured on installation to serve all branding files from http://host/n2fe/localisation/ This will map to the /var/lib/n2fe/html directory that will contain sub folders for branding.

N2FE Service Configuration

To have N2FE use custom CSS for branding, N2FE must be configured to do so. In the main N2FE configuration file /etc/jarvis/n2fe.xml, within the config configuration XML element, include the following XML fragment:

    <branding brand_root="/var/lib/n2fe/html/branding/">
        <brand name="<brand>">
            <css path="<brand>/<filename>.css" />
            <translation path="<brand>/en-gb.json"/>
            <selector>
                <http_host>brand.hostname</http_host>
            </selector>
        </brand>
    </branding>

This XML fragment can be duplicated to allow custom branding for multiple hosts.

** Note that by default this section of the configuration file is commented out. Ensure the XML comment tags are removed to enable the branding. **

Configuration options include:

Option Description
brand_root The root directory where the branding is located. This should not be changed unless the Apache configuration for the localisation directory is also changed.
name The name for the segment of custom branding. This should match the subdirectory within the branding directory on disk.
css path The path to the custom CSS file, from the brand_root directory.
http_host The host name to apply the selected branding to. This is the host that users will use to access the N2FE instance.
translation path The path to the custom I18N translation file, from the brand_root directory.

Together, the brand_root, and CSS path options point to the file location of the brands CSS file.

Custom CSS Template

The following custom CSS template can be used as a baseline for branding the N2FE user interface.

    /*
     * For the header
     */
    .navbar-inverse {
        background: #131834 url("/n2fe/localisation/branding/localhost/logo-dark-background.png") no-repeat;
        background-size: contain;
    }

    .navbar-inverse .navbar-brand {
        color: #009FEE;
    }

    .navbar-inverse .navbar-header {
        padding-left: 160px;
    }

    .navbar-inverse .navbar-nav>li>a {
        color: #ffffff;
    }

    span.navbar-brand:hover {
        color: #ffffff !important;
    }

    /*
     * For a custom Logo
     */
    .login-modal-logo {
        margin-left:20px;
        background-image: url(/n2fe/localisation/branding/localhost/logo.png);
        background-repeat: no-repeat;
        background-position: left top;
    }

    /**
     * Dialog boxes
     */
    .modal-header h3,
    .modal-header h4 {
        color: #009FEE;
        background-color: #131834;
        border-color: #131834;
        border-radius: 5px;
    }

    /**
     * For the footer
     */
    footer, footer * {
        background-color: #131834;
        color: #009FEE;
    }

    footer a {
        color: #FFFFFF;
    }

    /**
     * The login dialog specifically
     */
    .login-modal-logo {
        padding-left: 10px;
        padding-bottom: 10px;
    }

    /**
     * Nodes
     */
    .node-title {
        color: #009FEE !important;
        background-color: #131834 !important;
    }