NMS and HTML/CSS template

Have a question or a suggestion about a 3rd party addon module or plugin?
Let us know here.
Post Reply
lleighh
Forum Members
Forum Members
Posts: 59
Joined: Tue Apr 11, 2006 2:40 pm

NMS and HTML/CSS template

Post by lleighh »

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
Forum Members
Forum Members
Posts: 59
Joined: Tue Apr 11, 2006 2:40 pm

Re: NMS and HTML/CSS template

Post by lleighh »

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
Support Guru
Support Guru
Posts: 8169
Joined: Tue Oct 19, 2004 6:44 pm
Location: Fernie British Columbia, Canada

Re: NMS and HTML/CSS template

Post by calguy1000 »

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.
Follow me on twitter
Please post system information from "Extensions >> System Information" (there is a bbcode option) on all posts asking for assistance.
--------------------
If you can't bother explaining your problem well, you shouldn't expect much in the way of assistance.
AR

Re: NMS and HTML/CSS template

Post by AR »

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

Re: NMS and HTML/CSS template

Post by diad »

Can you show an example snippet of this?

thanks
reidjazz

Re: NMS and HTML/CSS template

Post by reidjazz »

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

Re: NMS and HTML/CSS template

Post by jbwhite »

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

Re: NMS and HTML/CSS template

Post by reidjazz »

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

Todd 
Dee
Power Poster
Power Poster
Posts: 1197
Joined: Sun Mar 19, 2006 8:46 pm
Location: the Netherlands

Re: NMS and HTML/CSS template

Post by Dee »

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

Re: NMS and HTML/CSS template

Post by reidjazz »

Applauds for both of you!

Thanks very much!
Todd
reidjazz

Re: NMS and HTML/CSS template

Post by reidjazz »

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

Re: NMS and HTML/CSS template

Post by skypanther »

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
Support Guru
Support Guru
Posts: 8169
Joined: Tue Oct 19, 2004 6:44 pm
Location: Fernie British Columbia, Canada

Re: NMS and HTML/CSS template

Post by calguy1000 »

I love being right :)
Follow me on twitter
Please post system information from "Extensions >> System Information" (there is a bbcode option) on all posts asking for assistance.
--------------------
If you can't bother explaining your problem well, you shouldn't expect much in the way of assistance.
Post Reply

Return to “Modules/Add-Ons”