Re: css and snippets

Anonymous · ‎03-14-2013

Can CSS be used inside of snippets? I have been trying to do this for a table snippet (expanded footer link table segmented by industry) and the styles are gone the next time I open the html editor.

Thanks,
Liz

Anonymous · ‎03-15-2013

Liz,
Just realized that the snippet is stripping out styles. Here's how you can get the same result -

Add your style block in the custom HTML HEAD section of the "Edit Page meta tags" dialog as shown below -

Create snippet without style as shown below -

Place the snippet on the Landing Page (LP) and you will see the styles. Here's my example LP with your style http://na-qe.marketo.com/lp/socialoct/raj_regression_LPWithSnippetStyle.html

View solution in original post

Anonymous · ‎03-15-2013

Hey Liz - are you posting the CSS into the HTML section? I'd think this would work..

<style type="text/css">
table{border:1px solid #000;}
</style>

Like that...

Anonymous · ‎03-15-2013

Hey-thank you. I'll give that a try!

Anonymous · ‎03-15-2013

Hi-

I pasted the code below into the html are a of the snippet, but the styles are not applying. However, if I go to a landing page and paste this same code into the html, it works. Any idea why this is happening? Admittedly, I'm not a programmer! Thank you 🙂

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<style type="text/css">

</style>

<body>
<table width="890" border="0" cellspacing="10" cellpadding="0">
<tr>
 <td width="188" height="118" class="expandedfooter" scope="col">ABOUT CELSIS 
 Celsis Overview (video) 
 About Us 
 News & Events 
 Customer Testimonials
 </td>
 <td width="188" class="expandedfooter" scope="col">ABOUT THE SAVINGS 
 Industry Week Article 
 Fiscally Fit White Paper 
 FIA Sheet 
 Sustainability Committment
 </td>
 <td width="188" class="expandedfooter" scope="col">INDUSTRY SOLUTIONS 
 Home & Beauty Solutions 
 Food & Beverage Solutions 
 Pharmaceutical Solutions 
 Celsis Products
 </td>
 <td width="190" class="expandedfooter" scope="col">RESOURCES 
 News & Events 
 Contact Celsis 
 Webinar 
 Ask a Question
 </td>
</tr>
</table>
</body>
</html>

Anonymous · ‎03-15-2013

Liz,
The  enclosing your .expandedfooter class definition makes it a comment block. Just remove it and you should see the styles. The resulting HTML would look like this -

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<style type="text/css">

.expandedfooter {
 font-family: Helvetica, Arial, Verdana;
 font-size: 12px;
 font-style: normal;
 line-height: 15pt;
 font-weight: normal;
 font-variant: normal;
 text-transform: none;
 color: #666666;
 background-color: #FFFFFF;
 letter-spacing: normal;
 text-align: left;
 vertical-align: text-top;
 word-spacing: normal;
 white-space: normal;
 list-style-position: inside;
 border-right-style: solid;
 border-right-width: thin;
 border-right-color: #CCCCCC;
 }

</style>

<body>
<table width="890" border="0" cellspacing="10" cellpadding="0">
<tr>
 <td width="188" height="118" class="expandedfooter" scope="col">ABOUT CELSIS 
 Celsis Overview (video) 
 About Us 
 News & Events 
 Customer Testimonials
 </td>
 <td width="188" class="expandedfooter" scope="col">ABOUT THE SAVINGS 
 Industry Week Article 
 Fiscally Fit White Paper 
 FIA Sheet 
 Sustainability Committment
 </td>
 <td width="188" class="expandedfooter" scope="col">INDUSTRY SOLUTIONS 
 Home & Beauty Solutions 
 Food & Beverage Solutions 
 Pharmaceutical Solutions 
 Celsis Products
 </td>
 <td width="190" class="expandedfooter" scope="col">RESOURCES 
 News & Events 
 Contact Celsis 
 Webinar 
 Ask a Question
 </td>
</tr>
</table>
</body>
</html>

Anonymous · ‎03-15-2013

Thank you. I was hoping that would solve it, but here's what happened. I copied and pasted your (Raj) modified code in the html area of the snippet, and then exited the html. The front end didn't appear to follow the style sheet. So, I went back into the html, and the code was changed to what I have pasted below. It puts the  back in, and deletes the <style type="text/css">.

Any ideas why this is happening? Thanks very much 🙂


<table border="0" cellspacing="10" cellpadding="0" width="890">
<tbody>
<tr>
<td class="expandedfooter" width="188" height="118" scope="col">
ABOUT CELSIS Celsis Overview (video) About Us News & Events Customer Testimonials
</td>
<td class="expandedfooter" width="188" scope="col">
ABOUT THE SAVINGS Industry Week Article Fiscally Fit White Paper FIA Sheet Sustainability Committment
</td>
<td class="expandedfooter" width="188" scope="col">
INDUSTRY SOLUTIONS Home & Beauty Solutions Food & Beverage Solutions Pharmaceutical Solutions Celsis Products
</td>
<td class="expandedfooter" width="190" scope="col">
RESOURCES News & Events Contact Celsis Webinar Ask a Question
</td>
</tr>
</tbody>
</table>

Anonymous · ‎03-15-2013

Liz,
Just realized that the snippet is stripping out styles. Here's how you can get the same result -

Add your style block in the custom HTML HEAD section of the "Edit Page meta tags" dialog as shown below -

Create snippet without style as shown below -

Place the snippet on the Landing Page (LP) and you will see the styles. Here's my example LP with your style http://na-qe.marketo.com/lp/socialoct/raj_regression_LPWithSnippetStyle.html

Anonymous · ‎03-15-2013

Yes! This is great! THANK YOU!

One final question...where do you edit meta tags within the snippet? I know where to do that in landing pages, but am not seeing the option inside of the snippet.

Thanks again!

Liz

Anonymous · ‎03-15-2013

Oh...wait. It just clicked. You mean to create the snippet, and put the style into the meta tag on the landing page. Got it.Thanks so much for your help!

Anonymous · ‎03-15-2013

The meta tags are part of the Landing Page editor.