Here is the HTML for the form:
Tag cloud widget: provides a ready design for tag clouds. The widget HTML can be found in widgets-panels.html file.
Tag group widget: The widget HTML can be found in widgets-panels.html file.
User group widget:The widget HTML can be found in widgets-panels.html file.
The theme offers several catchy layouts for your emails messages.
- Welcome template
- Upsell template
- Ping template
- Invoice template
- Shipped template
- Invite template
- Progress template
- Survey template
- We miss you template
The HTML files for each template are located in assets/templates/email folder.
This section discloses the information on how to easily choose the design for such elements as alerts, buttons, icons, page layout (grid), text, progress bars, panels, etc.
Any text can be wrapped in .alert - it will create a default grey alert. In order to change its style, you should use additional contextual classes.
On the images below you can see what classes are used to choose the design for your alert messages.
Alert Color Variations
- .pastel / .dark /.light - these utility classes are used to create the shade of the alerts contextual color.
On the image below the whole block with h3, text and button is wrapped in .alert:
This section covers basic markup used to create styled text.
The image below illustrates what contextual classes are used to have colored text:
The usual h1, h2, h3, h4, h5, h6 are used for headings:
In order to add styles capital letters, use .dropcap. The font-color is applied with .dropcap-default/.dropcap-alert/ .dropcap-info etc.
Class "dropcap-fill" is used to have colored background for capitals. Please check the HTML for filled dropcaps:
Quotations are wrapped in blockquote, they are grey by default. In order to change color, utility class is added:
You can also alter the position of the border line and its width using the following classes:
- .blockquote-thin: to have thin border;
- .blockquote-rounded: to have rounded border;
- .blockquote-reverse: the quote is right aligned;
Badges are added using .label. Utility classes as .label-primary specify the background color, .label-rounded - rounded shape for the label:
.panel applies some basic border and padding to contain the content. Basic panel with heading and content has the following structure:
Color and Style
- Color variations are added using .panel-primary/ .panel-info/ .panel-alert, etc.:
- Border is applied with .panel-border, additional utility class .top/.bottom/.left/.right to set border position:
- Background color is added to the panel body using .fill:
Progress bars use CSS3 transitions and animations which are not supported in Internet Explorer 9 and below or older versions of Firefox. Opera 12 does not support animations.
HTML for basic progress bar:
As you can see, the bar size is set using .progress-bar-xxs/.progress-bar-xs/.progress-bar-sm/.progress-bar-lg/.progress-bar-xl/:
- Striped bar is created using .progress-bar-striped added to .progress-bar.
- Animated barIn order to animate the stripes right to leftAdd, add .active to .progress-bar-striped. It is not available in IE9 and below.
- Multiple bars can be added to one .progress:
Tabs are created like li items wrapped in .nav. Each tab has an anchor link to the tab content id. Like in the following example:
.pull-right/.pull-left are used for tab alignment.
You can have dropdown menu and icons in the navigation tabs:
Vertical tabs on the right or on the left are created using .tabs-right and .tabs-left added to ul:
Page user-interface-icons.html contains the list of icons used in the theme.
Bootstrap includes responsive grid system, which scales up to 12 columns. Grid system allows you to create a nice page layout using a series of rows and columns. Page user-interface-grid.html illustrates how to create columns and what class names are used for them:
- Rows should be placed inside a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
- Use rows to create horizontal groups of columns.
- Content should be placed within columns, and only columns may be immediate children of rows.
- Predefined grid classes like .row and .col-xs-4 are available for quickly making grid layouts.
- Columns create gutters (gaps between column content) via padding.
- Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4.
- If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
- Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, e.g. applying any .col-md-* class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg-* class is not present.
Page progress loader
Page user-interface-progress-loader.html shows what page loaders can be applied in the theme.
There are 3rd party plugins used in the theme. Their source files are located in assets/js/plugins folder.
This section covers map plugins included in the theme:
Gmap plugin documentation can be found at the following link: http://hpneo.github.io/gmaps/documentation.html
Maps-basic.html file shows the types of maps that can be created using this plugin. Assets/js/pages/basic-maps.js file contains jQuiery:
- Standard Map
- Panorama Map
- Map with clickable locations
- Map with search
- Map with inner pagination
- Map with list filter
- Full map
JVectorMap Plugin is used in the theme to create vector maps.
Plugin js file is located in assets/js/plugins/gvectormap/jquery.jvectormap.min. For more details, please check plugin documentation at http://jvectormap.com/documentation/.
- Basic tables are created in the theme using .table. Additional utility classes can be found in tables-basic.html file:
- DataTables plugin documentation: http://datatables.net/reference/index.
- Sortable tables are created with class="table footable":
Table filter is added using attribute data-filter="#fooFilter":
Pagination is applied with the help of attribute data-page-navigation=".pagination".
- Pricing tables: each table column is wrapped in .pricing-plan:
Here is the list of available pre-designed pages included in the theme:
- Account confirmation page: utility-confirmation.html
- Login page: utility-login.html
- Registration page: login-register.html
- Password reset page: utility-forgot-password.html
- Coming Soon page: utility-coming-soon.html
- 404 Error page: utility-404-error.html
- Search results page: basic-search-results.html
- User profile page: basic-profile.html
- Timeline page: basic-timeline.html
- Faq page: basic-faq-page.html
- Calendar page: basic-calendar.html
- Messages page: basic-messages.html
- Gallery page: basic-gallery.html
- Invoice: basic-invoice.html
Sources and Credits
This section discloses the sources of various files used within the theme and describes their function. Use this section to gain an understanding on how the theme functions behind the scenes, if considering any type of modification.
- "Lato", "Open Sans".
- Fontello (non standard, icons set).
- 3rd party plugins. The list is available in assets/js/plugins folder.
All non-standard fonts are from Google Web Fonts and Fontello icons set.
We have used pictures from:
All images are copyrighted to their respective owners and not available for download with this theme.
Once again, thank you so much for purchasing this theme. We will be glad to help you, if you have any questions about this theme. We'll do our best to assist. If you have any questions that are beyond the scope of this help file, please feel free to email via our user page contact form from our Profile Page on ThemeForest. Thank you so much!