To aid in editing the HTML for popups, several utility classes are available to more quickly and easily modify the look and feel. Use the below snippets to add to your popup designs. The included screenshots can be used as a directive to where this code needs to be placed.
CLOSE BUTTON (x)
Apply any of the following classes to:
<div id="ltkpopup-close-button" class="AddClass">
smallchanges (x) to a small sizemediumchanges (x) to a medium sizelargechanges (x) to a large sizexlargechanges (x) to an x-large sizethickincreases the stroke thickness of the (x)
CONTENT
Apply any of the following classes to:
<div id="ltkpopup-contentarea" class="signup AddClass">
darkapplies a dark theme to the form, button, input, and validationsans-serifapplies a default sans-serif font stack using up-to-date system fontsserifapplies a classic serif font stackcustomapplies a custom font. Link your custom font in the HTML, then update this class with the appropriate font nametext-leftaligns the text left, overriding the default centered textroundedapplies rounded corners to the popupborderadds a border to the popup
INPUT
Add
border-bottomto the email or text inputs for an underline-style input
Add
stackedto thedivwith a class ofltkpopup-inputcontainerto stack the input over the button
IMAGES
SECURE IMAGE LINKS
The media library allows the loading of images with an https protocol. Popups may be displayed on http or https pages depending on the site. To use https , copy the URL assigned to the image in the media library and replace the URL domain with https://mediacdn.espssl.com/.
VIDEO
A video container class can be used to embed video. Add class of ltkpopup-videowrapper to a div that wraps the embedded iframe code provided by video services like Vimeo and Youtube. The default styling allows for a 16:9 ratio video. Comments are available in the CSS to explain other settings.
