The custom popup editor supports inline CSS tags to help you create the perfect popup.
Using inline CSS, you can customise the colours, styles, and add engaging elements like buttons.
Inline CSS is contained in the HTML element. To work with inline CSS, open your popup editor and switch to the code view.
A typical custom popup might look like this:
<img src="{photo}"/>
<p>Address: {address}, {city}</p>
<p>Land size: {area} sq.ft.</p>
<p>Price: {price}</p>
<a href="{url}">Enquire now</a>
With inline CSS, you could customise just about everything:
<img style="border-radius: 6px; box-shadow: 5px 5px 10px rgba(0,0,0,0.5); margin: 20px; max-width: 250px;" src="/hc/article_attachments/900009586083">
<p style="text-align: center; font-weight: bold; font-size: 18px;">$2,740,000</p>
<p style="text-align: center;">45 Beachside Dr., Hollywood</p>
<p style="text-align: center; font-size: x-small;">43,560 sq.ft.</p>
<p><a role="button" style="border-radius: 6px; background: MediumSpringGreen; color: black; padding: 1em; margin: 1em; display: block; text-align: center; text-decoration: none; font-size: 18px;" href="{url}" target="_self">Enquire now</a></p>
Text
Tweak your text to match your theme.
This is a green title in serif typeface.
<h3 style="color:SeaGreen; font-family:serif;">This is a green title in serif typeface.</h3>
Highlight elements of your popup content.
Total population in New York is 8.419 million.
<p>Total population in <mark>{city}</mark> is {pop2021} million.
Buttons
Spice up your links with buttons!
Full Width Button with shadow
<a
role="button"
style="display:block;padding:15px 15px;margin:2em;background-color:#ea072b;color:white;text-decoration:none;border-radius:6px;box-shadow: -5px 7px 20px rgb(0 0 0 / 25%);text-align: center;font-weight: 700;letter-spacing: 0.025em;"
href="{url}"
target="_blank">
Report a road issue here
</a>
Padded Button with shadow
<a
role="button"
style="display:inline-block;padding:10px 15px;margin:2em;background-color:MediumSeaGreen;color:white;text-decoration:none;border-radius:6px;box-shadow: -5px 7px 20px rgb(0 0 0 / 25%);text-align: center;font-weight: 700;letter-spacing: 0.025em;"
href="{url}"
target="_blank">
Submit a request
</a>
Bordered button
<a
role="button"
style="display:inline-block;padding:10px 20px;margin:1em;background-color:LightSteelBlue;color:DarkSlateGray;text-decoration:none;border: 2px solid DarkSlateGray;border-radius:6px;text-align: center;font-weight: 700;letter-spacing: 0.025em;"
href="{url}"
target="_blank">
Enquire
</a>
Useful CSS resources
Inline CSS opens up a wide range of customisation options in your popups and query reports. You can learn more about inline CSS from these resources: