<section>
|
<div class="help-content">
|
<h3 class="info-title smaller" data-id="#pages/email">Email Templates</h3>
|
<!-- #section:pages/email -->
|
<div class="info-section">
|
<ul class="info-list list-unstyled">
|
<li>
|
Ace admin template has an <a href="../build/email.html">email converter</a>
|
which takes your HTML code
|
in Bootstrap style and converts it to table layout
|
appropriate for email clients.
|
</li>
|
|
<li>
|
For starters, there are a few samples provided that you can use and modify to make your own email templates:
|
<ul>
|
<li><code data-open-file="html" class="open-file"><span class="brief-show">build/demo/demo-</span>confirmation.html</code></li>
|
<li><code data-open-file="html" class="open-file"><span class="brief-show">build/demo/demo-</span>navbar.html</code></li>
|
<li><code data-open-file="html" class="open-file"><span class="brief-show">build/demo/demo-</span>newsletter.html</code></li>
|
<li><code data-open-file="html" class="open-file"><span class="brief-show">build/demo/demo-</span>contrast.html</code></li>
|
</ul>
|
|
Inside email converter, when you select one of the above demo files, some of the options
|
on left side are also modified.
|
</li>
|
|
<li>
|
You should consider the following for better results with converter.
|
</li>
|
|
<li>
|
Currently it only works best in Chrome browser as the conversion is done inside the browser
|
and "getMatchedCSSRules" function is used which is only available in webkit browsers.
|
</li>
|
|
<li>
|
Use <code>.row</code> and <code>.col-sm-*</code> elements to have multiple columns inside a row which will be stacked on top of each other in small devices.
|
<br />
|
If you add <code>.sm-border</code> class to <code>.row</code>, there will be a border separating stacked columns on small devices.
|
|
<br />
|
|
You can also use a single <code>.col</code> class for less padding.
|
|
</li>
|
<li>
|
<code>.row</code> element can have <code>.padding-*</code> class for different content padding values.
|
<br />
|
If you use this, the paddings will be fixed and won't be changed on smaller screens:
|
<br />
|
<pre data-language="html">
|
<div class="row padding-12"></div>
|
</pre>
|
Use <code>.margin-*</code> class on <code>.row</code> to specify spacing between its columns:
|
<pre data-language="html">
|
<div class="row margin-8"></div>
|
</pre>
|
</li>
|
|
<li>
|
Use <code>.clearfix</code> and <code>.pull-left</code> or <code>.pull-right</code> classes to have a table with multiple rows and columns which won't be stacked on top of each other in small devices.
|
</li>
|
|
<li>
|
Use <code>.navbar</code> class for a navbar which has 100% width.
|
</li>
|
|
<li>
|
Use <code>.space-*</code>, <code>.break-*</code> and <code>.hr-*</code> classes for spacing or horizontal lines.
|
<br />
|
For example <code>.break-12</code> adds a <i>12px</i> space with body background color
|
and <code>.space-12</code> adds a <i>12px</i> space with content background color.
|
<br />
|
For <code>.hr-*</code> you can also add the optional
|
<code>.padding-*</code> to add padding from sides.
|
<br />
|
If you have nested rows and columns, don't use above classes inside inner rows and columns.
|
</li>
|
|
<li>
|
<div class="alert alert-info">
|
For each of the above classes (.row, .clearfix, .navbar, .space-*, .hr-*) you can use inline styles to override background color:
|
<code><div class="space-12" style="background-color: #FF0000;"></div></code>
|
</div>
|
</li>
|
|
<li>
|
Add <code>.pull-left</code>, <code>.pull-right</code> class to <code>img</code> elements
|
to make them automatically float to right or left on small devices.
|
</li>
|
|
<li>
|
You can use some classes to style your email. The following classes can be used:
|
<ul>
|
<li>
|
Alerts, such as <code>.alert-info</code>, etc ...
|
</li>
|
<li>
|
Background classes such as <code>.bg-primary</code>, etc ...
|
</li>
|
<li>
|
Wells, such as <code>.well</code>, <code>.well-sm</code>
|
</li>
|
<li>
|
Text colors and styles such as <code>.blue</code> <code>.red</code>
|
<code>.text-info</code>
|
<code>.bigger-110</code>, etc ...
|
</li>
|
<li>
|
Button & label classes such as
|
<code>.btn-info</code>, <code>.btn-sm</code>, <code>.btn-white</code>, <code>.no-border</code>, <code>.label-success</code>, etc ...
|
</li>
|
<li>
|
Alignment classes such as <code>.text-right</code>, <code>.align-middle</code>, etc ...
|
</li>
|
<li>
|
List classes such as <code>.list-unstyled</code>, <code>.spaced</code>, etc ...
|
</li>
|
|
<li>
|
And different classes or inline styles such as <code>font-size</code>,
|
<code>line-height</code>, <code>text-decoration</code> <code>list-style-type</code>, etc ...
|
</li>
|
</ul>
|
</li>
|
</ul>
|
</div>
|
</div>
|
<!-- /section:pages/email -->
|
</section>
|
