“Omni” Documentation by “StampReady Templates” v1.4


“Omni”

Created: June
By: StampReady
Email: support@stampready.net

Thank you for purchasing Omni'. We create high quality E-mail Templates and marketing tools. Please, contact us here if you encounter any issues.


Table of Contents

  1. HTML Structure
  2. Changing Images
  3. Responsive Coding
  4. Changing slider (Optional)
  5. Editing with StampReady
  6. Mailchimp Support
  7. Sources and Credits

A) HTML Structure - top

Please, open any Text Editor. We prefer Coda if you own a Mac, Sublime Text if you own Windows.

When we encounter a snippet of code that deserves some extra attention, we simply comment it. As example:

HTML Structure

In the example above, we've created a table holding 5 Table Dividers. Pay attention to the Table Dividers that hold text or images, as you'd like to edit these. To modify any Table Divider that holds an image, simply replace the 3 images named 'col_image_1.jpg', 'col_image_2.jpg' and 'col_image_3.jpg' in folder called 'images'.

In fact, to change images, you don't even need to require any coding knowledge as you simply swap existing images.

When you encounter a Table Divider that holds text, you can simply delete it and type in whatever you like. Just be sure to never ever delete a single tag, as it may result in errors. Save your file when your done.

Note, this template is build with valid HTML and inline CSS. We used a lot of tricks to render it beautiful as possible in every Mail Client. It should work with any Mail Service that supports HTML Tags.


B) Changing Images - top

Changing images is really easy. Just open the folder called 'images' and replace them with yours. The Template should automatically change replace the images.

HTML Structure


C) Responsive Coding - top

Please, open up the sample.html and resize your window. It's a clear working example of how Responsive design works. Allow us to explain what happens in the background.

E-mail Templates used to be static and limited. Lately, it's been possible to manipulate the width, colour, height and behaviour of any e-mail template based on what device you use with Media Queries. Media queries, for a basic developer, is not scary at all. Let's have a look:

Can you see what happens? Whenever your window is smaller than '640px', the table that holds the class of .myTable decreases to '440px' and changes background-color to 'blue'. When your window getting resized even smaller to '479px', the table that hold the class of .myTable will get even smaller and the background-color will change to green.

This is what happens with all the code the write. I told you it's not so scary?


D) Changing Slider (If slider exists) - top

There's a image called 'HeaderSprite.jpg' in the images folder. This image contains 3 images next to eachother, each with a width of 600 pixels. Simply adjust this slide and overwrite it in the same 'images' folder. Also, there's a image called 'header.jpg' for browsers that don't support the slider.

HTML Structure


E) Editing with StampReady - top

StampReady allows you to simply save, edit, debug and export your newsletters. No coding knowledge required. No special tags required. Just import and edit right away.

You might want to create a free StampReady account. It's easy. Type in your desired Username, E-mail Address and Password.

Next, import your template by selecting a .html file from your hard drive or simply drag and drop in the Textarea. You'll also be able to paste in any url that leads to a E-mail Template online and Stampready will automatically render the e-mail.

Go ahead and edit text and images. It's easy. When your done, simply press the 'Save Template' button on the very top right to save your newsletter. To go to your personal StampReady Hub, click on your thumbnail and click on 'My Hub'.

From here, you'll be able to export and send any newsletter you have edited.

To buy StampReady, simply go here: http://stampready.net/app/


F) Mailchimp Support - top

Please, follow these steps to import any Template to MailChimp:

1. Go to http://www.mailchimp.com and login.
2. Simply go to My Templates.



3. Click 'Import Template' and choose your this Template from the desktop.



4. Simply click on upload and you're good to go!

Be sure to have all your images hosted on your own server. For example: 'http://www.yourwebsite.com/images/logo.jpg'

Here is a clear explanation of how to import a template: http://kb.mailchimp.com/article/how-do-i-import-a-template/

Template Language: Getting Started with MailChimp’s Template Language: http://kb.mailchimp.com/article/how-do-i-upload-an-image/
Template Language: Custom Template Showcase: http://eepurl.com/cdN2v
Template Language: Creating Editable Template Styles: http://eepurl.com/ck1yj
Template Language: Working With Variant Selectors: http://eepurl.com/ck349
Template Language: Support: http://kb.mailchimp.com/topic/custom-templates

HTML Structure


G) Sources and Credits - top

We've used the following images, icons or other files as listed.


Once again, thank you so much for purchasing Omni'. You may contact us here. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

StampReady Templates

Go To Table of Contents