FocusOPEN Styling and Branding: An Overview For Designers

Required Skills

This article assumes that the reader has a basic understanding of:

  • HTML
  • CSS
  • JavaScript


This article aims to provide basic instructions for the various controls, techniques and features that designers can use to create and modify brands within FocusOPEN.

The Anatomy of a Brand

All editable brand files are located in the following directory:


With each individual brand having its own subfolder:

Screenshot of multiple brands directory structure

The main or Primary Brand is located in the following folder:


Brand folders should be numerically named, e.g. Brand_1, Brand_2, Brand_3 etc. This enables the use of programmatic referencing throughout your brand files and any associated functions and templates, for example when referencing the location of auxiliary CSS or JavaScript files. Every time a new brand is added to the FocusOPEN system, the brand ID increments by one. The default brand for a fresh install of FocusOPEN is located in the Brand_1 folder.

The Skin Files

Each brand is made up of a number of CSS and image files - also called a 'skin' or 'web skin'. Skin files are stored within a folder named 'UI'. If you wish to create a new primary brand, we recommend that you make a copy of your primary brand folder before you start work, should the need arise for a roll-back.

Additional Include Files

As later explained, each brand can also have its own JavaScript files. There are two dedicated files, and that should be present in each brand. They reside in the following folder:


Custom Homepage Template Files

If your FocusOPEN brand utilises custom homepage templates, the auxiliary files for the template should also reside within the corresponding brand folder. For example, the following directory structure reflects a brand which utilises the Magazine template:

Screenshot of Magazine template structure

Changing the Logos

Perhaps the most commonly modified element for a brand is the logo. There are five separate locations where your logo appears within FocusOPEN - each one will require editing for brand continuity across your system. Note the image dimensions (especially height) when changing your logo - if your logo is taller (higher), you should edit the appropriate CSS file. All links are relative to your brand's main directory.

Login Logo

File: login.aspx Image Source: \Brand_x\UI\images\core\hdrs\externalHdr.gif CSS style: ExtHdrPanel CSS file: \UI\External.css

Catalogue Logo

File: \Default.aspx Image Source: \Brand_x\UI\images\core\hdrs\CatalogueHdr.gif CSS style: CatHdrPanel CSS file: \UI\Styles.css

Asset Pop-Up Logo

File: [your_webroot]\Popups\AssetInfo.aspx Image Source: \Brand_x\UI\images\core\hdrs\DetailsHdr.gif CSS style: DetailsHdrPanel CSS file: \UI\Styles.css

Admin Logo

File: \Admin\Default.aspx Image Source: \Brand_x\UI\images\core\hdrs\AdminHdr.gif CSS style: AdminHdrPanel CSS file: \UI\Admin.css

Help Logo

File: \Help\index.htm Image Source Source: \Brand_x\Help\images\helpHdr.gif

The Brand CSS Files

To aid organization and separation of each brands' various styled elements, the CSS for any given brand has been separated into a number of different files, each targeting a specific set of HTML elements. The following sections describe each of these CSS files, their contents and the DOM elements they're responsible for styling.


As might be expected from its name, this stylesheet deals primarily with styling the administrative areas of the FocusOPEN application.


A div containing the other layout elements


Encloses the logo/header image


Encloses the main admin navigation links (not the lower tabs)


Controls the layout of the admin information (breadcrumbs)


The wrapper for the main admin page content


Layout div between the main page content and the admin footer


The main admin footer, containing additional logo or company information


Controls the position and appearance of the various admin page headings


The container for elements such as search and filter forms


Provides feedback on search and filter results

For additional table styles, see Basic.css, where the 'zebra-striping' effect occurs.


Provides highlighted table cell/row styling as shown above.


This stylesheets contains basic layout and helper styles including body, floats, colours and default text decoration styles such as bold, italic and alignment. It also controls the look of basic form elements such as buttons, dropdown menus and input fields.


