CMS Made Simple Forums

Content management as it is meant to be
https://forum.cmsmadesimple.org/

NMS and HTML/CSS template

https://forum.cmsmadesimple.org/viewtopic.php?t=9065

Page 1 of 1

NMS and HTML/CSS template

Posted: Tue Jan 02, 2007 8:35 pm
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;
}

Re: NMS and HTML/CSS template

Posted: Thu Jan 04, 2007 2:37 am
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).

Re: NMS and HTML/CSS template

Posted: Thu Jan 04, 2007 2:54 am
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.

Re: NMS and HTML/CSS template

Posted: Sun Jan 07, 2007 6:44 pm
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.

Re: NMS and HTML/CSS template

Posted: Wed Feb 07, 2007 6:27 am
by diad
Can you show an example snippet of this?

thanks

Re: NMS and HTML/CSS template

Posted: Thu Mar 29, 2007 7:37 pm
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

Re: NMS and HTML/CSS template

Posted: Thu Mar 29, 2007 9:00 pm
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.

Re: NMS and HTML/CSS template

Posted: Thu Mar 29, 2007 10:33 pm
by reidjazz
OK...so {literal}{/literal} around each tag?

Todd 

Re: NMS and HTML/CSS template

Posted: Thu Mar 29, 2007 10:42 pm
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

Re: NMS and HTML/CSS template

Posted: Thu Mar 29, 2007 10:56 pm
by reidjazz
Applauds for both of you!

Thanks very much!
Todd

Re: NMS and HTML/CSS template

Posted: Thu Mar 29, 2007 11:40 pm
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

Re: NMS and HTML/CSS template

Posted: Fri Mar 30, 2007 7:25 pm
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

Re: NMS and HTML/CSS template

Posted: Fri Mar 30, 2007 7:43 pm
by calguy1000
I love being right :)
All times are UTC
Page 1 of 1

Powered by phpBB® Forum Software © phpBB Limited