NMS and HTML/CSS template

lleighh · Post by **lleighh** » Tue Jan 02, 2007 8:35 pm

I've been trying to use NMS 1.01 (on CMSMS 'Maui') with a template I tweaked from OSWD. The code and css are included below. Here's a link to my site: http://www.llhargrove.com.

The template looks good in preview and the NMS message gets sent out without any errors but when I check the emails sent out they don't look like the template at all ... it's just a normal email ... no images or styling.

I've seen a lot of discussion on the board about NMS not playing nicely with templates but I just wanted to check one last time to see if anybody has a fix for it ... I'm really close to just using a third-party newsletter script. (btw, any suggestions for a good newsletter script with bulk import?)

Code: Select all

<!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" xml:lang="en" >
<head>
<title>{sitename} - {title}</title>
{metadata}
{stylesheet}
{cms_selflink dir="start" rellink=1}
{cms_selflink dir="prev" rellink=1}
{cms_selflink dir="next" rellink=1}
</head>
</__body>
<div id="siteLock">
<div id="header">
	<h2><a href="index.html" title="Back to Home">llhargrove.com</a></h2>
	<ul>
		<li><a href="http://www.llhargrove.com" target="_blank">Home</a></li>
		<li><a href="http://llhdirect.com/hhh/index.php?page=pray" target="_blank">Prayer Needs</a></li>
		<li><a href="http://llhdirect.com/hhh/index.php?page=press_kit" target="_blank" class="style1">Press Kit</a></li>
                         <li><a href="http://llhdirect.com/hhh/index.php?page=next-newsletter" target="_blank" class="style1">Next Issue</a></li>
	</ul>
</div>
<div id="block">
<div id="textos">
	<h1>Newsletter <span> JAN. 2007</span></h1>
            <p>{$message_text}</p>
</div>
</div>
</div>
<__body>
</__html>

Code: Select all

body {
	margin: 0;
	padding: 0px;
	background-color:#000000;
	background-image: url(images/swirl1.gif);
	_text-align: center;
}

p {
	position: relative;
	width: auto;
	float: left;
	margin: 3px 10px;
	padding: 4px;
	display: block;
	text-align: justify;
	line-height: 20px;
	text-indent: 10px;
}

div#siteLock {
	background: transparent;
	margin: -5px auto 5px auto;
	text-align: center;
	padding: 0;
	float: none;
	position: relative;
	height: auto;
	width: 592px;
	clear: all;
}

div {
	padding: 10px;
	margin: 0 auto 0 auto;
	text-align: justify;
	color: #333;
	font-family: arial, times, Times, georgia, serif;
	font-size: 12px;
	height: auto;
	background-color:#E5EBDF;
}

div#block {
	width: auto;
	font-size: 12px;
	height: auto;
	position: relative;
	float: left;
	background-color:#E5EBDF;
}

div#textos {
	padding: 8px;
	margin: 0 auto 0 auto;
	text-align: justify;
	color: #333;
	font-family: verdana;
	font-size: 12px;
	height: auto;
	float: left;
	position: static;
	line-height: 20px;
	background-color:#FFFFFF;
}

div#header {
	position: static;
	width: auto;

	/* IE Instruction */
	_width: 597px;

	padding: 0;
	color:#FFFFFF;
	background-color:#323232;
}

/* SITE TITLE */

h2, h2 a {
	font-size: 19px;
	text-transform: uppercase;
	letter-spacing: 16px;
	text-decoration: none;
	color: white;
	text-align: center;
	font-family: times;
	padding: 32px;
	margin: 0;
	text-shadow: 0 3px 1px #000;
}

/* ARTICLE TITLES */

h1 {
	color:#464646;
	font-family: Times;
	letter-spacing: -2px;
	font-size: 40px;
	line-height: 35px;
	padding: 2px;
	margin: 0;
	font-weight: 500;
	margin-left: 14px;
	margin-top: 10px;
	max-width: 245px;

	/* IE Instruction */
	_width: 245px;

	text-align: left;
	font-weight: normal;
	text-shadow: 0 1px 5px #ADADAD;
	border-bottom: 1px solid #ADADAD;
}

h1 span {
	color:#538A1F;
	font-size: 12px;
	font-family: arial;
	font-variant: small-caps;
	letter-spacing: 2px;

	/* IE Instruction */
	_letter-spacing: -1px;
	_margin-left: -3px;

	text-align: right;
	text-shadow: none;
}

/* MENU */
	/* LISTS */

.style1 {
            color: #996600
}


ul {
	width: auto;

	/* IE Instruction */
	_width: 597px;

	margin: 0;
	padding: 6px;
	position: relative;
	background-color:#CC9900;
	display: block;

	/* MENU FONT */
	font-family: Helvetica, Geneva, sans-serif;
	font-weight: 300;
	font-size: 12px;
	color:#FFFFFF;
}

li {
	display: inline;
	margin: 0;
	list-style: none;
	padding: 6px;
}