A general purpose style to float elements to the left of the layout. 'Floating' an element can be used to effectively give the element no height or width, allowing other surrounding elements to 'flow' around it. Often used to create side-by-side, non-table layouts.


The same as above, but elements are pushed to the right edge of the layout.


This style is applied to form elements such as input fields, dropdown menus and text areas.


Applies a bold font style.


Applies to submit and reset buttons within forms.


Similar to AdmTblPanel (above) - defines the appearance of the catalogue results summary and pagination.


Defines the appearance of table cell/rows.


Defines the appearance of alternate table cell/rows and provides the 'zebra-stripe' effect.


This stylesheet deals primarily with the login screen.


Defines the position of the logo used on the login page.


A wrapper div for the main login screen elements.


Controls the appearance of the additional login information panel (e.g. the terms and conditions link).


Another wrapper that further controls the layout of the login form elements.


Controls the positioning of the login table.


This stylesheet controls the styles for the homepage. Additional styles for homepage template widgets should be contained within their own stylesheets.


The main homepage wrapper.


An additional wrapper div for the homepage layout.


Defines the layout and appearance of the left-hand column on the homepage.


Controls the appearance of the main body of text on the homepage.


A container element for the right-hand column of the home page.


Defines the layout of the homepage footer containing company logo and additional links.


This stylesheet contains the styles responsible for the appearance of the lightbox and cart menus.


This is the largest of the stylesheets and contains classes that apply to most pages throughout the FocusOPEN application, including the homepage, the main catalogue search results, the lightbox and the cart.


Defines the layout of the main catalogue header/logo element.


Controls the layout of the main navigation links (not the lower tabs).


Defines the appearance of the tab links.


Defines the appearance of the navigation information strip ()including the small 'search tips' link).


A wrapper div which contains the search, filter and category elements.


Defines the appearance of the search, filter and category form elements.


A wrapper div for the catalogue search results main page elements.


Defines the layout of the view type controls (e.g. gallery or list).


A container element for each of the gallery view thumbnails.


Defines the element containing the catalogue asset thumbnail.


Defines the layout of the small asset icons such as add to lightbox and download.


Controls the appearance of the pagination dropdown and page links.


A container div for the left-hand elements of the main lightbox page.


Defines the appearance of the collapsible panel for lightbox notes.


Controls the layout of the title block in the switchable Assets/Lightboxes side panel.


A container div for the Assets/Lightboxes side panel.


Defines the style for the main content in the Assets/Lightboxes side panel.


Defines the layout of the view type (e.g. gallery or list) and pagination controls on the lightbox/cart page.

Using Javascript within Brands

Brand-specific JavaScript and jQuery functions and libraries should be stored within the corresponding 'Includes' folder, for example:


Within this folder, and as part of the default installation, are two include files: and JavaScript that has scope across the whole application should be placed within the file, and script pertaining to the home page only should be placed within JavaScript does not necessarily have to be added to this file, and you may wish to ignore these files in favour of referencing your own scripts or script libraries.

Detecting the Primary Brand ID

There are often situations where a developer will need to programmatically detect which brand they are operating under. For example, the need to reference a brand-specific stylesheet from a homepage template. This can be achieved using a simple API call from JavaScript as the following example demonstrates.

// Get/set the session API token
var SessionAPIToken = getAPISessionToken();

// Get the user's primary brand ID - for referencing brand-specific stylesheets etc.
$.getJSON("/scripts.REST.users.getuserprimarybrand.ashx?SessionAPIToken="+SessionAPIToken, function(json) {
// Error check JSON response
if (json.errors.code == 0){
// Put result into a variable so it can be used to reference the brand
var primaryBrandID =;
} else {
// Error was encountered

Update: from FocusOPEN 3.4.4 onwards, the getUsersPrimaryBrand JavaScript function can be called to retrieve this directly via a variable that is written server-side.

focusopen-designer-branding-styling-overview/start.txt · Last modified: 2014/01/14 03:20 by admin