Rate this article
More from Videos & Tutorials
Custom (reusable) box
Filed under:
Developer Tools
Published: August 05, 2010
How-to for creating custom boxes inside Vivvo for placing arbitrary content.
Create new file 'my_box.tpl' in templates/xhtml/box folder
<vte:template>
<div>
This is my custom box.
</div>
</vte:template>
Note: your template file must be valid XML document and must not contain XML header nor DOCTYPE declaration.
Now you can include your box anywhere just by adding this include statement:
<vte:include file="{VIVVO_TEMPLATE_DIR}box/my_box.tpl" />
Another example:
<div id="my_box_id" class="box box_white">
<h3 class="box_title title_white">Box Title</h3>
Box content
</div>
The basic structure of the box with tabs:
<div class="box box_white">
<ul id="custom_box_tabs" class="tabs">
<li><a href="#box_1">Box name 1</a></li>
<li><a href="#box_2">Box name 2</a></li>
</ul>
<div id="box_1">
Box content
</div>
<div id="box_2">
Box content
</div>
<script type="text/javascript">
var custom_box_tabs = new Control.Tabs('custom_box_tabs');
</script>
</div>
