Boxes

This box is for notification messages. Just add the class .note to a div.

This box is for error messages. Just add the class .error to a div.

This box is for result messages. Just add the class .result to a div.

NOTE: There is a black box for "result messages" that go invisible after a few seconds. Reload this page to see it.

The panel

Most of the screens are structured with a div named .panel, including a .header div, a .content div and a .footer div (usually empty).

<div class="panel">
    <div class="header"><h2>The header of the panel</h2></div>
    <div class="content">The content of the panel</div>
    <div class="footer">The footer of the panel</div>
</div>

The code above looks like this:

The content of the panel

You can add inside the .content div of the panel all kind of information elemnts, like tables, forms, tabs, accordions, etc.

Helper classes

Show & Hide

Thare are 3 items in this list below. You can modify your browser window size to see the effect.

1- THIS ITEM WILL BE VISIBLE ON All SCREENS
2 - THIS ITEM WILL BE VISIBLE ONLY ON SCREENS SMALLER THAN 768px
3 - THIS ITEM WILL BE VISIBLE ONLY ON SCREENS BIGGER THAN 768px

The first item one has no class and will be visible on all screens.
The second has the class .show-on-mobile and will be visible only on screens smaller than 768px width.
The third has the class .hide-on-mobile and will be visible only on screens bigger than 768px width.
You can apply this two classes to any element, like cell tables, row tables, complete tables, divs, form elements, paragraphs, etc.

Tables

The first columns of tables has class .listinghdname for th, and .listingrowname for tds.
The rest of the columns has class .listinghdelement for th, and .listingelement for tds.
The grey rows of tables has class .row1 and the white rows has class .rowelement.

th .listinghdname	th .listinghdelement
td .listingrowname	td .listingelement	tr .row1
td .listingrowname	td .listingelement	tr .rowelement

This is the code of the table above:

<table>
 <thead>
   <tr>
     <th class="listinghdname">th .listinghdname</th>
     <th class="listinghdelement">th .listinghdelement</th>
     <th class="listinghdelement"> </th>
   </tr>
 </thead>
 <tbody>
   <tr class="row1">
     <td class="listingrowname">td .listingrowname</td>
     <td class="listingelement">td .listingelement</td>
     <td class="listingelement"><mark>tr .row1</mark></td>
   </tr>
   <tr class="rowelement ">
     <td class="listingrowname">td .listingrowname</td>
     <td class="listingelement">td .listingelement</td>
     <td class="listingelement"><mark>tr .rowelement</mark></td>
   </tr>
 </tbody>
</table>

ACCORDION

To use an accordion, create a div class .accordion. Into that div add, for each item, a <h3> tag and insde a <a> with the item title. And after that add a div with the item text. Like this:

<div class="accordion">
  <h3><a href="javascript:;">First item title</a></h3>
  <div>First item text </div>
  <h3><a href="javascript:;">Second item title</a></h3>
  <div>Second item text</div>
</div>

The result should look like this:

First item title

First item text

Second item title

Second item text

Buttons

	Login
	Logout
	Action button
	Submit button
	Reset button

These BACK and NEXT buttons need to be inside a .panel class. So if you want to use them inside a table, just add the class="panel" inline the td, as it is done below.

<td class="panel"><div class="step-nav">
    <a class="next" href="#">Next</a>
    <a class="back" href="#">Back</a>
</div></td>

Next Back

The big buttons of the Dashboard

This buttons only works if they are inside a table inside an accordion. This is a very bad practice, we should modify this soon making a new class named .large-button with all the required attributes to use this large size buttons anywhere.

