How to Assign a CSS File from Your Portfolio to Shared Content

Prerequisites

You should be familiar with HTML, CSS, and AMPscript in order to use the information in this example.

Why Assign a CSS File from your Portfolio to Shared Content

Assigning a CSS file to your shared content allows you to better dictate how your content will appear on social networks. You can specify how certain elements in your message will appear when shared using CSS, and storing the file in your Portfolio gives you a central location for managing the appearance of your content.

Writing Your CSS for Social Forward

Social Forward allows you to attach a CSS style sheet to shared social content slots in your email. This style sheet does not affect the look of the email itself, but it changes the appearance of the content once that content has been shared on a social network. Use the following information to modify different elements of the shared social content slot:

What CSS Can Alter in Social Forward

Using a CSS style sheet in Social Forward, you can change the following elements of your content:

• Font families and sizes
• Headers and footers
• Simple injection of text (not HTML)
• Show/hide DIV tags

Social Forward does not permit CSS to use or performing the following actions:

• Conditional logic
• Inserting rich content or content from your Portfolio
• Placing additional links in your content

Example CSS Code

The code below represents the full CSS file associated with the shared page shown at the beginning of this scenario:

#hdr { 
background: #9ccdcf url('http://image.preview.exacttarget.com/lib/ff66157875/m/1/BxTgtBckGnd.gif') repeat-x;
background-position: bottom left;
border-bottom: 7px solid #dad6d3;
}

#hdr #logo {
display:block; 
background-image: url('http://image.exct.net/lib/fef51d73776c00/m/1/thumb/png/CSSLogo.jpg');
width: 100px;
height: 50px;
background-repeat: no-repeat;
background-position: top left;
}

#hdr #hdrText {
font-size: 25px;
color: #FFF;
padding: 35px 7px;
}

#cntnr #text h1 {
font-size: 18px;
color: #56999D;
line-height: 23px;
}

#cntnr #text p {
font-size: 14px;
line-height: 18px;
}

#ftr {
padding: 15px 15px 15px 0;
border-top: 1px solid #AAA; margin: 15px 0 0 0; 
}

#ftr a {
color: #8bb6b8;
font-weight: bold;
padding: 7px;
text-decoration: none;
}

#ftr a[class=rnd]
{ -moz-border-radius: 7px;
border-radius: 7px;
-webkit-border-radius: 7px;
}

#ftr a:Hover
{ background-color: #EEE;
color: #444;
}

.clr { clear: both; }

In this example, the CSS does the following:

• Creates, sets, and aligns a background for the header (#hdr)
• Sets and aligns a logo for the header (#hdr #hdrLogo) 
• Modifies the format of the title text (#hdrText) contained within the header
• Changes the text style in the social slot description (#cntrn #text h1)
• Modifies the style of the social slot shared content (#cntnr #text p)
• Changes the style of the footer (#ftr) and footer Privacy Policy link (#ftr a)

How to Apply the CSS File to the Published Content

Once the CSS has been created, the steps to apply the CSS to the published content is as follows:

1. Create your email content.
2. Click the Content tab and open the email.
3. Open the email slot to share in the email editor.
4. In the Edit Content window, click Edit and select Social Properties.
5. In the Content Area Properties window that appears, check the Allow Content To Be Shared checkbox and enter the information for the Shared Content Slot, Title and Description text fields. 
6. For the Stylesheet (CSS) box, locate the style sheet you wish to apply to the shared content slot after it has been published to a social network.
7. Click OK to close out the Content Area Properties window.
8. Click the Insert menu and select Social Forward.
9. In the Insert Social Forward window that appears, check the checkboxes next to the links for the social networks you wish to include in your email content area.
10. Select the content area you wish to associated with these networks from the Associate with Shared Content Slot dropdown menu. You may also manually type in the name of a shared content slot you wish to create later.

The screenshot below shows the shared content in Facebook.

Best Practices

When IDs receive multiple attributes from different style sheets or instances in the same style sheet, the resulting landing page may not appear as you expected. For best results, you should create a dedicated style sheet that provides the CSS for the landing page. This prevents problems with cascading attributes from multiple style sheets.

Be sure to test your landing page in multiple browsers to make sure that the page appears according to your specifications. This can help you avoid problems later when your subscribers view the pages in an environment different than the one you used for testing.

Use a debugging tool like Firebug in Firefox or the Internet Explorer Developer Toolbar to view your CSS and find any problems or mistakes.