CBT Style Guide

October 2014
Table of Contents

Introduction 3

Components 4

Table Structure 5

Editable Elements 6

HTML Template and Variables 7

Asset Allocation and Naming Conventions 8

Hyperlinks and Tracking 9

2 CBT Style Guide | October 2014

Introduction

We have created the CBT template in order to introduce brand

consistency, streamline the production process, employ best coding
practices, optimize performance, minimize display issues, and to
provide our customers with a clean, modern, easily recognizable
design.

In the following pages we will outline the look-and-feel of the template,

major components, and provide an easy way to update the code to
accomodate most layouts and variation, as well as Bronto naming
conventions and asset allocation.

CBT Style Guide | October 2014 3

Components

Sidebar

Preheader

Email Title
Sounds True Logo

Header

Add to Cart Buttons

Author Photo

Product Image

Main Content Area

Footer

4 CBT Style Guide | October 2014

Table Structure

The template is based on a single table, 640px in width, centered on a gray background.

CBT Style Guide | October 2014 5

Editable Elements

TITLE: Change the title to reflect the subject of the CBT (in <title></title>
tags).

PREHEADER: Find the preheader indicated by comments <!--preheader start-->

and <!--preheader end -->. Edit text inside the <span></span>
tags.

SIDEBAR: Find the sidebar indicated by comments <!--sidebar start -->

and <!-- sidebar end -->. Change product information, prices,
discounts, and product details. Change product image(s). Change Add to
Cart button background color.

HEADER TEXT: Change header/ subheader/ and author text (inside the <!--header
start --> and <!-- header end--> comments).

AUTHOR PHOTO: Use author-pic-template.psd to create the icon and point to it in the html.
Change the path to the photo (jpg), link to authors page, and alt tag). The
author picture is indicated in <!-- authors photo start --> and
<!--authors photo end -->.

CONTENT TEXT: Replace CBT text and add proper formatting.

COLORS: The template uses two colors -- darker and lighter -- that should
complement the colors of the products cover art. The colors are indicated
by <!-- lighter color --> and <!-- darker color -->
comments.

HYPERLINKS: Change all links including tracking information (see Hyperlinks and
Tracking, page 9).

6 CBT Style Guide | October 2014

HTML Template and Variables

The HTML template can be found on the Online

Media drive, in the soundstrue-ha/CBT folder.
Please, note the editable elements (see page
6). Most of them are commented for ease of
finding. Do not change the templates general
structure or fonts (the two fonts used are Arial
and Verdana).

Although the template should accomodate

most single product CBTs, sometimes there
might be a need to alter it to add different
elements (ie, another product, video, audio, or
another author).

Use your own discretion when adding other

elements, while keeping consistency of
the general look-and-feel. Table structure
shouldnt need to be altered.

CBT Style Guide | October 2014 7

Asset Allocation and Naming Conventions

Path to CBT assets:

Online Media drive/soundstrue-ha/CBT/
The CBT assets are located on the Online Media drive on the Sounds True network in the
soundstrue-ha/CBT folder. Two images--universal to all CBTs--are the logos (top logo and
footer logo). Paths to the two logos:
http://soundstrue-ha.s3.amazonaws.com/CBT/images/soundstrue-logo.jpg
http://soundstrue-ha.s3.amazonaws.com/CBT/images/st-logo-footer.png

The images folder also hosts the layered PSD template for the authors picture:
Online Media drive/soundstrue-ha/CBT/images/author-pic-template.psd
Path to the CBT specific images:
Online Media drive/soundstrue-ha/CBT/folder named with the last name of the
author/images/
Some examples:
http://soundstrue-ha.s3.amazonaws.com/CBT/roche/images/
for a Lorin Roche CBT
http://soundstrue-ha.s3.amazonaws.com/CBT/gelb/images/
for a Michael Gelb CBT

Authors picture should be named with the first and last name of the author, all lowercase, and
separated with a hyphen (-). Some examples:
http://soundstrue-ha.s3.amazonaws.com/CBT/gelb/images/lorin-roche.jpg
http://soundstrue-ha.s3.amazonaws.com/CBT/gelb/images/michael-gelb.jpg

Bronto Name:
CBT - yymmdd: Product Title (Fname Lname)
Some examples:
CBT - 141009: New Ayurvedic Teachings (Suhas Kshirsagar)
CBT - 141012: Yoga for Warriors (Beryl Birch)
8 CBT Style Guide | October 2014
Hyperlinks and Tracking

All hyperlinks in any CBT should include a string for tracking clicks:

http://URL?utm_source=soundstrue&utm_medium=CBT-email&utm_
campaign=Lname-Title-yymmdd

Add the url before the ? and last name of the author, product reference, and date separated
with hyphens following &utm_campaign=.

Example:
http://soundstrue.com/welcome/?utm_source=soundstrue&utm_
medium=CBT-email&utm_campaign=Roche-Radiance-141002 for Lorin
Roches The Radiance of Sutras CBT scheduled for Oct. 2, 2014).

You can search and replace Lname-Title-yymmdd with a string specific to the CBT.

CBT Style Guide | October 2014 9