<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>
It can have the following color classes: (Please see assets/css/less/infobox.less
)
.infobox-green
.infobox-green2
.infobox-purple
.infobox-purple2
.infobox-pink
.infobox-blue
.infobox-blue2
.infobox-blue3
.infobox-brown
.infobox-wood
.infobox-lightbrown
.infobox-orange
.infobox-orange2
.infobox-grey
.infobox-black
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.
mustache/app/views/pages/partials/index/infobox.mustache
for more info.
mustache/app/views/pages/partials/index
<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
.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 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 come in two sizes, small and large and are based on widget boxes:
<div class="widget-box pricing-box"> </div>
mustache/app/views/pages/pricing.mustache
mustache/app/views/pages/partials/pricing
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
It also is based on .widget-box
and you can see the following template for more info:
mustache/app/views/pages/partials/login
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.
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>
.message-condensed
class to .message-container
element.
.transparent.widget-box
elements.
mustache/app/views/pages/partials/timeline
for more details.