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.)

Members Only

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; }

eg 

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.
Template Classes
Standard Classes used or Detected by the CMS.
Custom Arrows on Dropdowns
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.

FAQ Topics

The Basics

Building your site

Advanced Page Types

E-Commerce

Email & Membership

Promoting your site

Advanced

Search for help:

> Home
 


Menu Sitemap
Categories