I'm looking to render html by passing a string to Responsys.
DynamicVariable.TEXT would be a string that looks like:
<button style="background-color: red; color: white; padding: 25px; border-radius: 4px; border: none; font-size: 18px; font-weight: bold">
Click Here
</button>
I've tried using ?html
<body bgcolor="white" style="margin: 0px; padding: 0px;">
${DynamicVariable.TEXT?html}
</body>
Also tried <#escape x as x?html>:
<body bgcolor="white" style="margin: 0px; padding: 0px;">
<#escape x as x?html>
<#noescape>${DynamicVariable.TEXT}</#noescape>
</#escape>
</body>
As well as <#noescape>
<body bgcolor="white" style="margin: 0px; padding: 0px;">
<#noescape>${DynamicVariable.TEXT}</#noescape>
</body>
but none of these work. Any help would be greatly appreciated!
I found the answer.
Using <#noescape> is correct. However, the code was not rendering because you need to leverage a document that is saved in the Content Library within Responsys.
<body bgcolor="white" style="margin: 0px; padding: 0px;">
<#noescape>${DynamicVariable.TEXT}</#noescape>
</body>
Related
I am trying to create a pdf report using dompdf. The report needs to have the company logo on the top of the first page as well as a header and footer on every page. I have found solutions for adding a header and footer to a dompdf document elsewhere on stackoverflow. The problem I'm running into is that the company logo needs to be above the page header on the first page and not displayed on other pages
something like this
Company Logo
- header
- content here
- footer
------
- header
- content here
- footer
Is there any way of doing this using dompdf?
This is kludgey, but it works. You can basically fake the different headers by creating a normal header using fixed positioning and the special page 1 header using absolute positioning. If you set things up in the right order the page 1 header will be rendered on top of the standard header, obscuring it.
<html>
<head>
<style>
#page {
margin: 0px;
}
#page :first {
margin-top: 100px;
}
body {
margin: 100px 20px 50px 20px;
}
#headerA {
position: fixed;
left: 0px; right: 0px; top: 0px;
text-align: center;
background-color: orange;
height: 90px;
}
#headerB {
position: absolute;
left: -20px; right: -20px; top: -200px;
text-align: center;
background-color: orange;
height: 190px;
}
#footer {
position: fixed;
left: 0px; right: 0px; bottom: 0px;
text-align: center;
background-color: orange;
height: 40px;
}
</style>
</head>
<body>
<div id="headerA">
<h1>Widgets Express</h1>
</div>
<div id="headerB">
<img class="logo" src="http://eclecticgeek.com/images/macro/ants.jpg" height="100" width="500">
<h1>Widgets Express</h1>
</div>
<div id="footer">
<p>Copyright, all rights reserved, yadda yadda</p>
</div>
<div id="content">
...
</div>
</body>
</html>
I have been experiment with Malsup's awesome jQuery cycle plugin and have hit a bit of a snag. I have been using mixed content in my transition div which has worked out fine. The problem occurs when I use pager within the transition divs. Essentially I would like the pager links to transition along with each div so I included the pager div within each transition div.
$(document).ready(function() {
$('#slider').cycle ({
fx: 'scrollLeft',
timeout: 10000,
speed: 500,
pager: '#pager'
});
});
IMAGE
TEXT
TEXT
TEXT
Try It Now!Terms & Conditions Apply
a
<!-- Content Display 1 -->
<div id="cs_1" class="show_content clearb">
<div class="">IMAGE</div>
<div class="helv reg all" style="width: 500px; font-size: 20px; padding: 0px 0px 10px 0px; color: #ff3e34;">TEXT</div>
<div class="helv reg all" style="width: 500px; font-size: 25px; padding: 0px 0px 15px 0px;">TEXT</div>
<div class="helv reg all" style="width: 500px; font-size: 18px; padding: 0px 0px 15px 0px;">TEXT</div>
<div class="button gradient3" style="height: 57px; width: 180px; margin-top: 20px;">
<div id="tryitnow">Try It Now!</div><div id="terms">Terms & Conditions Apply</div>
</div>
<div id="pager" style="z-index: 200; width: 200px; height: 1px; position: relative; top: -70px; right: 0px; bottom: 0px; left: 310px;">b</div>
</div>
<!-- Content Display 1 -->
<!-- Content Display 2 -->
<div id="cs_2" class="show_content clearb">
<div class="">IMAGE</div>
<div class="helv reg all" style="width: 500px; font-size: 20px; padding: 0px 0px 10px 0px; color: #ff3e34;">TEXT</div>
<div class="helv reg all" style="width: 500px; font-size: 25px; padding: 0px 0px 15px 0px;">TEXT</div>
<div class="helv reg all" style="width: 500px; font-size: 18px; padding: 0px 0px 15px 0px;">TEXT</div>
<div class="button gradient3" style="height: 57px; width: 180px; margin-top 26px;">
<div id="tryitnow">Try It Now!</div><div id="terms">Terms & Conditions Apply</div>
</div>
<div id="pager" style="z-index: 200; width: 200px; height: 1px; position: relative; top: -70px; right: 0px; bottom: 0px; left: 310px;"></div>
</div>
<!-- Content Display 2 -->
<!-- Content Display 3 -->
<div id="cs_3" class="show_content clearb">
<div class="">IMAGE</div>
<div class="helv reg all" style="width: 500px; font-size: 20px; padding: 0px 0px 10px 0px; color: #ff3e34;">TEXT</div>
<div class="helv reg all" style="width: 500px; font-size: 25px; padding: 0px 0px 15px 0px;">TEXT</div>
<div class="helv reg all" style="width: 500px; font-size: 18px; padding: 0px 0px 15px 0px;">TEXT</div>
<div class="button gradient3" style="height: 57px; width: 180px; margin-top 18px;">
<div id="tryitnow">Try It Now!</div><div id="terms">Terms & Conditions Apply</div>
</div>
<div id="pager" style="z-index: 200; width: 200px; height: 1px; position: relative; top: -70px; right: 0px; bottom: 0px; left: 310px;"></div>
</div>
<!-- Content Display 3 -->
The pager shows up fine on the first slide and transitions out exactly the way I want it to, it does not appear on the following three transitions although the test letters i put in the first two pager divs do. What is it that I am missing here?
Well after a bit more experimentation the fix was surprisingly simple but also had an odd result. All I did was supply a second parm to the pager call:
$(document).ready(function() {
$('#slider').cycle ({
fx: 'scrollLeft',
timeout: 10000,
speed: 500,
pager: '#pager, #pager2'
});
});
I renamed the pager on my second slide to pager2 and voila! However something odd happened, the slider appeared on the two subsequent panels that I had NOT renamed! When there was only one parm in pager they did not appear despite all having been named #pager. Once I added the second parm #pager2, all of the controls named #pager that had not appeared before now seem to be appearing. Removing the second parm reverts it back to the state where only the first set of controls appeared. Odd, but working so I'm not complaining.
I have out of order display problem in IE6 and IE8.
Following is the output screenshot in IE6 and IE8 :
http://img707.imageshack.us/img707/1875/61807760.jpg
Following is my HTML code :
<div>
<div style="width: 280px; float: left; height: 220px; background:url(images/content_box.gif) no-repeat; text-align: left; padding-left: 20px; padding-top: 20px;">
<div class="cont_featr"><div class="cont_txt"><b>Features</b></div></div>
<hr class="container_hr" align="center">
<div style="text-align: left;margin-left: 15px;">
<ul class="as_ul">
<li class="as_li">Immediate/Cron based delivery.</li>
<li class="as_li">Multilanguage support.</li>
<li class="as_li">Auto integration to any Joomla, vBulletin style.</li>
</ul>
</div>
</div>
</div>
Following is the CSS code :
.as_ul {
list-style: none url(images/tick.gif);
list-style-position:outside;
border: 1px solid #f00;
}
.as_li {
FONT-SIZE: 10pt;
FONT-FAMILY: Verdana, Sans-Serif;
background-image: url(images/tick.gif) no-repeat;
border: 1px solid #0f0;
}
.container_hr {
color: #888888;
background-color: #888888;
height: 0.8px;
border: 0;
width: 85%;
text-align: center;
}
.cont_featr {
background: url(images/featurs.png) no-repeat;
width: 40px; height: 40px;
}
.cont_txt {
FONT-SIZE: 11pt;
padding-left: 50px;
padding-top: 10px;
}
Please help.
Try giving .as_li or .as_ul the property/value zoom:1
I am injecting this code
<!-- IF postrow.S_FIRST_ROW -->
<div style="float: left;">
<script type="text/javascript"><!--'
google_ad_client = "pub-X";
google_ad_slot = "X";
google_ad_width = 200;
google_ad_height = 200;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div><!-- ENDIF -->
in viewtopic_body.html just before,
<div class="content">{postrow.MESSAGE}</div>
However, the post content wraps on the right side of the Google Ad but not below the Ad. I have tried many variations of float but the bottom part of the Ad is always blank.
I want to know how this wrapping issue can be fixed WITHOUT touching any other file in the PHPBB3 forum software except viewtopic_body.html. (PHBB3 Ver. 3.0.7-PL1)
You can the see the described problem at http://www.aawartan.org/viewtopic.php?f=14&t=2
for the first ad for the ins use
display: block; border: medium none; height: 200px; margin: 0pt; padding: 0pt; position: relative; visibility: visible; width: 200px;
for the second ad use for the ins tag..
style="display: block; float: left; clear: left; border: medium none; height: 200px; margin: 0pt; padding: 0pt; position: relative; visibility: visible; width: 200px;"
Example: http://img686.imageshack.us/img686/6889/screenshot1bu.jpg
This works fine in Webkit, but when I go to Firefox (Or IE8) it totally messed up. I've been staring at this for so long that I can't find any errors at all with it, so maybe one of you guys can point out where I'm going wrong.
CSS:
body {
font-family: Georgia, serif;
margin: 0px;
padding: 0px;
background: #222;
}
header {
background: #fff url('images/header-border.gif') bottom repeat-x;
width: 980px;
margin: 0px auto;
height: 100px;
padding: 0px 0px 0px 20px;
-moz-border-radius-topright: 4px; -moz-border-radius-topleft: 4px;
-webkit-border-top-right-radius: 4px; -webkit-border-top-left-radius: 4px;
border-top-right-radius: 4px; border-top-left-radius: 4px;
}
section {
}
article {
}
footer {
clear: left;
}
nav {
width: 980px;
margin: 0px auto;
height: 70px;
padding: 10px 0px 10px 0px;
font-size: 21px;
font-weight: bold;
font-family: Arial, serif;
}
nav a {
color: #fff;
text-decoration: none;
padding: 10px;
}
nav a:hover {
background: #060606;
}
#content {
width: 980px;
background: #fff;
padding: 0px 0px 0px 20px;
margin: 0px auto;
}
nav ul li {
float: left;
list-style: none;
width: 155px;
}
#left-column, #logo {
width: 560px;
margin: 0px auto;
float: left;
}
#right-column, #share {
width: 380px;
margin: 0px auto;
float: left;
height: 100%;
padding: 0px 0px 0px 20px;
border-left: 1px solid #d9d9d9;
}
address {
display: inline;
}
a img {
border: 0px;
}
.clear-left {
clear: left;
}
And the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="text/html; charset=UTF-8" />
<title>Webtint </title>
<link rel="stylesheet" href="http://localhost/wp-content/themes/clean/style.css" type="text/css" />
<link rel="pingback" href="http://localhost/xmlrpc.php" />
</head>
<body>
<nav>
<ul>
<li>home</li>
<li>tutorials <img src="http://localhost/wp-content/themes/clean/images/arrow.gif" alt="Arrow" /></li>
<li>resources <img src="http://localhost/wp-content/themes/clean/images/arrow.gif" alt="Arrow" /></li>
<li>articles <img src="http://localhost/wp-content/themes/clean/images/arrow.gif" alt="Arrow" /></li>
<li>contact</li>
<li>follow us</li>
</ul>
</nav>
<header>
<section id="logo">
</section>
<section id="share">
</section>
</header>
<div id="content">
<section id="left-column">
<article>
<h2>
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
<?php the_title(); ?>
</a>
</h2>
<time><?php the_time('F jS, Y') ?></time> by <address><?php the_author(); ?></address>
<?php the_excerpt(); ?>
<br /><br />
Read More
<?php comments_popup_link(
'<span class="boxed">No Responses »</span>',
'<span class="boxed"> 1 Response »</span>',
'<span class="boxed">% Responses »</span>'); ?>
</article>
<hr />
</section>
<section id="right-column">
<h2>Popular Posts</h2>
</section>
</div>
<footer>
</footer>
</body>
</html>
Screenshot in Firefox:
http://imgur.com/wvhI0.gif
Screenshot in Chrome: (How it's supposed to look)
http://imgur.com/sQK8S.gif
Screenshot in IE8:
http://imgur.com/7OnEJ.gif
Thanks for any help in advance :)
Basically, you're using mostly HTML5 specific elements, and they're not supported everywhere properly yet, especially IE8 out of those you listed.
For a quick look, Here's the list of elements added in HTML5.
Try using a debug tool like Firebug or the IE developer toolbar to figure out which elements are being placed wrongly and why.
Both let you hover your mouse over blocks and will highlight the corresponding HTML. You will be able to see exactly which element it is that is being placed incorrectly, and view the CSS to try and figure out why.
Johnny, does your solution also fix the incorrect rendering in Firefox 2 and Camino 1? Interesting, as I only know of the Javascript solution. Just to give you some more feedback on this: to learn more about getting HTML5 rendered properly in all major browsers, read this article by Nico Hagenburger. You can also use this script to render HTML5 in IE.
A more general article about HTML5 and CSS3 support in IE (e.g., your corners aren't rounded) in this article. For rounded corners in all major browsers (also in Opera) please read this one. There also exist general tables about support in all major browsers of HTML5 and CSS3.
EDIT: I just read an article about HTML5 pages not rendered properly when printing from within IE, because this JavaScript solution isn't loaded when printing a page. More info on doctype.com.