CMS and Template Classes

template

.cmsUsualWidth - standard class used for setting content wrapper widths (width set in template). used as part of contentbox detection ( .cmsUsualWidth.containsContentBox ).

content

table.mobileBreakTable - break a table in block elements for mobile.
table.tableScroll - make a table scrollable horizontally for mobile.

.hideForDesktop, .mobile - show in mobile mode only
.hideForMobile, .desktop - show in desktop mode only
.hideForHome - hide content when set to homepage
.cmsHidden - hide content

.red { color: red; }
.blue { color: blue; }
.green { color: green; }
.flex {display:flex;}
.noDecoration { text-decoration: none; border: none; background: none; color: inherit; }

mobile specific

.mobileTextLeft - force text align left on mobile only
.mobileTextCenter- force text align centre on mobile only
.mobileTextRight - force text align right on mobile only
.mobileWidthFull - force width 100% on mobile only
.mobileWidthHalf - force width 50% on mobile only

lazyload

.cb-slider - To have the CMS detect and load slickslider.

.icon - load ionicon set.

.is_video_bg - load youtube-video-bg.js.

.is-animated - load appear animations js.

.requiresIonIcons - force load ion-icons into the page.

snippets

.is-remove-on-save - remove the snippet content on page save (do not show on live site.)

会员专区

When members are logged in, additional classes are added to the <body> tag, so you can tweak almost any CSS element based on a customer being logged in.

eg hide GST inclusive pricing from logged in members

body.cmsLoggedInMember .mainPrice { display: none; }

body.cmsLoggedInMember .otherTaxPrice { display: block; font-size: 100%; }

eg hide GST exclusive pricing from public users (not logged in)

body.cmsPublicViewer .otherTaxPrice { display: none; }

CSS Targeting Specific Pages / Templates

Again in the body , you can target elements based on their specifc page, or shopping category, or site template

body#pageid9876543

body.inCategory123456

body.cmsTemplateA

body..cmsTemplateB

More From This Section

Getting us to customise your template

Do you require a more customised look and feel, that reflects the professional branding needs of your company?

Importing a new template

tutorial on how to import a new design template on a site by site basis.

Specifying the DOCTYPE

Where can I set the DOCTYPE for my website

Custom template tags [TAGS] overview

Find out what the functionality specific tags will add to your template, eg how to add Zone2 content areas, or split menus.

CSS Menus

Here is some example CMS menu code

CSS Menus over Google Adsense

This seems to fix it if your CSS menus won't hover over google adsense... #menu { position:relative; z-index: 100; }

Photoshop Guidelines

Need some guidelines for designing a website intended for our CMS?

Template Variations [A-H]

Advanced users who have knowledge of HTML have the ability to create up to eight layout variations for the template

Stylesheets and CSS

Learn about Stylesheets and CSS

Showing products promotion status in the product list

Products now have classes added if set with a promotion status e.g featured, on sale. You can target these to add badges e.g. 'Hot', 'Sale' etc via CSS

CMS and Template Classes

Stylesheet classes tips for the pros. Learn more about some of our common CSS classes and how you can use them.

Add cartcount number to a template

Add a number that shows the amount of items in the cart somewhere in the template.

Custom Arrows on Dropdowns

Template Classes

Standard Classes used or Detected by the CMS.

Contentbox Background Mask

You can mask the shape of a background image or background colour.

Changing 404 Page Not Found

404 Errors happen when you delete a page or change a filename. It is best if you redirect these pages to a live page, but if you would like to change how your 404 pages look, follow these steps.

template

content

mobile specific

lazyload

snippets

会员专区

CSS Targeting Specific Pages / Templates

More From This Section

FAQ Topics

The Basics

Building your site

Advanced Page Types

E-Commerce

Email & Membership

Promoting your site

Advanced

API - System Integration