Here's a quick guide to editable template styles in the MailChimp Template Language.

Declaration Block

To be added to CSS to define areas in a template where style is editable through the MailChimp email property inspector.

  • @tab: (required) defines from which tab in the property inspector styles can be set.
  • @section: (optional) defines from which tab sub-section in the property inspector styles can be set. This is optional, but recommended when you have a number of editable styles. Too many editable styles in one section or grouped in no sections can make it harder to find edit options.
  • @tip: (optional) guidance to be shown in the property inspector indicating how best to use styles or controls.
  • @style declaration takes a CSS rule set you’ve created and pulls it into the campaign text editor’s drop-down menu and allows you to apply styles to your text in a quick and selective way. See More Examples
  • @theme: (optional) if you would like the colors of your template to be changeable via the MailChimp color theme tool, use the following theme definitions in your CSS:
    • @theme page: defines the background color of the email.
    • @theme main: should be on the main body section of the campaign for text color and fonts
    • @theme header: should be used for the background color of the "view in this browser" section or left off entirely
    • @theme title: defines the foreground, size, and font of titles
    • @theme subtitle: defines the foreground, size, and font of subtitles
    • @theme footer: should be on the footer section of the template for background color.


/**
* @tab Page
* @section main heading
* @tip Set the styling for all first-level headings in your emails. These should be the largest of your headings.
* @style heading 1
*/
h1{
    /*@editable*/ color:#202020 !important;
    display:block;
    /*@editable*/ font-family:Arial;
    /*@editable*/ font-size:34px;
    /*@editable*/ font-weight:bold;
    /*@editable*/ line-height:100%;
    /*@editable*/ text-align:left;
}
Declaration - /*@editable*/

Defines a single editable style.

/*@editable*/ property: value;

Related Articles