Skip to content

Style Editor Specifications

Template styles can be controlled using our "Style Editor". The Style Editor will modify CSS attributes that a designer specifies should be editable by a user.

Requirements

  • The email be marked up using STML editor markup
  • Editable styles should be placed in the <head>...</head> of the template in a <style id='editableCss'>....</style> tag

Style Hierarchy & User Interface


Editable Styles are organized in the Style Editor interface using using the below hierarchy:
  • Tab 
  • Section
  • Style Declaration
In the below example, we have two Tabs ("Page", "PreHeader"). Under the "Page" tab we have a "Background" section with the "background-color" declaration. 


CSS Markup


Our style editor reads in CSS from a specific style tag which contains the ID "editableCss". Only one such style tag can exist in the document. 

The tagging of the styles controls where in the user interface a declaration can be edited. This is done by marking up the CSS with special comment declarations. 

The following declarations are supported: 
  • @tab (followed by the tab name) - provides the name of the tab in the user interface where the style should be edited
  • @section (matches to a prior @tab and must be followed by the section name) - provides the name of the section under the most recent provided @tab where the styles should be edited
  • @tip (matches to a prior @section and must be followed by tip copy) - provides a tooltip that helps the user understand the context of what is being edited
  • @editable (matches to a prior @section and sits within a css selector block and must be followed by the css declaration) - indicates which css declaration should be visible and editable in the user interface
The declarations must be submitted in a CSS comment, for example to specify the tab name you would use:
/* @tab my tab name */

Below is an example of how the declarations can be used: 
<style id='editableCss'>
/* @tab Page */
/*@section Background */
/*@tip You can modify the background color */
  body, #bodyTable{
      /*@editable*/ background-color:#f6f6f6;
  }

/*@section Link */
/*@tip You can update the link color for all links in the email. */
a {
      /*@editable*/ color:#3181fe;
      /*@editable*/ text-decoration:none;
  }


/* @tab PreHeader */

/*@section Background */
/*@tip You can modify the background color */
#preHeader {
/*@editable*/ background-color:#f6f6f6; }
</style>

The above example will produce two tabs, "Page" and "PreHeader". The "Page" tab will have a "Background" and "Link" section. Under the Page->Background the "background-color" will be editable. Under the Page-Link, the "color" and "text-decoration" will be editable. The "PreHeader" tab will have a "Background" section. Under the PreHeader->Background section the "background-color" would be editable. 

The @tip for each @section will appear when someone goes over the tip icon in the user interface. 

Best Practices


We recommend that you utilize the following Tabs for emails for clarity for the user:
  • Email (for sections such as background, content background, link)
  • Text (for things such as body text, h1, h2, h3) 
  • Header (for things such mobile copy)
  • Footer (for things such as unsubscribe)

Full Example


Below is a full example SHTML with CSS editor markup. 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>Example Template</title>
<style id='editableCss'>
/* @tab Page */

/*@section Background */
/*@tip You can modify the background color */
  body, #email_canvas_background{
      /*@editable*/ background-color:#f6f6f6;
  }

/*@section Link */
/*@tip You can update the link color for all links in the email. */
    a {
      /*@editable*/ color:#3181fe;
      /*@editable*/ text-decoration:none;
    }


/* @tab PreHeader */

/*@section Background */
/*@tip You can modify the background color */
#preHeader {
/*@editable*/ background-color:#f6f6f6;}

/* @tab Content */

/*@section Background */
/*@tip You can modify the background color */
.main_content_background {
  /*@editable*/ background-color:#ffffff;
}

/* @tab Footer */

/*@section Background */
/*@tip You can modify the background color */
#footer {
/*@editable*/ background-color:#f6f6f6;}

</style>

</head>
<body>
<table width="100%" cellpadding="0" cellspacing="0" border="0" id="email_canvas_background">
  <tr><td>
    <!-- Mobile text -->
    <table id="preHeader" width="100%" cellpadding="0" cellspacing="0" border="0">
      <tr><td height="15"></td></tr>
      <tr>
          <td style="font-family:Tahoma, Geneva, sans-serif;font-size:12px;color:#393e41;text-align:center;">
              <div data-type="text">
                text goes here for mobile display
                </div>
            </td>
        </tr>
        <tr><td height="15"></td></tr>
    </table>
    <!-- Mobile text -->
    </td></tr>
  <tr><td align="center">
    <!-- Container Table -->
    <table width="600" cellpadding="0" cellspacing="0" border="0" class="main_content_background">
     
      <tr>
          <td style="padding:0 20px 0 20px;">
                <div data-type="region">
                <div data-type="block">
              <table width="100%" cellpadding="0" cellspacing="0" border="0">
                  <tr><td colspan="5" height="35"></td></tr>
                  <tr>
                     
                      <td align="center">
                          <img src="" width="230" data-max-width="249" data-type="image" data-href="#" border="0" />
                        </td>
                     
                    </tr>
                    <tr><td colspan="5" height="35"></td></tr>
                 
                </table>
                </div>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div data-type="region">
                <table width="100%" cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td style="padding:0 20px 0 20px;">
                        <div data-type="block">
                        <table width="100%" cellpadding="0" cellspacing="0" border="0">
                            <tr>
                                <td>
                                    <table width="100%" cellpadding="0" cellspacing="0" border="0">
                                        <tr><td height="35"></td></tr>
                                        <tr>
                                            <td style="font-family:Arial, Helvetica, sans-serif;font-size:14px;color:#4c4c4e;line-height:20px;">
                                             
                                                <div data-type="text">
                                                Hi There,
                                                <br/><br/>
                                                Lorem ipsum dolor sit amet, <a href="#" >consectetur</a> adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
                                                <br/><br/>
                                                nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
                                                </div>
                                             
                                            </td>
                                        </tr>
                                        <tr><td height="35"></td></tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                        </div>
                    </td>
                </tr>
                </table>
                </div>
            </td>
        </tr>

                </table>
                </div>
                </div>
            </td>
        </tr>  
       
    </table>
    <!-- /Container Table -->  
    </td></tr>
    <tr><td>
    <!-- Footer text -->
    <table id="footer" width="100%" cellpadding="0" cellspacing="0" border="0">
      <tr><td height="15"></td></tr>
      <tr>
          <td style="font-family:Tahoma, Geneva, sans-serif;font-size:12px;color:#393e41;text-align:center;">
              <div data-type="text">
              No longer want to receive these emails? You can <a style="color:#333333;" href="{{{unsubscribe}}}"><span style="color:#333333;">unsubscribe</span></a> here<br/>
        123 Main Street, Sacramento, CA USA<br/>
        &copy; 2015 COMPANY NAME. All Rights Reserved.
                </div>
            </td>
        </tr>
        <tr><td height="15"></td></tr>
    </table>
    <!-- Footer text -->
    </td></tr>
</table>
</body>
</html>

Feedback and Knowledge Base