Landing Page - Token Formatting

Anonymous
Not applicable

Landing Page - Token Formatting

I'm trying to get a landing page to use tokens, but change the font formatting from the original token format to that of what's on the landing page or in the snipit.  The tokens are all Arial, size 12, black font.  For the landing page I want the tokens to take on the font format of the landing page, but they will only take on the format of the token.  I've tried using a snipit, tried doing it on the landing page directly, used rich text, deleted and recreated things, gone into HTMLetc. and it won't work.  When we change formatting in our emails, the tokens take on that format, but it's not working for the landing page. Please help!
Tags (1)
6 REPLIES 6
Dan_Stevens_
Level 10 - Champion Alumni

Re: Landing Page - Token Formatting

I don't believe tokens have any format applied to them.  They consist of raw data.  When we use them within the content of our emails and landing pages, they take on the format of the rest of the content.
Josh_Hill13
Level 10 - Champion Alumni

Re: Landing Page - Token Formatting

I take it your token is rich text? If so, you cannot override the formatting. Switch the token to text or adjust the forma there.
Anonymous
Not applicable

Re: Landing Page - Token Formatting

I struggled with this and discovered using the text field vs. Rich text helps a ton and using CSS on your landing page solved 99% of this for me. 
SanfordWhiteman
Level 10 - Community Moderator

Re: Landing Page - Token Formatting

@Frannie C it would be helpful to see the actual page you're talking about.

It's possible that element styles (the style= attribute) are being applied to your token; those will override CSS rules that are not deliberately marked !important.  So it may not be that it isn't "working" per se but rather that the CSS cascade is being strictly observed, as it should.  It's almost impossible to have styles you can't override somehow in a landing page, especially because LPs can use JavaScript.  
Anonymous
Not applicable

Re: Landing Page - Token Formatting

@Sanford W thanks for the comment!  Here's the page I'm referring to: http://go.argyleforum.com/Event-Template_DO-NOT-DELETE_Event-Registration-Page_Why-Attend.html

I don't really know anyhting about CSS but I'm pretty savvy so I think I could figure it out.  Would I change it on the token level, or mark the style on the snipit as !important?  

Here's the HTML for the snipit:
<p><span style="font-family: arial, helvetica, sans-serif; font-size: 20px; color: #2a6ebb;"><strong>At the meeting, you will learn:</strong></span></p>
<p><span style="font-family: arial, helvetica, sans-serif; font-size: 20px; color: #2a6ebb;"><span style="color: #ffffff; font-size: 18px;"><span><span>{{my.Short Topics}}</span></span></span><strong><br /></strong></span></p>

Here it is for the token:
<pre><span style="font-family: arial, helvetica, sans-serif; font-size: 12px;">- Methods on protecting enterprise data with the new perimeter</span><br /><span style="font-family: arial, helvetica, sans-serif; font-size: 12px;">- Insights on the growth of mobility &amp; how it affects security</span><br /><span style="font-family: arial, helvetica, sans-serif; font-size: 12px;">- How to create a successful incident response plan</span><br /><span style="font-family: arial, helvetica, sans-serif; font-size: 12px;">- Ways to gain loyalty &amp; win customers back after a breach</span><br /><span style="font-family: arial, helvetica, sans-serif; font-size: 12px;">- Tips on aligning risk management to business priorities</span></pre>

Thank you!!!
 
SanfordWhiteman
Level 10 - Community Moderator

Re: Landing Page - Token Formatting

Fix is simple:
 
div#lpeCDiv_36605 {
    color: white !important;
}

However I would take out as much of the element styles from your tokens as you can, otherwise you'll always have to do workarounds like this. As a general rule of thumb, you should only need to use !important rules when you're forcibly restyling somebody else's markup and there's no other way. If it's your own markup you should try to make the parts play better together if you can.