Ultrawide Content

The website themes use a template width value .cmsUsualWidth as set in the stylesheet to maximise the width of website content. This is to ensure a good experience for customers as page layouts such as contact forms and gallery pages (especially the smaller thumbnail ones) are designed to work at a certain width.

This page details how you can alter your theme in order to make page content go full width, if you have chosen a template that is not ultrawide by default.

Ultrawide / full width content in the Contentbox Editor

Contentbox is the editor to that makes it easy to create full width content. By default Contentbox sections default to the .cmsUsualWidth value, but you can quickly change the content width property to Full.

  1.  Click the BLUE COG (Settings) icon at the top of the section
  2. From the options presented, change the CONTENT WIDTH dropdown to full.
  3. Content will then stretch full width within the editor

System generated pages, TinyMCE and Drag-drop pages to not go full width by default

As page content is intended to fit nicely within a dedicated area, system generated pages are restrained to a max-width as set in the theme style.css or template A file by default.

Changing a Drag-drop page to go full width

The best approach to make a drag drop page go full width is to change it to a Contentbox page and set to full width as per the instructions above.

Changing a Drag-drop page to Contentbox

Changing a system generated page to go full width

While it is possible to change system generated pages to go full width, it is recommended you only do this for pages that use FLEXIBLE GRID layouts. These are not fixed column layouts and will reorganise the amount of columns depending on the width of the browser. Using any other layout will not give a good result.

Available Flexible Page Layouts

Currently there are only a couple of layouts available for this purpose.

  • Gallery Flexible Grid  (Gallery Page)
  • Gallery Flexible Grid 6/4  (Gallery Page)
  • Shopping Flexible Grid (Shopping Cart Page)
  • Flexible Grid (Categories Display Format) - set via E-COMMERCE > CUSTOM DISPLAY OPTIONS


Example of a fullwidth gallery page using the Gallery Flexible Grid 6/4  (Gallery Page) layout.

Adding some custom CSS to enable full width content

It is possible to set any system-generated page to go full-width by targetting a template layout with a CSS rule. Every template can have up to 8 different template files A-H.
When using a CSS rule you do not need to add a template layout to the template area - it will use the existing template A if no file found, but allow the CSS rule to work.

You can find a rule for setting the max-width of the content of any page assigned to TEMPLATE B to 90% below.

This rule should be added to your content.css stylesheet file.

.cmsTemplateB #ContentCMS{   
   max-width: 90%!important;
}

Changing the page to use the full width template

You can then change any page to template B. See this help-faq for more info.

Template Variations A-H

Changing a your Category List / Product List page to go full width,
without affecting the Product Detail page

It is possible to allow your main shopping layout which can contain your Categories and Products in a list / grid format, to go full-width but keep the Product Detail width page narrow,
by targetting only the list page with a CSS rule. You can find a rule for setting the max-width of the content on this page to 90% below.

This rule should be added to your content.css stylesheet file.

.shoppingListBody #ContentCMS{
   max-width: 90%!important;
}

Index Previous