This document contains conceptual and procedural information about using CSS to modify the appearance of content shared from a social content slot via Social Forward to a social network. The CSS stylesheet specified by Social Forward affects how that content is displayed after the content has been shared. You must upload your desired stylesheet to the Social folder on your Portfolio.
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 stylesheet to shared social content slots in your email. This stylesheet 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:
#hdr
The ID hdr refers to the header of the landing page. It contains hdrLogo on the left and hdrText to the right of the logo.
#hdrLogo
The ID hdrLogo is inside hdr and determines the logo displayed in the header.
#hdrText
The ID hdrText is inside the ID hdr and to the right of the ID hdrLogo. Enter the text for the header in the Title field of the Content Area Properties window. You can open that window in the ExactTarget application by clicking Edit>Social Properties while modifying a content area.
#cntnr and #contentCntnr
The ID cntnr container includes the container with ID contentCntnr and the ID ftr below that. The ID contentCntnr includes the ID text with both a header (h1) with the description and a paragraph (p) with the shared content.
#text
The ID text defaults to a 600px wide div with both a header (h1) with the description and a paragraph (p) with the shared content.
#text h1
The ID #text h1 inside of the ID text refers to the heading in the whitespace underneath the header bar. Enter the text for the header in the Description field of the Content Area Properties window. You can open that window in the ExactTarget application by clicking Edit>Social Properties while modifying a content area.
#text p
The ID #text p refers to the content in the whitespace under the ID #text h1 but above the footer (which is shown as a line with Privacy Policy below the line, in this case). This text is taken from the shared social content slot.
#ftr
The ID ftr refers to the footer div of the landing page. It is contained within the ID cntnr.
This example customizes the logo on the page with the published shared content, along with other changes to the look and feel.
What CSS Can Alter in Social Forward
Using a CSS stylesheet 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 #hdrLogo {
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:
- Create your email content.
- Click the Content tab and open the email.
- Open the email slot to share in the email editor.
- In the Edit Content window, click Edit and select Social Properties.
- 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.
- For the Stylesheet (CSS) box, locate the stylesheet you wish to apply to the shared content slot after it has been published to a social network.
- Click OK to close out the Content Area Properties window.
- Click the Insert menu and select Social Forward.
- 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.
- 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.
- Tag page
- What links here
Images 4
