FocusOPEN Styling and Branding: An Overview For Designers

Required Skills

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

  • HTML
  • CSS
  • JavaScript

Overview

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:

\WebRoot\Brands\

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:

\WebRoot\Brands\Brand_1\

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, All.inc and Home.inc that should be present in each brand. They reside in the following folder:

\WebRoot\Brands\Brand_1\Includes\

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.

Admin.css

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

AdmWrapper

A div containing the other layout elements

AdmHdrPanel

Encloses the logo/header image

AdmNavPanel

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

AdmHdr

Controls the layout of the admin information (breadcrumbs)

AdmBkg

The wrapper for the main admin page content

AdmAppFtr

Layout div between the main page content and the admin footer

AdmFtrPanel

The main admin footer, containing additional logo or company information

AdmAppHdr

Controls the position and appearance of the various admin page headings

AdmLeftPanel

The container for elements such as search and filter forms

AdmTblPanel

Provides feedback on search and filter results

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

TblCell3

Provides highlighted table cell/row styling as shown above.

Basic.css

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.

Left

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.

Right

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

formInput

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

Bold

Applies a bold font style.

button

Applies to submit and reset buttons within forms.

PanelTxt

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

TblCell1

Defines the appearance of table cell/rows.

TblCell2

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

External.css

This stylesheet deals primarily with the login screen.

ExtHdrPanel

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

ExtBkg

A wrapper div for the main login screen elements.

ExtDiv

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

ExtMrg

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

ExtTblMrg

Controls the positioning of the login table.

Home.css

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

HomeBgk

The main homepage wrapper.

HomePanel

An additional wrapper div for the homepage layout.

HomeMrgLeft

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

HomeText

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

HomeMrgRight

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

HomeFtrPanel

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

Menus.css

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

Styles.css

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.

CatHdrPanel

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

CatNavPanel

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

CatTabPanel

Defines the appearance of the tab links.

CatSrcHdr

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

CatSrcPanel

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

SrcPanelControls

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

SrcBkg

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

CatAppPanel

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

SrcGridBkg

A container element for each of the gallery view thumbnails.

ImgThbMrg

Defines the element containing the catalogue asset thumbnail.

ImgIcons

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

AppPageView

Controls the appearance of the pagination dropdown and page links.

LbxLeftPanel

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

LbxNotesPanel

Defines the appearance of the collapsible panel for lightbox notes.

LbxCtrlHdr

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

LbxCtrlBkg

A container div for the Assets/Lightboxes side panel.

LbxCtrlMrg

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

LbxAppPanel

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:

\WebRoot\Brands\Brand_1\Includes\

Within this folder, and as part of the default installation, are two include files: All.inc and Home.inc. JavaScript that has scope across the whole application should be placed within the All.inc file, and script pertaining to the home page only should be placed within Home.inc. 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 = json.data.brand_id;
            
            
} else {
        
// Error was encountered
alert(json.errors.description);
            
}
});

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