The Standard In Detail

Where possible, please use and adapt the existing html and classes rather than creating new ones, to keep consistency across sites and make it easier for others to understand your code.

The following is based on the bespoke build base theme, although much of this will be broadly similar for other themes. The following is explained in the order it appears within the file:

Import all common xsl’s – this brings in files from the common folder of our CMS, and imports the installed module file, which you will need when adding new modules to a site or amending existing modules.

Output type – this needs to be included to start the process running and should not be edited.

Theme variables – this section calls in the variables from the eonic.theme.config which are usually changed through the CMS’s site theme settings tab. It is unlikely that you will need to make any changes here.

Core template variables – this brings through some default variables used elsewhere in the code. You are unlikely to need to make changes here.

Theme CSS – this imports the .less files from the theme, which are used to compile all the other css files. If you need to add new css to a theme, for example from a plugin, it is better to import the new file through the bootstrapCustom.less file, rather than adding it here. This is because the less file compiles all css into a single file which reduces load times.

Theme JS – this is where javascript files are imported. If you need to import a new js file to your theme it can be done here, although by default each theme has its own js file already imported, called “theme-specific.js” where you can write new javascript.

Box Styles – If you would like to add a new box style to your site, it can be done here. 

Layout BG styles – In the CMS column modules can make use of different background styles. If you would like to add alternative background styles for column layouts this can be done here.

TinyMCE – If you would like to add new text styles which can be accessed in the CMS wherever tinyMCE is used this can be done here.

Image Size – thumbnails used in the site are automatically resized. The dimensions here will determine the default sizes used for thumbnails. You can change the defaults here, or repeat this template with the match attribute targeting specific elements of the XML in order to control thumbnails for specific modules individually.

Page layout

The first few lines of this section call in the cart and membership features, and probably wont need to be changed. The div # mainTable is the start of the code which will be rendered within the code. 

Header 

by default this contains:

• An area to add a logo,
• An area to add a strapline (if not needed please delete this section to prevent it being used via the CMS)
• The “info menu” – this is a menu of extra links of lesser importance than the main menu, which can be added to the CMS by placing them below a page called “Information”. 
• The cart feature if this is being used on the site
• The membership feature if it is being used on the site

Navigation

By default this is outside the header, but this can be moved within the header when needed. Please note that by default this contains a div with the class of container. This class is a default from bootstrap and forces this div to be the full width of the site. If you are changing the width of the navigation, for example moving it to float on the right of the logo, please remove this class.

Within the navigation the first section has the class “xs-only” and is targeted only to mobile devices and very small screens. The header section mentioned above is not visible on xs screens by default, so this section adds header elements needed on modules:

• The button used to toggle the navigation, which is featured in a dropdown on xs screens
• A duplicate of the logo at a smaller size
• Alternative versions of the cart and membership options which feature icons that trigger dropdown boxes, to fit better on very small screens.

The “MENU” section the features the code used to display the menu of pages which have been set up through the CMS.
The first section only targets small to large screens by default. It also ignores any page called “Information”.
The main menu includes a link to the home page (which can be removed through the site theme settings) and then the main menu template which lists all links at the top level not called information.

The class “nav-add-more-auto” is used in our javascript to stop very long menus from wrapping onto a second line, instead moving them into a dropdown list after the space runs out. To disable this feature, simple remove this class.
Beneath this is the version of the menu targeted at xs screens. It is similar to the main menu but includes the links from the info menu at the bottom, to make them accessible on xs screens.

Top Sub Menu

Under the main menu is the code used to output 5 levels of sub menu, if the site has been set to “top nav” in the CMS. Each level of navigation is within its own section tag here, and the last 2 sections are used to display sub-pages from the info menu. This is only visible on medium screens and above.

Main Content

The code here displays the area of the page under the top navigation and above the site footer. The first part adds classes which indicate whether the sub menu is set to appear at the top or on the left.

Breadcrumb – If show breadcrumb has been set to yes in the site theme settings, it will be output here.

Page with side nav – If the menu position has been set to “top main menu with sub menu appearing in a row beneath” this section of the code will add a left column in to any top level page with children or any child page. You can change the width of the left column using the eonic.theme.config file rather than amending the code here. If your site is set to “menu down the side” this section of the code will be used for all pages. If your site is set to “top nav” this section will not be used. This is only used by medium screens and above.

Page with no side nav – this section will be used if you have set your site to “top nav” or you are on a top level page with no children, the home page or in the cart.

Both the page with side nav and page with no side nav sections contain a section tag which adds the main title of the page (if this has been set to yes in the site theme settings) and they apply the template “mainLayout”. This main layout template brings through all the content added to the main section of the page through the CMS (the area between the header and footer).

Sub nav for xs screens – this sections is only featured on xs and small screens. Since the top and side sub menus are not featured on xs and small screens, this area outputs the sub menu for the current page just above the footer, under the main content.

Footer

This section is set up as a sticky footer by default. It includes an area to add content through the CMS, as space for a copyright menu and a link to the site for the websites developer.

This is the end of the code displayed in the browser. Beneath this are various xslt templates used to control the menu, cart and membership which can be amended if necessary but can often be left as they are.
At the very bottom is the bespoke section where new xslt templates can be added if needed.