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:

  1. Default Header (class: .email-header)
  2. Default Footer (class: .email-footer)
  3. WYSIWG Content
  4. Embedded Survey Questions (class: .email-question)
  5. Button block (class: .email-center .email-button)

The entire email is setup 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>&nbsp;</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> &middot; 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> &middot;<a class="email-link--muted" href="https://support.publicinput.com">Support</a> &middot; <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 or click "Create New Campaign" to launch the Email Editor.

In the Email tab of your draft campaign, you can use the drag & drop tools to setup 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. Choose "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 'Apply Styles & Update Email':

You can preview your changes by clicking 'Preview':

Or by heading to the Preview and Send tab, where you can send yourself a test email:


Once you're satisfied with your formatting, save the custom style with a unique name. It will now be accessible by any email administrator for your organization under the Styling tab of the email editor.

Resources:
Default / Starter Style Sheet

Check out our related Email & SMS articles here!

Did this answer your question?