.parallaxBG
Add the parallaxBG class to textOverHeader templates that have a background image. The effect will automatically be removed on mobile due to compatibility.
Button text!.animated class usage
The .animated class will activate the ability to animate html elements. It needs to be paired with the actual animation name using the data-animated variable on the element. You should also add the .noOverflow class to a container wrapping the element so the animation doesn't overlap things.
Example of how to use this class:
<figure class="noOverflow">
<div class="animated" data-animated="fadeInLeft">This div container will fade in left</div>
</figure>
Currently available .animated classes
bounce
bounceIn
fadeIn
fadeInUp
fadeInDown
fadeInLeft
fadeInRight
flipInY
pulse
.m-pad classes
m-pad classes can help you specify default padding and padding for mobile. The current m-pad classes are:
.m-pad10 | .m-pad20 | .m-pad40
To change these padding settings on mobile you can change the m to small or xsmall. For example:
.small-pad10
To only add padding horizontally or vertically, you need to add the -h or -v extensions to the end of the class. These can be added for desktop and mobile classes. For example:
.m-pad10-h | .small-pad10-v
Clear floats
If you are using the .rightAlign or .leftAlign classes for elements such as images, you may not want them to float on mobile. You can use the following classes along with the float classes to clear the floats on mobile:
.small-floatNone | .xsmall-floatNone
bgZoomIn
Currently, the zoom BG class works best with textOverlayHeader templates. You can remove excess elements where needed.
Button text!Zooming Background Images
You can use the following classes currently with textOverHeader templates to zoom in or out the background image on hover:
bgZoomIn | bgZoomOut
Example of implementation:
<figure class="textOverlayHeader hoverStyle noOverflow">
<div class="imgBG bgZoomIn" style="background-image: url('BACKGROUND-URL'); "></div>
</figure>
bgZoomOut
Currently, the zoom BG class works best with textOverlayHeader templates. You can remove excess elements where needed.
Button text!Text align classes
You can specify different text alignments for desktop and mobile using the following classes:
.textLeft | .textRight | .textCenter
To change these settings on mobile you can append the small or xsmall prefixes to the beginning of the class. For example:
.small-textCenter
CSS Table classes
The classes to create css tables are currently:- cssTable
- cssTableCell
You can use these in conjunction with the classes used to specify width for the m-cell class. For example:
oneHalf | oneThird | oneFourth | twoThird | threeFourth
On the small breakpoint, the cssTableCell class will automatically stack the container and have a width of 100%. These classes are best used if you need vertical height consistency for elements like this current example. The height of the image will increase with the amount of content placed within this left cell.
a min-height style value should be specified if you want to have cells with background images display on mobile. See the source of this layout element to view an example.
If you don't want your elements to display block on mobile, please use the regular table html.
Title of block section goes here
This is some descriptive text you can add here.- Point goes here
- Point goes here
- Point goes here
- Point goes here
- Point goes here
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt lacinia porta. Quisque scelerisque interdum auctor. Etiam at dictum nunc.
.altBG class
In newer themes, you can use the altBG class to specify an alternate colour set to split content. This class can change the background colour, title, content text and button colours within the container that uses the class. The colours are specified through the theme editor in the Uplifter admin.
Full Page Home Page Alternate Section is the Page Template that utilizes this class but you can add this to any other template you wish this particular colour set to be implemented.
Sub title can go here
MAIN TITLE GOES HERE
animation delay
To make a delay effect for animations, you need to add the animation-delay style attribute to the html element that specifies the animation.
0.3s animation delay
Example of using the animation delay attribute:
<div class="animated" data-animated="fadeInLeft" style="animation-delay: 0.3s;">
0.6s animation delay
This is an example descriptive section. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam malesuada ullamcorper nisi at laoreet. Phasellus in vulputate elit.
Display and remove elements on different views
There are classes you can use to remove and display elements depending on the screen size. The second column of this row uses the smallHide class to hide the image on the small breakpoint.
Display classes
Currently available classes:
largeDisplay | mediumDisplay | smallDisplay | xsmallDisplay
largeHide | mediumHide | smallHide | xsmallHide
Display and Hide
Classes with Display uses the min query while the Hide classes use the max query.
-
.parallaxBG
Add the parallaxBG class to textOverHeader templates that have a background image. The effect will automatically be removed on mobile due to compatibility.
Button text!
-
.text02
Add the parallaxBG class to textOverHeader templates that have a background image. The effect will automatically be removed on mobile due to compatibility.
Button text!
-
.test03
Add the parallaxBG class to textOverHeader templates that have a background image. The effect will automatically be removed on mobile due to compatibility.
Button text!
Addressing Dark Themes
a very small handful of clients have asked to implement a dark background site. We currently do not have a dark theme in place to handle this so the following section has some custom css that should be used if this request arises and for future reference once making a dark theme. Any area that has an rgb value (highlighted in yellow), should try to use the darkest colour (i.e. maybe the theme's current background colour).For anything with an empty #HEX value (coloured in orange), please choose depending on what compliments the rest of the theme.
The other colour values should not need to be changed as they are generic and are meant to compliment the re-introduction of the white background in certain areas.
Public CSS Override - Prepend
#userPanel h1, #userPanel h2, #userPanel h3, #userPanel h4, #userPanel h5, #userPanel h6,
#checkout .stepContent h1, #checkout .stepContent h2, #checkout .stepContent h3, #checkout .stepContent h4, #checkout .stepContent h5, #checkout .stepContent h6, #checkout .scrollingSide h2, #checkout .scrollingSide th,
.modal-content h1, .modal-content h2, .modal-content h3, .modal-content h4, .modal-content h5, .modal-content h6,
#ajaxLoginModal h1, #ajaxLoginModal h2, #ajaxLoginModal h3, #ajaxLoginModal h4, #ajaxLoginModal h5, #ajaxLoginModal h6,
.popContent h1, .popContent h2, .popContent h3, .popContent h4, .popContent h5, .popContent h6,
#orderView h1, #orderView h2, #orderView h3, #orderView h4, #orderView h5, #orderView h6,
#fancybox-content h1, #fancybox-content h2, #fancybox-content h3, #fancybox-content h4, .fancybox-content h5, #fancybox-content h6, #userPanel a, #checkout a, #ajaxLoginModal a, .popContent a, #categories .jstree li a, #orderView a, #fancybox-content a
{color:rgb(53, 70, 33);}
#userPanel, #userPanel .staticIcon:before, #checkout, #checkout .staticIcon:before, #checkout .scrollingSide table, .modal-content, #ajaxLoginModal, #orderView, #fancybox-conten{color:#444;}#userPanel .iconMenu a, #checkout a.cartActionBtn:hover{color:#fff;}
Public CSS Override - Append
.registrationLayout table th{background-color:#HEX; color:#HEX;}
input[type="submit"], .btn, input[type="button"], input[type="submit"], .btnAction, input.btnAction, a.btnAction, .greeting .btnAction{border:2px solid rgb(53, 70, 33)}