Tags
Rate this article
4.33
  • email Email to a friend
  • print Print version
  • Plain text Plain text
Browsing: Home » How-Tos

Custom (reusable) box

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">
  <div class="box_title_holder">
    <div class="box_title">Box title</div>
  </div>
  <div class="box_body">
    <div class="box_content">
        Box content
    </div>
  </div>
</div>

The basic structure of the box with tabs: 

<div class="box box_tabs">
  <div class="box_title_holder">
    <div class="box_title">
      <ul id="custom_box_tabs" class="tabs">
        <li><a href="#box_1"><span>Box name 1</span></a></li>
        <li><a href="#box_2"><span>Box name 2</span></a></li>
      </ul>
    </div>
  </div>
  <div class="box_body">
    <div class="box_content">
      <div id="box_1">
        Box content 1
      </div>
      <div id="box_2">
        Box content 2
      </div>
      <script type="text/javascript">
        var custom_box_tabs = new Control.Tabs('custom_box_tabs');
      </script>
    </div>
  </div>
</div>

Comments (0 posted):

You must be registered member of Vivvo.net to post a comment.