CMS and Template Classes


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


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


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


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


CSS Targeting Specific Pages / Templates

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





Index Previous Next