How To Add HTML Styles in Konvey

If you already have your own tested HTML email templates — or if you prefer to build your own, rather than using built-in mailing builder functionality — Konvey’s HTML attributes make it easier to update once in Konvey.

Designing HTML email templates is not easy. There are so many email clients, all of which follow their own rules and virtually none of the standardization that HTML website design enjoys.

Some email systems, upon receiving HTML-formatted messages, will strip out all stylesheets (<style> elements) from the <head> section, the <body> section or both. To work around that issue, email coders have traditionally used inline styles (defined on each HTML element) instead of — or in addition to — included stylesheets.

The konvey-inline attribute, applied to a <style> tag, will cause Konvey to turn all the styles in that stylesheet into inline styles, while preserving the original stylesheet as well. For example, this stylesheet (anywhere in the head or body of the HTML document)...

<style konvey-inline>
    .myClass p {
    font-style: italic;
    }
    h4 {
    color: red;
    }
</style>

...will turn  <p class="myClass'>My Title</p> in your body HTML code into <p class="myClass" style="font-style: italic;">My Title</p>  and <h4>My Title</h4> into <h4 style="color: red;">My Title</h4> during the personalization process. The stylesheet will remain as well, but the konvey-inline attribute will be removed. The konvey-inline attribute does not require a corresponding value.

So, with that in mind, build or modify your email template to include all styles in a stylesheet in the <head> of the document and add the konvey-inline attribute to the opening <style> tag.  If you have a tested and proven template you’re already using, you can use this feature when you modify or add styles to it inside Konvey.

Note: if you plan to test your email during the building process using Litmus, Email On Acid or a similar test environment, this method will not work so well, as the konvey-inline attribute only works within the Konvey personalized preview.