Branding

Branding

The N2ACD Flow Editor can be branded through configuration to use unique colours and logos for each installation. There are three steps required to configure branding:

1. Create a custom CSS file for each brand that holds the styling required for branding.
2. Upload this CSS file and any associated assets to the N2ACD GUI node(s), placing the files in /var/lib/n2acd-fe/html/branding/<brand>/, where <brand> is a unique name for the brand.
3. Configure the N2ACD Flow Editor configuration file /etc/jarvis/n2acd-fe.xml on the API node to reference the new branding definition(s).

Custom CSS

The N2ACD Flow Editor is a web application, built on standard web technologies including CSS, HTML, and JavaScript. Branding primarily relies on applying CSS to the user interface to override the product 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 specified by the N2ACD Flow Editor configuration file /etc/jarvis/n2acd-fe.xml.

Translations and Internationalisation

In addition to the theming of the N2ACD Flow Editor user interface, the terms and phrases used in the user interface can be customised for each brand.

To apply translations:

1. Create the brand’s translation directory as /var/lib/n2acd-fe/html/branding/<brand>/i18n, updating the <brand> to the desired brand’s value.
2. Copy each of the translation files from /usr/share/n2acd/floweditor-gui/gui/htdocs/i18n/ to the new brand directory.
3. Adjust the copied files' text as required.

The first two steps can be completed with the following commands (updating the brand name as required):

mkdir -p /var/lib/n2acd-fe/html/branding/<brand>
sudo cp -Rp /usr/share/n2acd/floweditor-gui/gui/htdocs/i18n /var/lib/n2acd-fe/html/branding/<brand>

Ensure that the brand subdirectory and all files are readable by the system account that is running Apache.

Custom Logo

To include a custom logo on the N2ACD Flow Editor login page, include the following in the brand’s CSS file, where background-image is a link to your custom logo, either on the GUI node’s filesystem or at a URL.

    .login-modal-logo {
        margin-left:20px;
        background-image: url(http://path/to/<filename>);
        background-repeat: no-repeat;
        background-position: left top;
        padding-top:179px;
        margin-bottom:10px;
    }

GUI Node Configuration

Apache is configured on installation to serve all branding files from http://host/n2acd-fe/localisation/ This maps to the directory /var/lib/n2acd-fe/html that contains subdirectories for branding.

API Node Configuration

In order to have the N2ACD Flow Editor use custom CSS for branding, the API node must be configured to instruct it to do so.

In the main N2ACD Flow Editor configuration file /etc/jarvis/n2acd-fe.xml on the API node, locate the following section:

        <config>
            <!-- example branding
                <branding brand_root="/var/lib/n2acd-fe/html/branding/">
                    <brand name="brand1">
                        <css path="brand1/custom.css" />
                        <translation path="brand1/en-gb.json"/>
                        <favicon path="brand1/favicon.ico"/>
                        <selector>
                            <http_host>localhost</http_host>
                        </selector>
                    </brand>
                </branding>
            -->
        </config>

Either copy or uncomment this example branding fragment and update the file accordingly with the location of your brand or brands.

As many brands as required may be included, each within an individual <brand>...</brand> section.

The configuration options for branding are as follows:

Configuration parameters include:

/branding/@brand_root /branding/brand/selector/http_host/text()

Custom CSS Template

The following CSS template can be used as a baseline for custom branding of the N2ACD Flow Editor user interface. Further theming may be applied as required.

The custom CSS file for each brand should be located on disk as <brand_root>/<CSS path>, as set out in the API node configuration section.

    /*
     * Header
     */
    .navbar-inverse {
        background: #131834 url("/n2acd-fe/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;
    }

    /*
     * Custom logo
     */
    .login-modal-logo {
        margin-left:20px;
        background-image: url(/n2acd-fe/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;
    }

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

    footer a {
        color: #FFFFFF;
    }

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

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