{script src="content/vendors/jquery/qtip/jquery.qtip-1.0.0-rc3.min.js"}
<div id="design-toolbar">
<div id="design-toolbar-tabs">
<ul>
<li><a href="#design-toolbar-tab-page">Page Elements</a></li>
<li><a href="#design-toolbar-tab-global">Global Elements</a></li>
<li style="float: right;"><div class="helpertip">
<p>This section will allow you to drag and drop pre-defined panels into a page.</p>
<p>It's important to understand you <strong>MUST</strong> select a Panel Layout and save it before you can drag the new panel into that section.</p>
<p><strong>Click "Add a New Panel"</strong> if you wish to create your own panel for the page.</p>
</div></li>
</ul>
<div id="design-toolbar-tab-page">
<a id="design-toolbar-create-new-panel" href="#">Create New Panel</a>
{foreach from=$toolbar key="element_type" item="elements"}
<fieldset id="design-toolbar-{$element_type}">
<legend>Pre-Defined &amp; Custom Panels</legend>
<div class="design-toolbar-panels-container">
<ul class="elements">
{foreach from=$elements item='element'}
<li class="panel draggable new-element {$element.id}">{$element.title}</li>
{/foreach}
</ul>
</div>
</fieldset>
{/foreach}
<fieldset>
<legend>Panel Layout</legend>
<div class="helpertip">
<p>This feature will allow you to create a right and/or left side to the page.</p>
<p>It's important to understand you <strong>MUST click "SAVE"</strong> before you can drag an element into the proper side.</p></div>
<div>
<input id="design-toggle-left-zone" value="left" name="design-toggle-left-zone" type="checkbox"/>
<label for="design-toggle-left-zone">Include left side in design</label>
</div>
<div>
<input id="design-toggle-right-zone" value="right" name="design-toggle-right-zone" type="checkbox"/>
<label for="design-toggle-right-zone">Include right side in design</label>
</div>
</fieldset>
</div>
<div id="design-toolbar-tab-global">
<fieldset>
<legend>Site Body Width</legend>
<select id="design-site-body-width" name="design-site-body-width">
<option {if ($LayoutSiteWidth == 'doc100') }selected="selected" {/if} value="doc100">100%</option>
<option {if ($LayoutSiteWidth == 'doc800x600C') }selected="selected" {/if} value="doc800x600C">800 x 600 Centered</option>
<option {if ($LayoutSiteWidth == 'doc800x600L') }selected="selected" {/if} value="doc800x600L">800 x 600 Align Left</option>
<option {if ($LayoutSiteWidth == 'doc1024x768C') }selected="selected" {/if} value="doc1024x768C">1024 x 768 Centered</option>
<option {if ($LayoutSiteWidth == 'doc1024x768L') }selected="selected" {/if} value="doc1024x768L">1024 x 768 Align left</option>
<option {if ($LayoutSiteWidth == 'doc1280x1024L') }selected="selected" {/if} value="doc1280x1024L">1280 x 1024 Align left</option>
<option {if ($LayoutSiteWidth == 'doc1280x1024C') }selected="selected" {/if} value="doc1280x1024C">1280 x 1024 Centered</option>
</select>
</fieldset>
<fieldset>
<legend>Site Theme</legend>
<select id="design-site-theme" name="design-site-theme">
{foreach from=$designSkinThemes item="skinTheme"}
<option value="{$skinTheme|htmlspecialchars}" {if $DesignSkinTheme == $skinTheme}selected="true"{/if}>{$skinTheme|htmlspecialchars}</option>
{/foreach}
</select>
</fieldset>
<fieldset>
<legend>Tools</legend>
<div class="design-toolbar-tools-container">
<ul class="elements">
<li><input id="design-toolbar-outline" checked="checked" type="checkbox"/>&nbsp;<label for="design-toolbar-outline">Outline elements</label></li>
<li id="design-toolbar-styles-editor"><a href="#">Styles editor</a></li>
<li id="design-toolbar-restore-layout"><a href="#">Restore original layout</a></li>
<li id="design-toolbar-restore-skin"><a href="#">Restore original skin files</a></li>
</ul>
</div>
</fieldset>
</div>
</div>
</div>