Landing Page - Token Formatting

[Anonymous]

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!

[Dan_Stevens_]

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]

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]

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]

@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]

@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]

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.