Mailocator Engage has a custom ML-CLOSE tag that creates a closing cross and closes the campaign when clicked. The cross doesn't require an action to be added, it will be added automatically.
Location
We recommend always placing the ML-CLOSE tag immediately after the beginning of the tag ML-MAIN
<ml-main>
<ml-close class="tpx-outside tpx-black"></ml-close>
...
</ml-main> Events
If you want to use the cross to simply close a campaign, you do not need to add any Mailocator action to this tag.
If you want to use the cross for multiple actions - *for example, closing and redirecting to a URL*- - use the standard action as needed.
Colour, size and location
You can easily set the properties of the closing cross directly in the editor. Just right click on the element and select Settings / Properties.
All properties are also available using the following classes:
tpx-black | black cross in white box |
tpx-white | white cross in black field |
tpx-gray | black cross in gray field |
tpx-transparent | cross without background |
tpx-thin | 1px thin cross |
tpx-semi | medium cross 2px |
tpx-bold | thick cross 3px |
tpx-inside | cross placed inside the campaign element |
tpx-outside | cross placed outside the campaign element |
No cross outside the campaign area? Add to the element ML-MAIN styl overflow:visible !important
Custom color of the closing cross
To change the color of the closing cross, add the following declaration to the CSS styles with a custom color (red):
ml-close:before, ml-close:after {
background-color: red !important;
} Display crosshair after hover
By adding the tpx-onhover class, the crosshairs remain hidden until the user hovers the cursor over the campaign object. This class can only be applied to desktop content.