Hi all,

I'm created a newsletter for a customer using Acajoom - so far so good, however the client has asked that all the links within the newsletter be styled using a specific colour and font size.

Given that I must use inline CSS styles (as it's an email) I'm having a hell of a time trying to style the a:link (or any of the other a: states)

Any guides that anyone can share on this topic ? It seems there isn't a very good online guide that I can fine

Thanks,

Martin

it's very hard to style for different state but if you just want specific style then you can do something similar to this

<a href="#" style="color:#FF0">test</a>

but if you put your style in head then few email prog skip that style so may be it's good to add inside html tag and it works for few progs. but not for all.

Thanks Nikunj

I've tried that option but it get's ignored (even within the Acajoom preview- which is a web page)

One option might be to use pseudo classes hoever that process isn't that clear either

Bugger... put the wrong tag in here and you lose your message.

So rather than the detailed post I'd just put together, here's the key points:

Instructions on changing styles in JNews
www.joobi.co/index.php?option=com_conten...7#Template-CSS-style

Example CSS for Acajoom to format a few things:

<style type="text/css">
<!--
body {
background-color: #DADADA;
background-image: url(<ABSOLUTE URL TO IMAGE>);
/* Note dont use background-repeat - it breaks in Outlook 2007 and 2010 */}
.LN:Link {color: #FFFFFF}
.LN:visited {color: #FFFFFF}
.LN:hover {color: #009bd9}
.LN:active {color: #990033;}
A {/* Formats all links */
text-decoration: none;}
.subscriptionlink_nws { /* Formats Subscription link */
font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #004386;
}
-->
</style>


Campaign Monitor's guide to CSS support in email clients
www.campaignmonitor.com/css/

Also, the code for putting the classes in:

<a href="..absolute url..." class="LN">

based on example style above.


The style section should be at the top of the email template. You'll find that the Acajoom preview breaks as it loads and prioritises the CSS in this order:
- joomla admin css
- current template css
- email css
so the only way to see the result is a preview email to yourself, not just viewing it on the screen.

Thanks for all the info. I'll be looking it over. I'm using jNews (free version) and I am assuming that most of the issues using Acajoom would be the same as jNews.

Question: Is it possible that some of this has more to do with the default editor than with the newsletter program?

Sorry for the late reply on this one. It must have slipped through my inbox to do...
We do a lot of email templates for a company that do mass mailouts for clients.

Basically its a pain in the ass trying to comply with all the different mail clients, they are all different and some use old rendering engines and lots of other cruddy stuff. Gmail hates background images and outlook can cause a few dramas as well. But here are some important points to get you across the line for most things...

Because different applications & clients render html emails in different ways and using different rendering engines, there are a few things that we need to adhere to so that the email displays correctly everywhere.

1. Do not include the standard html,head,title & body tags. The email should start with a table declaration with the width of 100%. If you want to set background colours and background images...do them on this table by using the "style=" attribute.

2. If you are going to be doing background colours/images, then do it using the above technique but also add a <style> body { ... } </style> to the top of the document as well.

3. In-line CSS is the way to go. Rather than declaring classes at the top...include the CSS in the actual attribute. This is only for really old email clients. So it's not 100% required but we like to do it still.

4. Any images or links inside the template should be absolute urls. Do not use "../images/logo.png", instead use the full url.

5. No external declarations. CSS or Javascript cannot be declared externally.

6. Javascript is not allowed.

7. Embedding any objects is also not allowed (this includes flash videos or any other type of embed). 

8. Try to use table layouts at all times. 


That's pretty much it. Everything at the top is pretty strict except for point 3. As I mentioned, online very old email clients (eg: Outlook on Win98) require CSS inside attributes...but it's a good practice.

here is an example of one of our layouts for a nightclub...
realworldmedia.com.au/clients/brownalley/newsletter/

If anyone is interested I have a massive xl spreadsheet which details the ins and outs of compliancy across all major mail clients..


cheers,

Anthony S.

I can thoroughly recommend this book if you often need to develop HTML emails:

Create Stunning HTML Email That Just Works!, by Mathew Patterson

If you are interested, I suggest ordering the digital bundle (PDF, ePub and/or Kindle). Unlike the book itself, I am not prepared to recommend Sitepoint's shipping performance from their overseas distribution centre.

Russell Searle
Principal Consultant | Psicom | Melbourne, Australia

Thanks so much! I really appreciate you taking the time to respond so thoroughly!