home > support > solution library > email styling

Email styling

When TourCMS sends email to your customers, suppliers or agents it sends it as HTML allowing complex things like price breakdowns and itineraries to be displayed in a nice, tabular format. In addition to this HTML gives you some extra control over the look and feel of the email.

Keeping it simple

The first thing to note is that you do not need to write any HTML at all. When you write your email templates, if you wish to insert a new line just hit enter and TourCMS will add the correct HTML tags to create your new lines and paragraphs automatically when the email is sent.

There are however a few simple HTML tags you may find useful when formatting your emails:

tags will make the text between them bold

tags will make the text between them italic

The <img> tag can be used to add an image to your email, perhaps your company or a trading body logo. For example:

<img src="http://www.tourcms.com/images/squarelogo73px.gif" alt="TourCMS">

The <a> tag can be used to add links to text, perhaps linking to your homepage. For example:

<a href="http://www.tourcms.com">TourCMS</a>

TourCMS

Getting more advanced: CSS, custom header / banner

At the time of writing (August 2013) the level of CSS support across email clients is unfortunately not as high or as consistent as that across modern desktop or even mobile web browsers, particularly when considering webmail such as Gmail and Yahoo.

Some top tips:

Generally speaking CSS in email clients work best inline, rather than in external stylesheets or style tags. For example to make some bold text red: Some text
Don't forget TourCMS will add line breaks ( ) anywhere you have a new line in your markup, possibly causing extra large gaps between paragraph tags or following heading tags so strip those out if you experience problems
Campaign monitor maintain a great list of supported features

Adding a custom header / banner

Currently any design will need to be copied between email templates in TourCMS, so keep it simple, and self contained, try to avoid too many levels of nested HTML tags. If you know a good web designer / developer, perhaps send them this page and ask them to make you a simple header.

Example

Here's a simple example using good old fashioned HTML tables which should render well across email clients, resizing to the width of the client window.

Screenshot

Code


<div style=" background: #5E4599; padding: 10px; border-radius: 4px;">
  <table style="width: 100%; border-collapse: collapse;">
    <tr>
	  <td style="width: 104px;">
	    <img src="http://www.tourcms.com/images/logo-purple.gif" alt="TourCMS" />
	  </td>
	  <td style="font-family: arial, helvetica, sans-serif; vertical-align: top; text-align: right;">
	    <span style="color: white;"> 44 (0) 1111 111111</span><br />
	    <a href="mailto:info@example.com"  style="color: white; ">info@example.com</a><br />
		<a style="color: white;" href="http://www.example.com">www.example.com</a><br />
	  </td>
	</tr>
  </table>
 </div>

Stripping out line breaks

Here's a handy tool to remove line breaks in HTML code, just paste your code in to the top box, click the button and then copy the generated code into your email template.

To make updating the code in the future easier, keep a copy of your original code somewhere safe.

Advanced technique - Adding markup to the document head

As mentioned above, inline styles work best for email, so make sure any critical styles are added inline. However, it can sometimes be useful to add markup to the document head, particularly if you have responsive styles, media queries or meta tags.

If a section of your markup should be added to the document head just wrap it in ^TOURCMS_HEAD_START^ and ^TOURCMS_HEAD_END^ tags. Any content placed between those two tags will be added to the document head.

NB: Don't add head, html or body HTML tags, TourCMS will add these in the correct place automatically.

Example:

^TOURCMS_HEAD_START^
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
^TOURCMS_HEAD_END^
<div style=" background: #5E4599; padding: 10px; border-radius: 4px;">
  <table style="width: 100%; border-collapse: collapse;">
    <tr>
	  <td style="width: 104px;">
	    <img src="http://www.tourcms.com/images/logo-purple.gif" alt="TourCMS" />
	  </td>
	  <td style="font-family: arial, helvetica, sans-serif; vertical-align: top; text-align: right;">
	    <span style="color: white;"> 44 (0) 1111 111111</span><br />
	    <a href="mailto:info@example.com"  style="color: white; ">info@example.com</a><br />
		<a style="color: white;" href="http://www.example.com">www.example.com</a><br />
	  </td>
	</tr>
  </table>
 </div>

TourCMS will add the following markup to the head, with the remainder added to the body:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Contact Info

Learn More

Follow Us