[SalesForce] How to create dynamic CSS in ExactTarget content blocks

I've attempted to create dynamic content blocks in ExactTarget so that CTA button colors (background color within anchor tag) will match the specific colors for different locations.

Each location has it's own dynamic template, with a variable for accent color i.e. for Location Rome the following AMPscript is declared at the top of the Dynamic Newsletter Template for Rome. 

<!--%%[
VAR @LocationName, @AccentColor

SET @LocationName = "Rome"
SET @AccentColor = "#2196F3"
]%%-->

The goal is to insert @AccentColor into the Dynamic Content block's inline CSS so that when this content block is used for each location, @AccentColor will pull the hex code for that specific location from the template.

I've tried this code: {... background-color: %%=v(@AccentColor)=%%; ...} in the HTML of the content block. Unfortunately, after saving in the WYSIWYG and returning to the HTML, I would see that this bit of added code has disappeared and the button no longer has a background color in preview mode.

I've also tried the IF statement like so:

**%%[IF @LocationName == "Rome" THEN]%%**<tr>
    <td align="center" valign="bottom" height="34" bgcolor="#F3F3F3">
      ... <a href="#" style="background-color:#2196F3;"> ...
    </td>
</tr>**%%[ENDIF]%%**
**%%[IF @LocationName == "Bangkok" THEN]%%**<tr>
    <td align="center" valign="bottom" height="34" bgcolor="#F3F3F3">
      ... <a href="#" style="background-color:#9C27B0;"> ...
    </td>
</tr>**%%[ENDIF]%%**
.
.
.
.

I tested it by inserting this content block (with IF statements) in the Dynamic Template for Rome and all of the CTAs and CTA colors for every location showed up in the Send Preview.

Thank you for any help you can provide.

Best Answer

Save yourself some frustration and clear your Content Area and re-initialize it as HTML Only. The WYSIWYG editor really stumbles all over itself when you start doing adding a lot of scripting.

I'd probably code it something like this:

%%[

VAR @CampusName, @AccentColor

SET @CampusName = AttributeValue("CampusName") /* handle null gracefully */

if @CampusName == "London" then

  SET @AccentColor = "#2196F3"

elseif @CampusName == "Madrid" then

  SET @AccentColor = "#9C27B0"

else

  set @AccentColor = "silver"

endif

]%%

<!-- other HTML -->

<tr> 
  <td bgcolor="#F3F3F3">
     <a href="#" style="background-color:%%=v(@AccentColor)=%%;">link</a>
  </td>
</tr>

Also, one caution about using <!-- --> to hide AMPScript...it will cause problems in the text version of your email.

Related Topic