This shows you the differences between two versions of the page.
format [2017/07/26 08:23] |
format [2017/07/26 08:23] (current) |
||
---|---|---|---|
Line 1: | Line 1: | ||
+ | ====== Format ====== | ||
+ | A template's format is the overall wireframe, providing layout structure for where headers, content, sidebars, and footers are located. It is also where CSS code is stored. In terms of building a template, everything is stored in your format: [[section|sections]], [[block|blocks]], and [[slot|slots]]. | ||
+ | |||
+ | ===== Sample format ===== | ||
+ | |||
+ | The below code demonstrates a complete format, albeit with only a single block. | ||
+ | |||
+ | <code html sample-format.html > | ||
+ | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | ||
+ | <html xmlns="http://www.w3.org/1999/xhtml"> | ||
+ | <head> | ||
+ | <title></title> | ||
+ | </head> | ||
+ | |||
+ | <body> | ||
+ | <table width="100%" border="0" cellspacing="0" cellpadding="0" id="snt-document" class="mobilewrapper"><!--wrapper--> | ||
+ | <tr> | ||
+ | <td align="center" valign="top"> | ||
+ | | ||
+ | <!--SectionStart width="600"--> | ||
+ | <!--BlockStart name="2.2 Header Logo Left" width="600"--> | ||
+ | <table id="snt-content-header" class="mobile100pc" border="0" cellspacing="0" cellpadding="0"> | ||
+ | <tr> | ||
+ | <td colspan="3" class="snt-col-h"></td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td class="snt-colsplit" align="center" valign="top"> | ||
+ | <!--SlotStart type="ImageOnly" maxwidth="275"--> | ||
+ | <img src="http://placehold.it/275x140" /> | ||
+ | <!--SlotFinish--> | ||
+ | </td> | ||
+ | <td class="splitspacerHeader"></td> | ||
+ | <td class="snt-colsplit" align="center" valign="middle"> | ||
+ | <table class="table2col" border="0" cellspacing="0" cellpadding="0"> | ||
+ | <tr> | ||
+ | <td colspan="3" class="snt-col-h"></td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td class="snt-col-w"></td> | ||
+ | <td class="snt-text-slot logotext"> | ||
+ | <!--SlotStart--> | ||
+ | <h3>This is an H3</h3> | ||
+ | <p>This is a paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> | ||
+ | <!--SlotFinish--> | ||
+ | </td> | ||
+ | <td class="snt-col-w"></td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td class="snt-col-h" colspan="3"></td> | ||
+ | </tr> | ||
+ | </table> | ||
+ | </td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td colspan="2" class="snt-col-h"></td> | ||
+ | </tr> | ||
+ | </table> | ||
+ | <!--BlockFinish--> | ||
+ | <!--SectionFinish--> | ||
+ | | ||
+ | </td> | ||
+ | </tr> | ||
+ | </table> | ||
+ | |||
+ | </body> | ||
+ | </html> | ||
+ | </code> |