This article is intended for people comfortable working with Cascading Style Sheets (CSS). If that's not you, check out how to create an email in the email editor.
Outbound emails can feature custom fonts, colors, and styling using the built-in "Custom Styles" feature in the communications toolkit.
The primary components or "blocks" inherent in the email builder are:
Default Header (class: .email-header)
Default Footer (class: .email-footer)
WYSIWG Content
Embedded Survey Questions (class: .email-question)
Button block (class: .email-center .email-button)
The entire email is set up in a table (id: #email-wrapper). Here's an example email using the default elements:
The html for the above example is as follows:
<html>
<body>
<table id="email-wrapper">
<tbody>
<tr class="email-row">
<td>
<div>
<div class="email-header">
<div class="email-center email-customerLogo"><img src="https://publicinput.com/img/{dynamic-image-id-max-width-500}_500_496.PNG" alt="" /></div>
<p class="email-headline">Default email header with optional headline</p>
<hr class="email-hr email-hr-top" />
</div>
</div>
</td>
</tr>
<tr class="email-row">
<td>
<div>
<h2>This is a content box</h2>
<p>Content boxes are customizable with a built-in WYSIWG editor.</p>
</div>
</td>
</tr>
<tr class="email-row">
<td>
<div>
<div class="email-question">Have you dined out in Charleston, South Carolina?</div>
<div class="email-question-option"><a href="{dynamically-generated-link}">Yes</a></div>
<div class="email-question-option"><a href="{dynamically-generated-link}">No</a></div>
</div>
</td>
</tr>
<tr class="email-row">
<td>
<div>
<div class="email-center">
<p><a class="email-button" href="{dynamically-generated-link}" target="_blank">I'm a default button</a></p>
</div>
</div>
</td>
</tr>
<tr class="email-row">
<td> </td>
</tr>
<tr class="email-row">
<td>
<div>
<div class="email-footer">Sent on behalf of City of Zen by <a class="email-link--muted" href="{dynamically-generated-link}">PublicInput.com</a> · 16 West Martin Street, Raleigh, NC 27601
<div><a class="email-link--muted" href="https://publicinput.com/Emails/Unsubscribe">Unsubscribe</a> or <a class="email-link--muted" href="https://publicinput.com/Manage/">manage your subscriptions</a> ·<a class="email-link--muted" href="https://support.publicinput.com">Support</a> · <a class="email-link--muted" href="https://publicinput.com/privacy">Privacy policy</a></div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
To get started with your own CSS, you can download the 'basic' stylesheet here:
https://publicinput.com/Content/EmailDefaultStyles.css
To get started with custom emails, log in as an admin at PublicInput.com.
Head to the Email & SMS Page on the left
From here, you can copy a past campaign from the campaigns list by clicking the ellipsis in the column to the right (1) or click "Create New Campaign" (2) to launch the Email Editor.
In the Email tab of your draft campaign, you can use the drag & drop tools to set up a basic email for customization.
Note: Creating templates and styles with the default blocks is optional (you can solely use WYSIWG blocks), but we recommend creating styles for the questions block as these are the most frequently-used default email block.
Access the custom styles interface under the "Styling" tab:
From there, you'll see the default style selected in the "Create New Custom Style" drop-down at the bottom of the window. Click this drop-down and select Create New Custom Style to provide your own CSS styling rules in the CSS editor.
Once you save styles, you can apply them to the Email preview by clicking "Save & Update Email":
You can preview your changes by clicking "Preview" in the upper-right corner of the screen:
Or, by heading to the Preview and Send tab, you can send yourself a test email by clicking the Send Test button on the lower right-hand side:
Once you're satisfied with your formatting, return to the Email tab and save the custom style with a unique name.
The template will now be accessible by any email administrator for your organization under the Styling tab of the email editor.
Resources:
Default / Starter Style Sheet
See also: