Support
Canvas Admin is a premium, full featured, responsive admin template that helps you get your project started quickly and with ease. Included are 20+ sample pages showcasing the many layouts and widgets you have at your disposal such as: buttons, grid layout, google maps, tooltips, and much more.
Grid Layout
Container
<div class="container"> -- Grid items go here -- </div>
Grid System
This theme uses a 24 column fluid grid system for layout. Some valid layouts are listed below.
<div class="grid-24"> -- Content goes here -- </div> <div class="grid-12"> -- Content goes here -- </div> <div class="grid-12"> -- Content goes here -- </div> <div class="grid-8"> -- Content goes here -- </div> <div class="grid-8"> -- Content goes here -- </div> <div class="grid-8"> -- Content goes here -- </div> <div class="grid-6"> -- Content goes here -- </div> <div class="grid-6"> -- Content goes here -- </div> <div class="grid-6"> -- Content goes here -- </div> <div class="grid-6"> -- Content goes here -- </div> <div class="grid-16"> -- Content goes here -- </div> <div class="grid-8"> -- Content goes here -- </div>
Incorrect Column Layout
<div class="grid-16"> -- Content goes here -- </div> <div class="grid-10"> -- Content goes here -- </div>
Box Layout
You can use the box layout as a lightweight container to display content with default styling and margins.
Basic box with light gray background, inside padding, and margin bottom.
<div class="box"> -- Content goes here -- </div>
Box with no background and content flush to the edges of the container.
<div class="box plain"> -- Content goes here -- </div>
Form Layout
Basic Form
Container
<form class="form"> </form>
Single Field
<div class="field-group"> <label for="fname">First Name:</label> <div class="field"> <input type="text" name="fname" id="fname" size="10" class="" /> </div> <!-- .field --> </div> <!-- .field-group -->
Multiple Fields
<div class="field-group"> <label>Name:</label> <div class="field"> <input type="text" name="fname" id="fname" size="10" class="" /> <label for="fname">First</label> </div> <!-- .field --> <div class="field"> <input type="text" name="mname" id="mname" size="1" /> <label for="mname">Mi</label> </div> <!-- .field --> <div class="field"> <input type="text" name="lname" id="lname" size="12" class="" /> <label for="lname">Last</label> </div> <!-- .field --> </div> <!-- .field-group -->
Radio / Checkbox
<div class="field-group control-group"> <label>Radio:</label> <div class="field"> <input type="radio" name="radio" id="radio1" value="1" /> <label for="radio1">Radio 1</label> </div> <!-- .field --> <div class="field"> <input type="radio" name="radio" id="radio2" value="2" /> <label for="radio2">Radio 2</label> </div> <!-- .field --> <div class="field"> <input type="radio" name="radio" id="radio3" value="3" /> <label for="radio3">Radio 3</label> </div> <!-- .field --> </div>
File Input
<div class="field-group"> <label for="myfile">File Input:</label> <div class="field"> <input type="file" name="myfile" id="myfile" /> </div> </div>
Select Field
<div class="field-group"> <label>Billing Information:</label> <div class="field"> <select name="cardtype" id="cardtype"> <option>Visa</option> <option>Master Card</option> <option>American Express</option> <option>Discover</option> </select> <label for="cardtype">Card Type</label> </div> </div> <!-- .field-group -->
Uniform Plugin
To auto enable the Uniform plugin add the class .uniformForm to your main .form element.
<form class="form uniformForm"> </form>
Tables
Basic Table
Converts an unstyled table into a basic styled data table.
<table class="table"> <thead> <tr> <th>Rendering engine</th> <th>Browser</th> <th>Platform(s)</th> </tr> </thead> <tbody> <tr> <td>Trident</td> <td>Internet Explorer 4.0</td> <td>Win 95+</td> </tr> <tr> <td>Trident</td> <td>Internet Explorer 5.0</td> <td>Win 95+</td> </tr> </tbody> </table>
Striped Table
Add alternating row colors to your data table.
<table class="table table-striped"> </table>
Bordered Table
Adds a full border around all table cells and headings. Also distinguishes the table header more.
<table class="table table-bordered"> </table>
Widget Table
Any table using the above classes for .table can be included within a widget. By adding the class .widget-table the default widget padding will be removed and the table will be flush against the container.
<div class="widget widget-table"> </div>
Widget Layout
Basic Widget
Example Widget
<div class="widget"> <div class="widget-header"> <h3>Widget Title</h3> </div> <div class="widget-content"> -- All content goes here -- </div> </div>
Container
<div class="widget"> </div>
Widget Header w/ Icon
<div class="widget-header"> <span class="icon-home"></span> <h3>Widget Title</h3> </div>
Widget Content
<div class="widget-content"> -- All content goes here -- </div>
Widget Tabs
Container
Make sure you include the class .widget-tabs on your .widget container. This is necessary for the events to be attached to your tab elements.
<div class="widget widget-tabs"> </div>
Tabs Code
Include the tabs code below in the .widget-header of your container. Make sure this is included after the title element.
<ul class="tabs right"> <li class="active"><a href="#tab-1">Tab #1</a></li> <li class=""><a href="#tab-2">Tab #2</a></li> <li class=""><a href="#tab-3">Tab #3</a></li> </ul>
Tab Content
When setting up your tab content containers make sure that the ID of the container corresponds to the href attribute of the tab element.
<div id="tab-1" class="widget-content"> --Content goes here-- </div> <div id="tab-2" class="widget-content"> --Content goes here-- </div> <div id="tab-3" class="widget-content"> --Content goes here-- </div>
Widget Calendar
Container
To create a Widget Calendar add the following class to your widget container: .widget-calendar.
<div class="widget widget-calendar"> </div>
Content
In the .widget-content container add your calendar holder div as the only item.
<div class="widget-content"> <div id="calendar-holder"></div> </div>
Widget Tables
To create a Widget Table add the following class to your widget container: .widget-table
For more info on how to style tables check out the documentation for tables above.
<div class="widget widget-table"> </div>
Interface Elements
Notify Messages
<div class="notify notify-warning"> <a href="javascript:;" class="close">x</a> <h3>Success Notifty</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed.</p> </div>
Add the following classes to the .notify container to change the styling.
Name | Class | Description |
---|---|---|
Default | .notify | Default notify message |
Success | .notify-success | Success notify message (Green) |
Warning | .notify-warning | Success notify message (Yellow) |
Info | .notify-info | Info notify message (Blue) |
Error | .notify-error | Error notify message (Red) |
Progress Bars
To change the width bar size simply change the percentage listed on the .bar element.
<div class="progress-bar"> <div class="bar" style="width: 35%;"> --Bar Text-- </div> </div>
Semantic Classes
Name | Class | Description |
---|---|---|
Primary | .primary | Primary class |
Secondary | .secondary | Secondary class |
Tertiary | .tertiary | Tertiary class |
Quaternary | .quaternary | Quaternary class |
Color Classes
Name | Class | Description |
---|---|---|
Blue | .blue | Blue progress bar |
Green | .green | Green progress bar |
Orange | .orange | Orange progress bar |
Black | .black | Black progress bar |
Teal | .teal | Teal progress bar |
Purple | .purple | Purple progress bar |
Pink | .pink | Pink progress bar |
Red | .red | Red progress bar |
Gray | .gray | Gray progress bar |
Tickets
<span class="ticket ticket-success">Success</span>
Add the following classes to the .ticket container to change the styling.
Name | Class | Description |
---|---|---|
Default | .ticket | Default ticket |
Success | .ticket-success | Success ticket (Green) |
Warning | .ticket-warning | Warning ticket (Yellow) |
Error | .ticket-error | Error ticket (Red) |
Info | .ticket-info | Info ticket (Blue) |
Pagination
Container
<div class="pagination"> -- Pagination items go here -- </div>
Pagination Items
<a href="javascript:;" class="prev disabled">Previous</a> <a href="javascript:;">1</a> <a href="javascript:;">2</a> <a href="javascript:;">3</a> <a href="javascript:;" class="next">Next</a>
Selected Item
Add the class selected to the pagination item you want to have active.
<a href="javascript:;" class="selected">1</a>
Pagination Colors
Add the color class to the .pagination container.
Name | Class | Description |
---|---|---|
Blue | .blue | Blue pagination |
Green | .green | Green pagination |
Orange | .orange | Orange pagination |
Black | .black | Black pagination |
Teal | .teal | Teal pagination |
Purple | .purple | Purple pagination |
Pink | .pink | Pink pagination |
Red | .red | Red pagination |
Gray | .gray | Gray pagination |
Bullet List
Container
<ul class="bullet bullet-blue"> </ul>
Example List
<ul class="bullet bullet-blue"> <li>List Item</li> <li>List Item</li> <li>List Item</li> <li>List Item</li> </ul>
Bullet Colors
Name | Class | Description |
---|---|---|
Green | .bullet-green | Green bullet list |
Red | .bullet-red | Red bullet list |
Orange | .bullet-orange | Orange bullet list |
Yellow | .bullet-yellow | Yellow bullet list |
Blue | .bullet-blue | Blue bullet list |
Pink | .bullet-pink | Pink bullet list |
Black | .bullet-black | Black bullet list |
Purple | .bullet-purple | Purple bullet list |
White | .bullet-white | White bullet list |
Gray | .bullet-gray | Gray bullet list |
Plugins
Modal
Javascript Call
$.modal ({ title: 'Modal' , ajax: 'modal.php' });
Options
Name | Value | Description |
---|---|---|
title | String | Optional title goes here. |
html | String | Load content from an html source. |
ajax | Resource Path | Path to the content you want to load on your server.. |
width | String | Optional width for your modal. If not provided the width is generated automatically. |
overlay | Boolean | When set to true a the content of the page will be covered by a transparent div halting interaction until the alert is closed. |
overlayClose | Boolean | When set to true clicking on an active overlay will close the alert. |
escClose | Boolean | When set to true the modal will be closed when the user clicks the ESC key. |
Alert
Javascript Call
$.alert ({ type: 'confirm' , title: 'Alert' , text: 'Lorem ipsum dolor sit amet, consectetur adipisicing.' , callback: function () { alert ('Callback'); } });
Options
Name | Value | Description |
---|---|---|
type | String | If set to confirm an alert is shown with accept/cancel buttons. |
title | String | Optional title goes here. |
text | Html | Text/html to display in the alert. |
confirmText | String | Optional text that will replace the default for the confirmation action. |
cancelText | Boolean | Optional text that will replace the default for the cancel action |
callback | Function | Callback function to be executed when an affirmative button is clicked.. |
overlayClose | Boolean | When set to true clicking on an active overlay will close the alert. |
escClose | Boolean | When set to true the modal will be closed when the user clicks the ESC key. |
Full Calendar
FullCalendar is a jQuery plugin that provides a full-sized, drag & drop calendar like the one below. It uses AJAX to fetch events on-the-fly for each month and is easily configured to use your own feed format (an extension is provided for Google Calendar).
Visualize Charts
The plugin provides a simple method for generating bar, line, area, and pie charts from an HTML table, and allows you to configure them in a variety of ways.
View Visualize Charts Documentation
Chart Helper
<table class="stats" data-chart-type="bar">
Options
Name | Value | Description |
---|---|---|
type | String | Sets the type of chart to be displayed. Potential values are (pie, bar, line, area) |
Data Tables
DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table.
Helper
To use the helper simply add the classes .data-table to any table you want to have the Data Table functionality on.
<table class="data-table"> </table>
Documentation
View Data Tables Documentation
Tipsy
Tipsy is a jQuery plugin for creating a Facebook-like tooltips effect based on an anchor tag's title attribute.
Helper
Add the class tooltip to any element where you want a tooltip. Also make sure you set the title attribute to the text you want to display.
<button class="tooltip" title="This is the tooltip to display"></button>
Documenation
Google Maps
Basic Setup
Include the following container anywhere in your document.
Note: When inserting a blank div into the document be sure to add a width & height on that div or include the following class .map-canvas on your container.
<div id="basic-canvas" class="map-canvas"> </div>
Below is a basic plugin call to initialize a Google Map. For more configuration options check the documentation below or the example page for maps
$('#basic-canvas').googleMaps();
Documentation
Icons
Example
<span class="icon-home"></span>