2

I've seen several questions about how to use civimail header/footer but can't find a best practice for coding.

I know email coding can be hairy especially since clients handle things differently and there is no "standard." I've done some basic homework. CSS styles are typically inline. There is usually the standard HTML document structure with DOCTYPE, head, and title tags. The styles are placed in the /head section. The "problem" is that (as I understand it) HTML requires only one /head /body tag. So if we want HTML in the Header / Body / Footer how should it be coded? Is there a post-process to strip or merge tags? Sorry if this is naive, this my first foray into email coding.

Note: I tried to put all the styles in the template header but they were ignored in the body (probably a scope issue.)

I see a related question: How can I use <html>, <head>, <body> tags in a mailing? however, I'm not using CKeditor and still have issues.

Do we need some sort of Wrapper Template defined?

Improve this question

3 Answers 3

Reset to default
3

I've been using something like this by adding HTML to the CiviMail Header and Footer options.

It works nicely, wraps around the content area so that no HTML has to go in that area if not wanted to do so. Works best with Single column newsletters, which I believe work best on mobile anyway.

Improve this answer
2
  • I see - so you have no /head tag at all. Then you open the /body tag in the header. I presume you close it in the content somewhere ? will play with this a bit.
    – Sonicthoughts
    Aug 12, 2015 at 19:11
  • @Sonicthoughts, I think the body tag should be closed at the bottom of the footer code.
    – Laryn
    Aug 13, 2015 at 14:06
1

I've created a header and footer that "wraps" the body HTML similar to what @Dana has done, but ours has a tag that includes a link to a CSS file. We then use an extension which converts all styling to inline CSS as the email sends. It's worked really well for us and has allowed for some decent flexibility in email layout and style.

https://github.com/eileenmcnaughton/nz.co.fuzion.cssinline

Improve this answer
5
  • clever way to maintain styles! I noticed that extension has not been updated to 4.6 - are you using 4.6 or 4.4? It sounds like manually keeping opening the body tags header and closing in the footer is the way to go.
    – Sonicthoughts
    Aug 14, 2015 at 18:13
  • Also, we are using mandrill and I just noticed you can do inline css by changing the header: bit.ly/1WpDjCw but that may slow down for each mail. will check it out - just concerned about maintaining cssinliner.
    – Sonicthoughts
    Aug 14, 2015 at 18:21
  • We just updated to 4.6 and so far the cssinline extension hasn't been affected. If you aren't using the Mandrill extension you might take a look at that as well, I believe the newer version of that support bulk as well as transactional emails. We use SendGrid and had an extension built to capture tracking data. It's been recently updated to be compatible with Civi 4.6 but I haven't submitted the new version to the Extensions directory, the Civi 4.4 version is here: github.com/fulltrucker/com.imba.sendgrid
    – Evan
    Aug 14, 2015 at 18:58
  • Also, the maintainer of cssinline is highly active in the Civi community, my sense it will be supported for a while. If Mandrill has functionality to do that, it's worth a shot. MailChimp does an amazing job of inlining CSS when you use that service, I would expect Mandrill to be on par.
    – Evan
    Aug 14, 2015 at 19:01
  • Do you think it would be useful to develop an extension to add an header and footer tokens for transactional emails? Do you know if anyone has already done so?
    – masetto
    Aug 8, 2022 at 12:50
0

I doubt this is "best practice" but thanks for the hint from @Dana I used all css styles and meta in the tag and closed it.

I kept the open in the header. Made sure the template HTML does not have any or tag anywhere. Then added the closing and in the footer.

This is definitely hackish but seems to work. I don't know if the html parsing is supposed to do this but a nice feature might be to have an option for each of these (header/body/footer) to strip the head, html and body tags when creating a template. but love to hear a better way to do this!

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.