Dashboard Elements

Info and Stats

<div class="infobox infobox-green">
	<div class="infobox-icon"><i class="ace-icon fa fa-comments"></i></div>
	<div class="infobox-data">
		<span class="infobox-data-number">32</span>
		<span class="infobox-content">comments + 2 reviews</span>
	</div>
	<div class="stat stat-success">8%</div>
</div>
32 comments + 2 reviews
8%
32 comments + 2 reviews
8%

It can have the following color classes: (Please see assets/css/less/infobox.less)

You can use .infobox-dark for a darker box and .infobox-small for a smaller box.

.infobox-icon .infobox-chart .infobox-progress containers are for placing icons and charts.

.infobox-data-number .infobox-text are for title and .infobox-content is for extra explanation.

.stat and .badge is for the small stats and arrows.

Note View mustache/app/views/pages/partials/index/infobox.mustache for more info.

Conversations, Tasks and Members

For more info please check the relevant mustache templates in here: mustache/app/views/pages/partials/index

Widgets

<div class="widget-box">

 <div class="widget-header">
   <h5>Default Widget Box</h5>
   <div class="widget-toolbar">
	  <a data-action="settings" href="#"><i class="ace-icon fa fa-cog"></i></a>
	  <a data-action="reload" href="#"><i class="ace-icon fa fa-refresh"></i></a>
	  <a data-action="collapse" href="#"><i class="ace-icon fa fa-chevron-up"></i></a>
	  <a data-action="close" href="#"><i class="ace-icon fa fa-times"></i></a>
   </div>
 </div><!--/.widget-header -->

 <div class="widget-body">
  <div class="widget-main">
  </div>
 </div><!--/.widget-body -->

</div><!--/.widget-box -->
.widget-header" comes with following classes:
.widget-header-small .widget-header-large .widget-header-flat .header-color-blue .header-color-blue2 .header-color-blue3 .header-color-green .header-color-green2 .header-color-green3 .header-color-red .header-color-red2 .header-color-red3 .header-color-orange .header-color-purple .header-color-pink .header-color-dark .header-color-grey
.widget-box can come with following classes:
.transparent .light-border .no-border
.widget-main can come with following paddings:
.no-padding .padding-2 .padding-4   ...   .padding-32
For example when putting a table inside the widget you may want to use .no-padding

.widget-toolbar example:


<div class="widget-header header-color-pink">
   <h5>With Tabs</h5>
   <div class="widget-toolbar no-border">
	<ul class="nav nav-tabs">
	  <li class="active"><a href="#tab1" data-toggle="tab">Tab 1</a></li>
	  <li><a href="#tab2" data-toggle="tab">Tab 2</a></li>
	  <li><a href="#tab3" data-toggle="tab">Tab 3</a></li>
	</ul>
   </div>
</div><!-- .widget-header -->

Gallery

Gallery items can have tags (inside li or a), captions (inside a or stand alone) and a toolbar.

<ul class="ace-thumbnails">

<li>
 <a href="image-1.jpg" title="title" data-rel="gallery1">
    <img alt="150" src="thumb-1.jpg" />
 </a>
 <div class="tags">
    <span class="label label-info">breakfast</span>
 </div>
 <div class="tools">
    <a href="#"><i class="ace-icon fa fa-link"></i></a>
    <a href="#"><i class="ace-icon fa fa-times"></i></a>
 </div>
</li>


<li>
 <a href="image-2.jpg" data-rel="gallery1">
   <img alt="150" src="{thumb-2.jpg">
   <div class="text">
	<div class="inner">Sample Caption on Hover</div>
   </div>
 </a>
</li>
.
.
.

</ul>

Pricing Tables

Pricing Tables come in two sizes, small and large and are based on widget boxes:

<div class="widget-box pricing-box">
</div>
For more info please check the relevant mustache templates at: mustache/app/views/pages/pricing.mustache
mustache/app/views/pages/partials/pricing

Invoice

Invoice page also basically consistes of a .widget-box.
The following classes are used: .invoice-box .invoice-info .invoice-info-label

For more info please check the relevant mustache at:
mustache/app/views/pages/invoice.mustache

Login & Register

It also is based on .widget-box and you can see the following template for more info: mustache/app/views/pages/partials/login

User Profile Page

There are 3 profile pages included which mostly use the general elements with some extra additions. For more info take a look at:
mustache/app/views/pages/partials/profile/style_1.mustache

mustache/app/views/pages/partials/profile/style_2.mustache
mustache/app/views/pages/partials/profile/style_3.mustache

The general container for profile has the class name .user-profile
The profile photo is .profile-picture
The user info container is .profile-contact-info and when striped it has .profile-user-info-striped as well.
Each user info row is .profile-info-row, each info name is .profile-info-name and info value is .profile-info-value

The recent profile activity container is .profile-feed and each item is .profile-activity as you can see in: mustache/app/views/pages/partials/profile/activity.mustache

In the second profile style, there are also user skills, which are contained by .profile-skills and also the .profile-users container which is the friends section.

The third profile style in inside a .tab-content with the extra .profile-edit-tab-content class.

Please check the relevant templates at
mustache/app/views/pages/partials/profile and LESS file at assets/css/less/page.profile.less for more info.

Inbox & Messages

Please check the relevant templates at
mustache/app/views/pages/partials/inbox and LESS file at assets/css/less/page.inbox.less for more info.

You can use smaller tabs by removing .tab-size-larger class from the relevant .nav-tabs.
Or you can remove tabs and use inbox menus like this:

<div class="col-xs-2 inbox-menu">

 <div class="center">
    <a href="#" class="btn btn-sm btn-purple btn-new-mail">
       <i class="ace-icon fa fa-envelope"></i>
       Write Mail
    </a>
 </div>

 <div class="space-6"></div>
 
 <div class="inbox-folders responsive">

  <a href="#" class="align-left btn btn-sm btn-block no-border btn-lighter active">
      <i class="ace-icon fa fa-inbox blue bigger-110"></i>
      <span class="bigger-110">Inbox</span>
      <span class="badge badge-primary counter">2</span>
  </a>
  
  <a href="#" class="align-left btn btn-sm btn-block no-border btn-lighter active">
      <i class="ace-icon fa fa-inbox blue bigger-110"></i>
      <span class="bigger-110">Sent</span>
      <span class="badge badge-primary counter">2</span>
  </a>

 </div>

</div>

<div class="col-xs-10">
 <!-- messages -->
</div>

You can also make inbox messages more compact by adding .message-condensed class to .message-container element.

Timeline

Widget boxes are used for timelines.
Default timeline items use .transparent.widget-box elements.
Please see mustache/app/views/pages/partials/timeline for more details.