This is a generic listing of common classes that can be used on the front end to manipulate the UI in a basic way via "additional classes" option on widgets.
| Class | What It Does... |
|---|---|
push-left | Floats an element left of it's containing element |
push-right | Floats an element right of it's containing element |
text-left | Left text alignment to the element |
text-right | Right text alignment to the element |
text-center | Centre text alignment to the element |
price-right | Right text alignment for pricing |
no-print | Forces the element to not print |
cv-is-hidden | Forces the element to not render in the UI |
spacing-top | Adds spacing to the top of the element |
spacing-right | Adds spacing to the right of the element |
spacing-bottom | Adds spacing to the bottom of the element |
spacing-left | Adds spacing to the left of the element |
ico-left | Left Icon alignment within an element |
ico-right | Right Icon alignment within an element |
cv-is-processing | Ads a "processing" spinner to certain elements (primarily buttons) |
cv-is-disabled | Ads a "disabled" state to certain elements (primarily buttons and input boxes) |
default background | background colour shading |
default text | text colour |
primary background | background colour shading |
primary text | text colour |
secondary background | background colour shading |
secondary text | text colour |
alternate background | background colour shading |
alternate text | text colour |
black background | background colour shading |
black text | text colour |
info background | status colour background shading |
info text | status text colour |
success background | status colour background shading |
success text | status text colour |
warning background | status colour background shading |
warning text | status text colour |
error background | status colour background shading |
error text | status text colour |
no-mobile | Forces a display none via the style sheet for "mobile" breakpoints in the UI |
no-desktop | Forces a display none via the style sheet for "desktop" breakpoints in the UI |
mobile-only | Forces a display none via the style sheet for "desktop" breakpoints in the UI |
grid | Starting point of a grid layout |
grid-row | A row within a grid layout |
container | Contains content within a grid layout |
col-#-# | Various width within a grid row Use in combination with the other col-#-# classes- As long as a row adds up to 100% ie: col-1-3 + col-2-3 (1/3 + 2/3) = 100% ie: col-1-4 + col-3-4 (1/4 + 3/4) = 100% ie: col-1-4 + col-1-2 + col-1-4 (1/4 + 1/2 + 1/4) = 100% |
col-1-1 | 100% width within a grid row |
col-1-2 | 50% width within a grid row |
col-1-3 | 33.3333% width within a grid row |
col-1-4 | 25% width within a grid row |
col-1-5 | 20% width within a grid row |
New in 2022 Themes Onwards
cv-debug | Testing / Debug highlight |
spacing-top-large | Adds large spacing to the top of the element |
spacing-top-small | Adds small spacing to the top of the element |
spacing-bottom-large | Adds large spacing to the bottom of the element |
spacing-bottom-small | Adds small spacing to the bottom of the element |
spacing-left-large | Adds large spacing to the left of the element |
spacing-left-small | Adds small spacing to the left of the element |
spacing-right-large | Adds large spacing to the right of the element |
spacing-right-small | Adds small spacing to the left of the element |
rounded | Adds a standard border radius on all corners |
rounded-top | Adds a standard border radius on top left and top right corners |
rounded-bottom | Adds a standard border radius on bottom left and bottom right corners |
rounded-left | Adds a standard border radius on top left and bottom left corners |
rounded-right | Adds a standard border radius on top right and bottom right corners |
rounded-top-left | Adds a standard border radius on top left corner |
rounded-top-right | Adds a standard border radius on top right corner |
rounded-bottom-right | Adds a standard border radius on bottom right corner |
rounded-bottom-left | Adds a standard border radius on bottom left corner |
rounded-none | Removes border radius |
| dots-rounded | Adds rounded dots the sliders |
| dots-outside | Moves owl-dots below the slider |
| dots-small | Creates small owl dots when dots-rounded is also applied |
| dots-medium | Creates medium owl dots when dots-rounded is also applied |
| dots-large | Creates large owl dots when dots-rounded is also applied |
clearfix | Clears floats within an element |
display-block | element display |
display-flex | element display |
display-grid | element display |
display-inline | element display |
display-inline-block | element display |
display-inline-flex | element display |
display-table | element display |
display-table-row | element display |
display-table-cell | element display |
visible | element opacity 1 |
invisible | element opacity 0 |
push-none | counter a float left or float right |
position-static | Default value. Elements render in order, as they appear in the document flow |
position-relative | The element is positioned relative to its normal position, so "left:20px" adds 20 pixels to the element's LEFT position |
position-absolute | The element is positioned relative to its first positioned (not static) ancestor element |
position-fixed | The element is positioned relative to the browser window |
position-sticky | The element is positioned based on the user's scroll position A sticky element toggles between |
grey-box | Generic grey box |
white-bubble | White bubble box with shadow |
hover | Hover with shadow effect |
hover-basic | Hover with no shadow effect |
text-ellipsis text-truncate | Make tex... Need to set a max-width along with this |
text-justify | Sets formatting to "justify" format - common used in article / newspaper style text. |
black text | text colour |
black background | background colour shading |
grey text | text colour |
grey background | background colour shading |
white text | text colour |
white background | background colour shading |
pink text | text colour |
pink background | background colour shading |
red text | text colour |
red background | background colour shading |
orange text | text colour |
orange background | background colour shading |
yellow text | text colour |
yellow background | background colour shading |
green text | text colour |
green background | background colour shading |
blue text | text colour |
blue background | background colour shading |
aqua text | text colour |
aqua background | background colour shading |
break-normal | Word break - browser default |
break-words | Work break - break upon word end |
break-all | Word break - break upon size limit (can be mid word) |
truncate | Text Ellipsis eg "Text Elips..." |
uppercase | Force uppercase text |
lowercase | Force lowercase text |
capitalize | Force capitalise text |
normal-case | Reset to default text transform state |
underline | Adds underline to text |
line-through | Adds line-through (or "strike through") to text |
no-underline | Removes underline from text |
box-border | Set box model of element to border box - note this is the default & recommended box model |
box-content | Set the box model of element to be content box |
opacity-full | Sets opacity to 0 |
opacity-very-high | Sets opacity to 0.2 |
opacity-high | Sets opacity to 0.4 |
opacity-mid | Sets opacity to 0.5 |
opacity-low | Sets opacity to 0.6 |
opacity-very-low | Sets opacity to 0.8 |
opacity-none | Sets opacity to 1 |
font-size-none | Font Size 0px ** For edge case purposes to hide text ** |
font-size-minimum | Font Size 12px ** Minimum font size as recommended by Google ** |
font-size-small | Font Size 14px |
font-size-regular | Font Size 16px ** Base Font Size of Theme ** |
font-size-medium | Font Size 18px |
font-size-xlarge | Font Size 26px |
font-size-xxlarge | Font Size 32px |
font-size-xxxlarge | Font Size 42px |
font-size-jumbo | Font Size 48px |
font-size-full | Font Size 100% |
desktop-products-per-row-one | Product Grid - force to be 1 per row on Desktop. Apply to "Product List Grid" widget |
desktop-products-per-row-two | Product Grid - force to be 2 per row on Desktop. Apply to "Product List Grid" widget |
desktop-products-per-row-three | Product Grid - force to be 3 per row on Desktop. Apply to "Product List Grid" widget |
desktop-products-per-row-four | Product Grid - force to be 4 per row on Desktop. Apply to "Product List Grid" widget |
desktop-products-per-row-five | Product Grid - force to be 5 per row on Desktop. Apply to "Product List Grid" widget |
desktop-products-per-row-six | Product Grid - force to be 6 per row on Desktop. Apply to "Product List Grid" widget |
product-tile-shaded | Product Grid / List - Applies an 2 tone shaded effect to product tiles (white and light grey) |
align-center | Center a block element within the zone it lives in |
max-width-100 | Set's a elements maximum width to be 100% |
max-width-90 | Set's a elements maximum width to be 90% |
max-width-80 | Set's a elements maximum width to be 80% |
max-width-70 | Set's a elements maximum width to be 70% |
max-width-60 | Set's a elements maximum width to be 60% |
max-width-50 | Set's a elements maximum width to be 50% |
max-width-40 | Set's a elements maximum width to be 40% |
max-width-30 | Set's a elements maximum width to be 30% |
max-width-20 | Set's a elements maximum width to be 20% |
max-width-10 | Set's a elements maximum width to be 10% |
cv-animate | Animate an element with a combination of this class and animate.css library classes such as
|
image-greyscale | Sets greyscale colouring to image |
image-hover-no-greyscale | Upon hover/focus of an image with "image-greyscale" applied, the image will restore to its original colouring |
caption-left | Set's a Banners Caption to the left of the element |
caption-right | Set's a Banners Caption to the right of the element |
side-by-side | Set's a Banners Caption to be 50% width and full height of element |
menu-effect-underline | Applies alternate hover state effect to main navigation items. |
product-gallery-shaded | Shaded effect around product gallery |
product-gallery-grid | Removes main gallery image and sets thumbnail images as large tiles to create a grid effect |
cv-animate | Adds animation support for upon scroll animation (requires cv.css.cvAnimate.js) |
slide-in-bottom | Animation upon scroll where content appears to slide in from bottom upwards |
slide-right | Animation upon scroll where content appears to slide in from right |
slide-left | Animation upon scroll where content appears to slide in from left |
animated | Animate.css support as per https://cvconnect.commercevision.com.au/display/KB/Animation+Support |
zoom-animation | Animated zoom effect on banner slider widget |
notification-bottom-right | Updates the positioning of the system notifications from the top right to be bottom right |
notification-bottom-left | Updates the positioning of the system notifications from the top right to be bottom left |
notification-top-left | Updates the positioning of the system notifications from the top right to be top left |
notification-bottom-center | Updates the positioning of the system notifications from the top right to be bottom center |
Related help
- .css variables in your theme see Using .css variables in Scripts & Styles
- Icon classes see Icon Library
