Listrak

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.&nbsp;

Apply any of the following classes to: <code>&lt;div id="ltkpopup-close-button" class="AddClass"&gt;</code>

<code>small</code> changes (x) to a small size

<code>medium</code> changes (x) to a medium size

<code>large</code> changes (x) to a large size

<code>xlarge</code> changes (x) to an x-large size

<code>thick</code> increases the stroke thickness of the (x)

- <code>small</code> changes (x) to a small size
- <code>medium</code> changes (x) to a medium size
- <code>large</code> changes (x) to a large size
- <code>xlarge</code> changes (x) to an x-large size
- <code>thick</code> increases the stroke thickness of the (x)

Apply any of the following classes to: <code>&lt;div id="ltkpopup-contentarea" class="signup AddClass"&gt;</code>

<code>dark</code> applies a dark theme to the form, button, input, and validation

<code>sans-serif</code> applies a default sans-serif font stack using up-to-date system fonts

<code>serif</code> applies a classic serif font stack

<code>custom</code> applies a custom font. Link your custom font in the HTML, then update this class with the appropriate font name

<code>text-left</code> aligns the text left, overriding the default centered text

<code>rounded</code> applies rounded corners to the popup

<code>border</code> adds a border to the popup

- <code>dark</code> applies a dark theme to the form, button, input, and validation
- <code>sans-serif</code> applies a default sans-serif font stack using up-to-date system fonts
- <code>serif</code> applies a classic serif font stack
- <code>custom</code> applies a custom font. Link your custom font in the HTML, then update this class with the appropriate font name
- <code>text-left</code> aligns the text left, overriding the default centered text
- <code>rounded</code> applies rounded corners to the popup
- <code>border</code> adds a border to the popup

Add <code>border-bottom</code> to the email or text inputs for an underline-style input

- Add <code>border-bottom</code> to the email or text inputs for an underline-style input

Add <code>stacked</code> to the <code>div</code> with a class of <code>ltkpopup-inputcontainer</code> to stack the input over the button

- Add <code>stacked</code> to the <code>div</code> with a class of <code>ltkpopup-inputcontainer</code> to stack the input over the button

SECURE IMAGE LINKS The media library allows the loading of images with an <code>https</code>  protocol. Popups may be displayed on <code>http</code>  or <code>https</code>  pages depending on the site. To use <code>https</code> , copy the URL assigned to the image in the media library and replace the URL domain with <a href="https://mediacdn.espssl.com/" target="_blank" rel="nofollow noopener noreferrer">https://mediacdn.espssl.com/.</a>

A video container class can be used to embed video. Add class of <code>ltkpopup-videowrapper</code> to a <code>div</code> 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.

CLOSE BUTTON (x)

CONTENT

INPUT

IMAGES

VIDEO