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