Help defining TITLE and SUBTITLE attributes for Mailchimp custom template WYSIWYG editor STYLE dropdown
We had a few people write in to us and ask how to work with custom Mailchimp templates. Specifically these web designers were having trouble getting the "TITLE" and "SUBTITLE" attributes to show up in the "Styles" drop down within the WYSIWYG editor after creating or modifying a custom HTML newsletter template. Instead of these designers being able to access the TITLE and SUBTITLE attributes from the Styles drop down in the content editor, they can only see "default text" as a selectable option.
The above image shows the Style drop down menu after it has been properly populated with additional attributes. The FCK Editor defines these attributes outside of the embedded CSS that the web designer declares within the newsletter.
SOLUTION:
You will need to define the main editable content area by using mc:edit="main" and not "content", which was the approach used within a number of the free downloadable starter templates found within the Mailchimp website. In addition, you will need to ensure that you are using .title and .subTitle ( class="title" and class="subTitle" ) ( and NOT .primary-heading / .secondary-heading /.content-title / .content-header or another option). By specifying .title and .subTitle you will be able to define and access those styles from the WYSIWYG editor Styles menu. Please note: If choosing "Default text", the text gets surrounded of a span tag without any class.
Below is a sample CSS declaration for those two classes:
.title {
/*@editable*/ font-size: 16px;
/*@editable*/ font-weight: bold;
/*@editable*/ color: #000000;
/*@editable*/ font-family: Arial;
/*@editable*/ line-height: 150%;
/*@editable*/ margin: 25px 0 0 0;
}/**
* @tab Body
* @section subtitle style
* @tip This is the byline text that appears immediately underneath your titles/headlines.
* @theme subtitle
*/
.subTitle {
/*@editable*/ font-size: 12px;
/*@editable*/ font-weight: bold;
/*@editable*/ color: #000000;
/*@editable*/ font-style: normal;
/*@editable*/ font-family: Arial;
/*@editable*/ margin: 15px 0 15px 0;
/*@editable*/ line-height: 150%;
}
Need help? Let us build an eNewsletter design template