Campaign	<tr class="send-campaign"> <td class="listingname"> <a href="#">Campaign</a> </td> </tr>
View	<tr class="manage-campaigns"> <td class="listingname"> <a href="#">View</a> </td> </tr>
Suscriber	<tr class="manage-users"> <td class="listingname"> <a href="#">Suscriber</a> </td> </tr>
Statistics	<tr class="view-statistics"> <td class="listingname"> <a href="#">Statistics</a> </td> </tr>
Lists	<tr class="manage-lists"> <td class="listingname"> <a href="#">Lists</a> </td> </tr>
Suscribers	<tr class="list-users"> <td class="listingname"> <a href="#">Suscribers</a> </td> </tr>
Import	<tr class="import-users"> <td class="listingname"> <a href="#">Import</a> </td> </tr>
Export	<tr class="export-users"> <td class="listingname"> <a href="#">Export</a> </td> </tr>
Reconcile	<tr class="reconcileusers"> <td class="listingname"> <a href="#">Reconcile</a> </td> </tr>
Configure	<tr class="configure"> <td class="listingname"> <a href="#">Configure</a> </td> </tr>
Attributes	<tr class="configure-attributes"> <td class="listingname"> <a href="#">Attributes</a> </td> </tr>
Attribute	<tr class="custom-attribute"> <td class="listingname"> <a href="#">Attribute</a> </td> </tr>
Subscribe page	<tr class="spage"> <td class="listingname"> <a href="#">Subscribe page</a> </td> </tr>
Admins	<tr class="admins"> <td class="listingname"> <a href="#">Admins</a> </td> </tr>
Admin attributes	<tr class="adminattributes"> <td class="listingname"> <a href="#">Admin attributes</a> </td> </tr>
Send	<tr class="send-message"> <td class="listingname"> <a href="#">Send</a> </td> </tr>
Templates	<tr class="templates"> <td class="listingname"> <a href="#">Templates</a> </td> </tr>
Messages	<tr class="list-all-msg"> <td class="listingname"> <a href="#">Messages</a> </td> </tr>
Process	<tr class="processqueue"> <td class="listingname"> <a href="#">Process</a> </td> </tr>
Bounces	<tr class="bounces"> <td class="listingname"> <a href="#">Bounces</a> </td> </tr>
Plugin	<tr class="plugin"> <td class="listingname"> <a href="#">Plugin</a> </td> </tr>
Setup	<tr class="setup"> <td class="listingname"> <a href="#">Setup</a> </td> </tr>
Databases	<tr class="dbcheck"> <td class="listingname"> <a href="#">Databases</a> </td> </tr>
Upgrade	<tr class="upgrade"> <td class="listingname"> <a href="#">Upgrade</a> </td> </tr>
Log	<tr class="view-log"> <td class="listingname"> <a href="#">Log</a> </td> </tr>

Tabs

Tab 1 title

Tab 1 text.

Tab 2 title

Tab 2 text.

<div class="tabbed">
  <ul>
    <li><a href="#tab1">Tab 1</a></li>
    <li><a href="#tab2">Tab 2</a></li>
  </ul>
  <div id="tab1">
    <h3>Tab 1 title</h3>
    <p>Tab 1 text.</p>
  </div> 
  <div id="tab2">
    <h3>Tab 2 title</h3>
    <p>Tab 2 text.</p>
  </div> 
</div>

The Send Tabs

This tabs are used on the "Start a new Campaign" screen. Each tab is realy a link but designed as a tab, and they use the jQuery plugin http://www.gmarwaha.com/jquery/jcarousellite/ to slide the tabs when they exceed the width of the container.

<div class="sendtabs_container">
 <div id="sendtabs">
  <ul class="sendcampaign">
   <li class="current"><a href="#"><span class="tabno">1</span>One</a></li>
   <li><a href="#"><span class="tabno">2</span>Two</a></li>
   <li><a href="#"><span class="tabno">3</span>Three</a></li>
   <li><a href="#"><span class="tabno">4</span>Four</a></li>
   <li><a href="#"><span class="tabno">5</span>Five</a></li>
   <li><a href="#"><span class="tabno">6</span>Six</a></li>
  </ul>
 </div>
 <img src="ui/dressprow/images/prevtab.png" id="prev" class="prevtab">
 <img src="ui/dressprow/images/nexttab.png" id="next" class="nexttab">
</div>

Form elements

Checkbox:
Radio:

There is a small hack in the "Start a New Campaign" screen, under the tab "List". This hack use a javascript applied to the checkbox inside the #listselection div.

All Lists

All the classes showed below are needed for this to work.

<div id="listselection">
 <div class="tabbed">
  <ul class="ui-tabs-nav"></ul> 
  <div id="targetlist1"><ul>
    <li>
    <input style="display: none;" id="targetlist[all]" type="checkbox">
    <label for="targetlist[all]">All Lists</label>
    </li>
   </ul></div>
  </div>
</div>

	Heading 1
	Heading 2
	Heading 3
	Heading 4
	Heading 5
	Heading 6
	Paragraph
	preformatted
	Strong
	Emphasis
	~~Deleted~~
	Highlighted
	Inserted
	Link

Common Text styles

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Custom text style

Page title style

Page title style

Lists

Unordered list

Orderer list

Boxes

The panel

The header of the panel

Helper classes

Show & Hide

Tables

ACCORDION

First item title

Second item title

Menus

The #webblertabs

As an alternative, put a `#webblertabs` inside a div with the class `.minitabs` and you will have this:

Buttons

The big buttons of the Dashboard

Loaders

Spinner

Progressbar

Tabs

Common Tabs

Tab 1 title

Tab 2 title

The Send Tabs

Form elements

Icons

Common Text styles

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Custom text style

Page title style

Page title style

Lists

Unordered list

Orderer list

Boxes

The panel

The header of the panel

Helper classes

Show & Hide

Tables

ACCORDION

First item title

Second item title

Menus

The #webblertabs

As an alternative, put a #webblertabs inside a div with the class .minitabs and you will have this:

Buttons

The big buttons of the Dashboard

Loaders

Spinner

Progressbar

Tabs

Common Tabs

Tab 1 title

Tab 2 title

The Send Tabs

Form elements

Icons

As an alternative, put a `#webblertabs` inside a div with the class `.minitabs` and you will have this: