<h2 id="sidebars">Sidebars<a class="headerlink" href="#sidebars" title="Permanent link">#</a></h2>
<p>Sidebars are now dynamically populated by the box system, this requires a small change to unify the markup. Additionally the usage of <code><fieldset></code> has been deprecated due to browser inconsistencies and bugs and should be replaced with <code>section.box</code>.</p>
<p>Previous markup used in WoltLab Community Framework 2.1 and earlier:</p>
-<div class="highlight"><pre><span></span><code><span class="p"><</span><span class="nt">fieldset</span><span class="p">></span>
+<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal">1</span>
+<span class="normal">2</span>
+<span class="normal">3</span>
+<span class="normal">4</span>
+<span class="normal">5</span>
+<span class="normal">6</span>
+<span class="normal">7</span></pre></div></td><td class="code"><div class="highlight"><pre><span></span><code><span class="p"><</span><span class="nt">fieldset</span><span class="p">></span>
<span class="p"><</span><span class="nt">legend</span><span class="p">></span><span class="c"><!-- Title --></span><span class="p"></</span><span class="nt">legend</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">fieldset</span><span class="p">></span>
</code></pre></div>
+</td></tr></table>
<p>The new markup since WoltLab Suite 3.0:</p>
-<div class="highlight"><pre><span></span><code><span class="p"><</span><span class="nt">section</span> <span class="na">class</span><span class="o">=</span><span class="s">"box"</span><span class="p">></span>
+<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal">1</span>
+<span class="normal">2</span>
+<span class="normal">3</span>
+<span class="normal">4</span>
+<span class="normal">5</span>
+<span class="normal">6</span>
+<span class="normal">7</span></pre></div></td><td class="code"><div class="highlight"><pre><span></span><code><span class="p"><</span><span class="nt">section</span> <span class="na">class</span><span class="o">=</span><span class="s">"box"</span><span class="p">></span>
<span class="p"><</span><span class="nt">h2</span> <span class="na">class</span><span class="o">=</span><span class="s">"boxTitle"</span><span class="p">></span><span class="c"><!-- Title --></span><span class="p"></</span><span class="nt">h2</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"boxContent"</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">section</span><span class="p">></span>
</code></pre></div>
+</td></tr></table>
<h2 id="forms">Forms<a class="headerlink" href="#forms" title="Permanent link">#</a></h2>
<p>The input tag for session ids <code>SID_INPUT_TAG</code> has been deprecated and no longer yields any content, it can be safely removed. In previous versions forms have been wrapped in <code><div class="container containerPadding marginTop">…</div></code> which no longer has any effect and should be removed.</p>
<p>If you're using the preview feature for WYSIWYG-powered input fields, you need to alter the preview button include instruction:</p>
-<div class="highlight"><pre><span></span><code><span class="cp">{</span><span class="nf">include</span> <span class="na">file</span><span class="o">=</span><span class="s1">'messageFormPreviewButton'</span> <span class="na">previewMessageObjectType</span><span class="o">=</span><span class="s1">'com.example.foo.bar'</span> <span class="na">previewMessageObjectID</span><span class="o">=</span><span class="m">0</span><span class="cp">}</span><span class="x"></span>
+<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal">1</span></pre></div></td><td class="code"><div class="highlight"><pre><span></span><code><span class="cp">{</span><span class="nf">include</span> <span class="na">file</span><span class="o">=</span><span class="s1">'messageFormPreviewButton'</span> <span class="na">previewMessageObjectType</span><span class="o">=</span><span class="s1">'com.example.foo.bar'</span> <span class="na">previewMessageObjectID</span><span class="o">=</span><span class="m">0</span><span class="cp">}</span><span class="x"></span>
</code></pre></div>
+</td></tr></table>
<p><em>The message object id should be non-zero when editing.</em></p>
<h2 id="icons">Icons<a class="headerlink" href="#icons" title="Permanent link">#</a></h2>
<p>The old <code>.icon-<iconName></code> classes have been removed, you are required to use the official <code>.fa-<iconName></code> class names from FontAwesome. This does not affect the generic classes <code>.icon</code> (indicates an icon) and <code>.icon<size></code> (e.g. <code>.icon16</code> that sets the dimensions), these are still required and have not been deprecated.</p>
<p>Before:</p>
-<div class="highlight"><pre><span></span><code><span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"icon icon16 icon-list"</span><span class="p">></span>
+<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal">1</span></pre></div></td><td class="code"><div class="highlight"><pre><span></span><code><span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"icon icon16 icon-list"</span><span class="p">></span>
</code></pre></div>
+</td></tr></table>
<p>Now:</p>
-<div class="highlight"><pre><span></span><code><span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"icon icon16 fa-list"</span><span class="p">></span>
+<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal">1</span></pre></div></td><td class="code"><div class="highlight"><pre><span></span><code><span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"icon icon16 fa-list"</span><span class="p">></span>
</code></pre></div>
+</td></tr></table>
<h3 id="changed-icon-names">Changed Icon Names<a class="headerlink" href="#changed-icon-names" title="Permanent link">#</a></h3>
<p>Quite a few icon names have been renamed, the official wiki lists the <a href="https://github.com/FortAwesome/Font-Awesome/wiki/Upgrading-from-3.2.1-to-4">new icon names</a> in FontAwesome 4.</p>
<h2 id="changed-classes">Changed Classes<a class="headerlink" href="#changed-classes" title="Permanent link">#</a></h2>
</ul>
<h2 id="simple-example">Simple Example<a class="headerlink" href="#simple-example" title="Permanent link">#</a></h2>
<p>The code below includes only the absolute minimum required to display a page, the content title is already included in the output.</p>
-<div class="highlight"><pre><span></span><code><span class="cp">{</span><span class="nf">include</span> <span class="na">file</span><span class="o">=</span><span class="s1">'header'</span><span class="cp">}</span><span class="x"></span>
+<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal">1</span>
+<span class="normal">2</span>
+<span class="normal">3</span>
+<span class="normal">4</span>
+<span class="normal">5</span>
+<span class="normal">6</span>
+<span class="normal">7</span></pre></div></td><td class="code"><div class="highlight"><pre><span></span><code><span class="cp">{</span><span class="nf">include</span> <span class="na">file</span><span class="o">=</span><span class="s1">'header'</span><span class="cp">}</span><span class="x"></span>
<span class="x"><div class="section"></span>
<span class="x"> Hello World!</span>
<span class="cp">{</span><span class="nf">include</span> <span class="na">file</span><span class="o">=</span><span class="s1">'footer'</span><span class="cp">}</span><span class="x"></span>
</code></pre></div>
+</td></tr></table>
<h2 id="full-example">Full Example<a class="headerlink" href="#full-example" title="Permanent link">#</a></h2>
-<div class="highlight"><pre><span></span><code><span class="cp">{</span><span class="c">*</span>
+<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"> 1</span>
+<span class="normal"> 2</span>
+<span class="normal"> 3</span>
+<span class="normal"> 4</span>
+<span class="normal"> 5</span>
+<span class="normal"> 6</span>
+<span class="normal"> 7</span>
+<span class="normal"> 8</span>
+<span class="normal"> 9</span>
+<span class="normal">10</span>
+<span class="normal">11</span>
+<span class="normal">12</span>
+<span class="normal">13</span>
+<span class="normal">14</span>
+<span class="normal">15</span>
+<span class="normal">16</span>
+<span class="normal">17</span>
+<span class="normal">18</span>
+<span class="normal">19</span>
+<span class="normal">20</span>
+<span class="normal">21</span>
+<span class="normal">22</span>
+<span class="normal">23</span>
+<span class="normal">24</span>
+<span class="normal">25</span>
+<span class="normal">26</span>
+<span class="normal">27</span>
+<span class="normal">28</span>
+<span class="normal">29</span>
+<span class="normal">30</span>
+<span class="normal">31</span>
+<span class="normal">32</span>
+<span class="normal">33</span>
+<span class="normal">34</span>
+<span class="normal">35</span>
+<span class="normal">36</span>
+<span class="normal">37</span>
+<span class="normal">38</span>
+<span class="normal">39</span>
+<span class="normal">40</span>
+<span class="normal">41</span>
+<span class="normal">42</span>
+<span class="normal">43</span>
+<span class="normal">44</span>
+<span class="normal">45</span>
+<span class="normal">46</span>
+<span class="normal">47</span>
+<span class="normal">48</span>
+<span class="normal">49</span>
+<span class="normal">50</span>
+<span class="normal">51</span>
+<span class="normal">52</span>
+<span class="normal">53</span>
+<span class="normal">54</span>
+<span class="normal">55</span>
+<span class="normal">56</span>
+<span class="normal">57</span>
+<span class="normal">58</span>
+<span class="normal">59</span>
+<span class="normal">60</span>
+<span class="normal">61</span>
+<span class="normal">62</span>
+<span class="normal">63</span>
+<span class="normal">64</span>
+<span class="normal">65</span>
+<span class="normal">66</span>
+<span class="normal">67</span>
+<span class="normal">68</span>
+<span class="normal">69</span>
+<span class="normal">70</span>
+<span class="normal">71</span></pre></div></td><td class="code"><div class="highlight"><pre><span></span><code><span class="cp">{</span><span class="c">*</span>
<span class="c"> The page title is automatically set using the page definition, avoid setting it if you can!</span>
<span class="c"> If you really need to modify the title, you can still reference the original title with:</span>
<span class="c"> {$__wcf->getActivePage()->getTitle()}</span>
<span class="cp">{</span><span class="c">* do not include `</body></html>` here, the footer template is the last bit of code! *</span><span class="cp">}</span><span class="x"></span>
<span class="cp">{</span><span class="nf">include</span> <span class="na">file</span><span class="o">=</span><span class="s1">'footer'</span><span class="cp">}</span><span class="x"></span>
</code></pre></div>
+</td></tr></table>
<h3 id="content-header">Content Header<a class="headerlink" href="#content-header" title="Permanent link">#</a></h3>
<p>There are two different methods to set the content header, one sets only the actual values, but leaves the outer HTML untouched, that is generated by the <code>header</code> template. This is the recommended approach and you should avoid using the alternative method whenever possible.</p>
<h4 id="recommended-approach">Recommended Approach<a class="headerlink" href="#recommended-approach" title="Permanent link">#</a></h4>
-<div class="highlight"><pre><span></span><code><span class="cp">{</span><span class="c">* This is automatically set using the page data and should not be set manually! *</span><span class="cp">}</span><span class="x"></span>
+<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal">1</span>
+<span class="normal">2</span>
+<span class="normal">3</span>
+<span class="normal">4</span>
+<span class="normal">5</span>
+<span class="normal">6</span></pre></div></td><td class="code"><div class="highlight"><pre><span></span><code><span class="cp">{</span><span class="c">* This is automatically set using the page data and should not be set manually! *</span><span class="cp">}</span><span class="x"></span>
<span class="cp">{</span><span class="nf">capture</span> <span class="na">assign</span><span class="o">=</span><span class="s1">'contentTitle'</span><span class="cp">}</span><span class="x">Custom Content Title</span><span class="cp">{</span><span class="nf">/capture</span><span class="cp">}</span><span class="x"></span>
<span class="cp">{</span><span class="nf">capture</span> <span class="na">assign</span><span class="o">=</span><span class="s1">'contentDescription'</span><span class="cp">}</span><span class="x">Optional description that is displayed right after the title.</span><span class="cp">{</span><span class="nf">/capture</span><span class="cp">}</span><span class="x"></span>
<span class="cp">{</span><span class="nf">capture</span> <span class="na">assign</span><span class="o">=</span><span class="s1">'contentHeaderNavigation'</span><span class="cp">}</span><span class="x">List of navigation buttons displayed right next to the title.</span><span class="cp">{</span><span class="nf">/capture</span><span class="cp">}</span><span class="x"></span>
</code></pre></div>
+</td></tr></table>
<h4 id="alternative">Alternative<a class="headerlink" href="#alternative" title="Permanent link">#</a></h4>
-<div class="highlight"><pre><span></span><code><span class="cp">{</span><span class="nf">capture</span> <span class="na">assign</span><span class="o">=</span><span class="s1">'contentHeader'</span><span class="cp">}</span><span class="x"></span>
+<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"> 1</span>
+<span class="normal"> 2</span>
+<span class="normal"> 3</span>
+<span class="normal"> 4</span>
+<span class="normal"> 5</span>
+<span class="normal"> 6</span>
+<span class="normal"> 7</span>
+<span class="normal"> 8</span>
+<span class="normal"> 9</span>
+<span class="normal">10</span>
+<span class="normal">11</span>
+<span class="normal">12</span>
+<span class="normal">13</span>
+<span class="normal">14</span>
+<span class="normal">15</span></pre></div></td><td class="code"><div class="highlight"><pre><span></span><code><span class="cp">{</span><span class="nf">capture</span> <span class="na">assign</span><span class="o">=</span><span class="s1">'contentHeader'</span><span class="cp">}</span><span class="x"></span>
<span class="x"> <header class="contentHeader"></span>
<span class="x"> <div class="contentHeaderTitle"></span>
<span class="x"> <h1 class="contentTitle">Custom Content Title</h1></span>
<span class="x"> </header></span>
<span class="cp">{</span><span class="nf">/capture</span><span class="cp">}</span><span class="x"></span>
</code></pre></div>
+</td></tr></table>