VBX Main

VBX Main is nested inside of the #bd > #yui-main > .yui-b block of OpenVBX. See Layout.

This is an example of the Inbox, where .vbx-items-grid is used to display rows of messages. Here .vbx-content-menu holds buttons for selecting messages and deleting them as well.

<div id="vbx-main">
    <div class="vbx-content-main">

        <div class="vbx-content-menu">

        <table class="vbx-items-grid">


VBX Sidebar

The VBX Sidebar layout is determined by the YUI template being used for each specific view. Using .yui-t2 will place the sidebar to the left with a 180px width.

<div id="vbx-sidebar">
    <div id="vbx-main-nav">

        <h3 class="vbx-nav-title">[Title]</h3>

        <ul class="vbx-main-nav-items">
            [Navigation Links]


Some views do not render the VBX Sidebar, ie. Flows

VBX Plugin

See Themes » Plugins for plugin and applet layout examples.


Button styling is applied to the button tag globally. A combination of a button tag and nested span tag, are used to create a sliding doors effect. There are several button types that use custom background image sprites to display hover and active states.

Normal Buttons

<button class="normal-button">
    <span>Button Label</span>

Submit Buttons

<button class="submit-button" type="submit">

Call and SMS Buttons

<button class="call-button">

<button class="sms-button">

Several links are styled to represent buttons. The quick Call and SMS links are used in the VBX Items Grid view for the Inbox.

<a href="" class="quick-call-button">Call</a>

<a href="" class="quick-sms-button">SMS</a>


OpenVBX Forms are given a common class name of vbx-form to specify custom styling. Fieldsets are used to create containers within an OpenVBX form. Labels are also assigned a class of field-label. Input fields are named according to their widths: tiny, small, medium and large.

<form class="vbx-form">

    <fieldset class="vbx-input-container">

        <label class="field-label">
            <input class="medium" type="text" />

        <label class="field-label">
            <input class="small" type="text" />





Icons represent common actions across OpenVBX. The icon set is created with 24 × 24px image sprites.

<a href="" class="add action">
    <span class="replace">Add</span>

<a href="" class="close action">
    <span class="replace">Close</span>

Other actions include: remove, trash and edit.


Pagination is used with VBX Items Grid table views. For example, the Inbox view displays 20 items before displaying the pagination control.

<div class="pagination">

    <span class="current">1</span>

    <span class="num">2</span>

    <span class="num">3</span>

    <span class="next">Next</span>

    <span class="last">Last</span>



Dialogs are using jQuery ui-dialog class names.

<div class="ui-dialog">

    <div class="ui-dialog-titlebar">Title</div>

    <div class="ui-dialog-content">A paragraph</div>

    <div class="ui-dialog-buttonpane">