Differences

This shows you the differences between two versions of the page.

Link to this comparison view

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>​