Themes

Layout

YUI Templates

Columns and grids are created using YUI 2 CSS Grids

<div id="doc3" class="yui-t2">

    [Wrapper]

</div>

YUI Grids CSS declares #doc3 as a full width layout, while .yui-t2 sets up a left column of 180px.

Wrapper

The #wrapper holds the contents of the selected layout.

<div id="wrapper" class="[theme-name]-theme">

    [Header, Body and Footer]

</div>

This section contains the OpenVBX logo

<div id="hd">

    [OpenVBX Logo]

</div>

You may override this image with your own

Utility Menu

The utility menu holds common application links and the user indicator.

<div id="main-util-menu">

    [Username, My Account and Log Out]

</div>

Context Menu

Call and SMS buttons are present throughout the application.

<div id="vbx-context-menu" class="context-menu">

    [Call and SMS Buttons]

</div>

Notifications also appear in the Context Menu

Body

The #bd holds two blocks, VBX Main and VBX Sidebar. YUI Grids CSS assigns these two blocks (.yui-b) specific rules based on the template used for the layout. In most cases, the .yui-t2 template is used, declaring VBX Sidebar as a 180px wide block on the left. See YUI Grids CSS: Preset Template 2

<div id="bd">

    <div id="yui-main">

        <div class="yui-b">

            [VBX Main]

        </div>

    </div>

    <div class="yui-b">

        [VBX Sidebar]

    </div>

</div>

Most of your view is contained within the VBX Main section. Content Menus are also located inside this section to provide action buttons, depending on the view presented. The main navigation is located inside of the VBX Sidebar. Main Navigation contains section headings and unordered lists for navigation items.

The Footer contains version, copyright and links to Terms and Privacy for Twilio Inc.

<div class="ft">

    [Version, Copyright and Links]

</div>