The vB Geek

Go Back   The vB Geek > Geeki

Styles and templates in GAZ

From Geeki


Styles and templates in GAZ

There are so many freaking limitations imposed by trying to create HTML emails that look consistent across all readers that GAZ had to do something really special to make it's emails look so hot in so many of them. In this article, I will cover some basic information on the tools that GAZ uses to create HTML emails that look pretty decent in a huge range of email readers.

Inline style tools

Most common email readers will prevent downloading external images and style sheets until the user requests these items. This means that HTML emails look pretty freaking ugly in most email readers until you choose to 'download all images/content/whatever'. To add insult to injury, many popular email readers such as Gmail and Hotmail actually strip out the entire contents of your HTML email header. Since this area usually contains the style information, that means most (if not all) of your CSS will get eaten alive in these readers, not to mention that some email readers will replace style attributes with 'Cleaned' attributes.

To counter this, GAZ gives you the option to put a lot of your common CSS classes definitions in line. This can bulk up the size of the email a little, but the trade off is a much nicer looking email (for those email readers that do not clean out inline style attributes) even if the user doesn't download images.

To access the inline definitions, go to the inline style information (AdminCP -> GAZ -> Inline Style Info). There you can enter inline style information, or extract it from your existing CSS (you can extract all of your style CSS details by using the AdminCP -> GAZ -> Tools -> Rebuild in line style info link).

Note that any external images will get stripped out of Gmail and Hotmail, so you shouldn't really bother putting those in (the extraction tool doesn't). Remember too that some email readers are set to replace style attributes with 'Cleaned' attributes.

  • FROM <td class="alt2" align="center" style="background-color: #FFFFFF; color: #000000;">
  • TO <td class="alt2" align="center" 'Cleaned="background-color: #FFFFFF;color: #000000;">

Send yourself an email using the online demo to see what your email reader does, and remember that the type of email you receive (plain text or HTML) can be set here in the 'Geek Gazette Format' drop down menu.

CSS paths and prefixes

If you store your CSS as an external file, it may be important to edit the style's CSS to find and change any relative URLs to full URLs (i.e. AdminCP >> Style & Templates >> Style Manager >> Drop Down Menu >> Main CSS, and AdminCP >> Styles & Templates >> Style Manager >> Drop Down Menu >> StyleVars). Look for things like url(images/blahblah) and images/blahblah and change them to url( and respectively.


GAZ does not use any vBulletin templates when creating HTML emails. That means that if you have a highly customised header or navbar template, you will need to make relevant changes to the corresponding gaz_html_templatename (i.e., gaz_html_header or gaz_html_navbar or gaz_html_footer). The reason that GAZ does not use your existing templates is because most contain things like JavaScript which most email readers would consider a security threat.

All times are GMT. The time now is 02:38 PM.

Powered by vBulletin® Version 3.8.5
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.
Powered by vbWiki Pro 1.x. Copyright ©2006-2007, NuHit, LLC