headerIMG

B2B Articles - April 29, 2010 - By Ironpaper

Styles Dropdown Not Showing Mailchimp WYSIWYG Editor? Mailchimp Custom Newsletter Template Design Help With Titles.

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

Tel 212-993-7809  

Ironpaper ®
10 East 33rd Street 
6th Floor
New York, NY 10016
Map

Ironpaper - B2B Agency

B2B Marketing and Growth Agency.

Grow your B2B business boldly. Ironpaper is a B2B marketing agency. We build growth engines for marketing and sales success. We drive demand generation campaigns, ABM programs, B2B content, sales enablement, qualified leads, and B2B marketing efforts. 

Ironpaper Twitter Ironpaper Linkedin