Themes

UI

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">
            [Buttons]
        </div>

        <table class="vbx-items-grid">
            [Messages]
        </table>

    </div>
</div>

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]
        </ul>

    </div>
</div>

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

VBX Plugin

See Themes » Plugins for plugin and applet layout examples.

Buttons

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>
</button>

Submit Buttons

<button class="submit-button" type="submit">
    <span>Submit</span>
</button>

Call and SMS Buttons

<button class="call-button">
    <span>Call</span>
</button>

<button class="sms-button">
    <span>SMS</span>
</button>

Link Buttons

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>

Forms

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>

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

    </fieldset>

</form>

Controls

Actions

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>

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

Other actions include: remove, trash and edit.

Pagination

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>

</div>

Dialogs

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">
        <button>OK</button>
        <button>Cancel</button>
    </div>
</div>