li a:link, li a:visited
{
	padding: 10px 6px;
	color:#CBF3A6;
	text-decoration: none;
	background: transparent;
}

li a:link:hover, li a:visited:hover
{
	color: white;
}

li:hover, li.over {
	background-color: #42691E;
	color: #FFFFFF;
	text-shadow: 0 1px 2px #26440A;
}

div#textos a:link, div#textos a:visited
{
	color:#444;
	border-bottom: 1px dotted #5E952C;
	background-color: white;
	cursor: move;
	text-decoration: none;
	padding: 2px;
}

div#textos a:link:hover
{
	color:#000;
	background-color:#E3F7DA;
	text-decoration: none;
	padding: 2px;
}

/* IMAGES */
img.left {
	float: left;
	position: relative;
	margin: 5px 5px 0 0;
	padding: 3px;
	background-color:#FEFFF3;
	border: 1px solid #DFF5D7;
}

img.right {
	float: right;
	position: relative;
	margin: 5px 0 0 5px;
	padding: 3px;
	background-color:#FEFFF3;
	border: 1px solid #A6DF8F;
}

img:hover, img.over {
	background-color:#C6EDB6;
	border: 1px solid #7ACC59;
}

lleighh · Post by **lleighh** » Thu Jan 04, 2007 2:37 am

after too many hours staring at that NMS screen i figured it out. The template cannot have any css in it. Not even inline styles. So I went back to sticks and stones ... table and font tags! I don't care. I'm just glad it works.

So if you decide to try it with a custom made template ... don't use any css (external, embeded or inline).

calguy1000 · Post by **calguy1000** » Thu Jan 04, 2007 2:54 am

For any email to reliably be received by the umpteen email clients out there, and look properly, the email has to be entirely styled inline.

I researched this thoroughly before adding this functionality.

AR · Post by AR » Sun Jan 07, 2007 6:44 pm

I use the NMS module with a self made template exclusivly for mailings, which works great.
Try it with "literal" tags around the css in the template. This works great for me.

diad · Post by **diad** » Wed Feb 07, 2007 6:27 am

Can you show an example snippet of this?

thanks

reidjazz · Post by **reidjazz** » Thu Mar 29, 2007 7:37 pm

AR wrote: I use the NMS module with a self made template exclusivly for mailings, which works great.
Try it with "literal" tags around the css in the template. This works great for me.

Not sure what you mean by "literal" tags...could you include an example?

Thanks!
Todd

jbwhite · Post by **jbwhite** » Thu Mar 29, 2007 9:00 pm

reidjazz wrote: Not sure what you mean by "literal" tags...could you include an example?

{literal}
.class {
css stylings
}
{/literal}

Keeps cms from trying to interpret the {} in your css as code.

reidjazz · Post by **reidjazz** » Thu Mar 29, 2007 10:33 pm

OK...so {literal}{/literal} around each tag?

Todd

Dee · Post by **Dee** » Thu Mar 29, 2007 10:42 pm

reidjazz wrote: OK...so {literal}{/literal} around each tag?

Around any piece of code that contains brackets.
(you can put it around the whole block or individual pieces, as long as there are no brackets outside literal tags)

To insert brackets into your HTML outside literal tags, use {ldelim} and {rdelim}

For more info see this page and this FAQ.

Regards,
D

reidjazz · Post by **reidjazz** » Thu Mar 29, 2007 10:56 pm

Applauds for both of you!

Thanks very much!
Todd

reidjazz · Post by **reidjazz** » Thu Mar 29, 2007 11:40 pm

Actually what I tried that worked just as well, was to make an external file of my CSS and then linked to it in the normal fashion in the header instead of using the smarty {stylesheet} tag.

Todd

skypanther · Post by **skypanther** » Fri Mar 30, 2007 7:25 pm

Most email clients block external CSS files in the same way they block images....until a user clicks show images, your stylesheet is probably not going to get loaded. This is a spam prevention technique. I could easily link in a stylesheet built via PHP (or other language) that first counts and logs your email address. Images are blocked for that same reason, and that's how most read-counters are built in newsletter systems. So, to prevent your email address from being logged, email apps block remote files until you take an action like click a button (or add the sender's address to your address book).

Like calguy1000 said, inline styles (and actually HTML attributes rather than CSS) are the most sure way to ensure your content shows up the way you intended.

Tim

calguy1000 · Post by **calguy1000** » Fri Mar 30, 2007 7:43 pm

I love being right

CMS Made Simple Forums

NMS and HTML/CSS template

NMS and HTML/CSS template

Re: NMS and HTML/CSS template

Re: NMS and HTML/CSS template

Re: NMS and HTML/CSS template

Re: NMS and HTML/CSS template

Re: NMS and HTML/CSS template

Re: NMS and HTML/CSS template

Re: NMS and HTML/CSS template

Re: NMS and HTML/CSS template

Re: NMS and HTML/CSS template

Re: NMS and HTML/CSS template

Re: NMS and HTML/CSS template

Re: NMS and HTML/CSS template