If you already tried to include CSS in your e-mail, you probably discovered that it was not so easy.

Why? Because depending on the Mail Server (GMail, Yahoo,...), some part of the e-mail are stripped like the CSS stylesheet even if it's directly included in your e-mail. The best solution to make sure your e-mail won't be modified by the Mail Server when the user receives it is to include inline CSS in your Newsletter. That's not a very easy solution as your Joomla content fully use the CSS stylesheet, and some WYSIWYG editors don't accept CSS inline... But you will find in this tutorial how you can write a good e-mail using the Acajoom system and still use CSS classes!

This new way of writing a Newsletter has been developed with Acajoom 2.0.x.

Acajoom Mambot/Plugin

Since Acajoom 2.0.x, the Acajoom plugin (or the Acajoom mambot if you use Joomla 1.0.x) will be able to change all your CSS classes by inline CSS just before Acajoom sends the Newsletter. This feature can be very useful if you use the SmartNewsletter feature in Acajoom PRO to display all your Joomla content included in the SmartNewsletter.

Open the Acajoom plugin and you can see several fields to configure this feature.

You can write inline CSS in each field and just before sending your Newsletter, Acajoom will replace all your class by this inline CSS.

Example : class="contentheader_nws" will be replaced by the value you entered for 'Style for Content Headings', here 'color:blue'.

If you leave one field empty, Acajoom won't replace your CSS class so you can still use an included stylesheet if you prefer.

Some examples of inline CSS that you can enter in the Mambot/Plugin :

 color : red; to set the color of the text to red.

 border : 1px solid yellow; to have a yellow border (use only in a div).

 background-color : grey; to have a grey background.

 font-family: geneva,arial; to configure the family of your text.

Simply with those four parameters, you can customize your Content that you include in your Newsletter to show something very nice, very easily!

But of course, you can include any inline CSS in each field.

You can also include more than one parameter like :  background-color : grey; border : 1px solid yellow; color : red;
 

Example

I created this simple Newsletter using the default Acajoom template :  

 I configured my Acajoom Plugin (Mambot for Joomla 1.0.x) with :

 Style for Content : font-size : 10pt; font-family : verdana ; background-color : #eeeeee; border : 1px solid grey; padding : 10px 10px 10px 10px;
Style for Content Headings : font-weight: bold; font-size : 14pt; color : green;

And I received my Newsletter :

Why Acajoom doesn't replace the class when I save the Newsletter?

The reason is very simple... More and more, wysiwyg editor don't accept inline CSS. And there are right, inline CSS is not good at all for a website. But when you send an e-mail, inline CSS is the best way to make sure everybody will see the same thing. So Acajoom allows you to keep your CSS class on your site and send inline CSS. So Acajoom doesn't replace the class in your editor otherwise your WYSIWYG Editor could 'cut' it. Nevertheless, if you click on the 'Preview' button, Acajoom modify your class to display inline CSS, as if it was on your MailBox. There is a way to obtain the same result in your WYSIWYG editor and in your mailbox : include as well some CSS in your Joomla template such as contentpaneopen_nws, contentheader_nws... So your Newsletter will look good in your Archive section as well and in your WYSIWYG editor.

How to add more class to be automatically replaced?

 You will discover very quickly that this new function is very powerful! And if you write Joomla Content, you probably use a lot of CSS classes to make sure your Joomla Content will look great with your template. With the Acajoom Mambot (Acajoom Plugin in Joomla 1.5), you can add more classes to be automatically replaced. For that, you have to edit the file 'acajoombot.xml' that you will find in the folder Joomla10\mambots\acajoom or Joomla15\plugins\acajoom.

You will find some parameters: 

<param name="class_contentpaneopen_nws" ...
<param name="class_contentheading_nws" ...
<param name="class_eventpaneopen_nws" ...
<param name="class_eventheading_nws" ...
<param name="class_readon_nws" ...
<param name="class_subscriptionlink_nws" ...

 

And you can add your own parameter :

 <param name="class_contentheading" type="text" default="" label="Style for contentheading" description="my own replacer"/>

So Acajoom will replace class="contentheading" by style = "YOURFIELD" in your Newsletter.

Your parameter name must start with class_  and follow with the name of your class otherwise Acajoom won't recognize it.