Typography

This page presents the typography developed for The VirtueMart template. To learn more how to use typography please see notes placed next to each element.

If you are getting any troubles with typography using TinyMCE please go to
Extensions » Plugin Manager » Editor - TinyMCE and set Never for Code cleanup on save.
 
You may also consider to use Extended mode in the TinyMCE WYSIWYG Editor. To turn on Extended mode please go to
Extensions » Plugin Manager » Editor - TinyMCE and set Extended for Functionality option.

Headings

This is a Heading 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

This is a Heading 2

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 

This is a Heading 3

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

This is a Heading 4

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciun

 
This is a Heading 5

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

This is a Heading 6

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?

 

Paragraphs

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
<blockquote> ... </blockquote>
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
<blockquote class="cite"><span class="cite"> ... </span></blockquote>

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

If you will move over this text you should see a nice tip cloud

Usage:

<strong class="hasTip" title="I am a nice tip title:: ... and here you can put some text">this text</strong>

Unsorted Lists

Below are presented all available styles for unsorted lists. To use choosen style type
<ul><li> ... </li><li> ... </li></ul>
or <ul class="class-name"><li> ... </li><li> ... </li></ul>

  • This is the default unsorted list style.
  • It is very simple and you can use it with no any additional CSS class names.
  • This is latest news list used into Latest News module.
  • Usage: <ul class="latestnews"><li> ... </li><li> ... </li></ul>
 
  • This is the most read list used into Popular articles module.
  • Usage: <ul class="mostread"><li> ... </li><li> ... </li></ul>
  • This is the sections list used into Sections module.
  • Usage: <ul class="sections"><li> ... </li><li> ... </li></ul>
 
  • This is the accept list.
  • Usage: <ul class="list-accept"><li> ... </li><li> ... </li></ul>
  • This is the add list.
  • Usage: <ul class="list-add"><li> ... </li><li> ... </li></ul>
 
  • This is the delete list.
  • Usage: <ul class="list-delete"><li> ... </li><li> ... </li></ul>
  • This is the error list.
  • Usage: <ul class="list-error"><li> ... </li><li> ... </li></ul>
 
  • This is the alert list.
  • Usage: <ul class="list-alert"><li> ... </li><li> ... </li></ul>
  • This is the cross list.
  • Usage: <ul class="list-cross"><li> ... </li><li> ... </li></ul>
 
  • This is the tip list.
  • Usage: <ul class="list-tip"><li> ... </li><li> ... </li></ul>
  • This is the tick list.
  • Usage: <ul class="list-tick"><li> ... </li><li> ... </li></ul>
 
  • This is the disk list.
  • Usage: <ul class="list-disk"><li> ... </li><li> ... </li></ul>
  • This is the email list.
  • Usage: <ul class="list-email"><li> ... </li><li> ... </li></ul>
 
  • This is the feed list.
  • Usage: <ul class="list-feed"><li> ... </li><li> ... </li></ul>
  • This is the image list.
  • Usage: <ul class="list-image"><li> ... </li><li> ... </li></ul>
 
  • This is the information list.
  • Usage: <ul class="list-information"><li> ... </li><li> ... </li></ul>
  • This is the key list.
  • Usage: <ul class="list-key"><li> ... </li><li> ... </li></ul>
 
  • This is the newspaper list.
  • Usage: <ul class="list-newspaper"><li> ... </li><li> ... </li></ul>
  • This is the pencil list.
  • Usage: <ul class="list-pencil"><li> ... </li><li> ... </li></ul>
 
  • This is the CD list.
  • Usage: <ul class="list-cd"><li> ... </li><li> ... </li></ul>
  • This is the PC list.
  • Usage: <ul class="list-pc"><li> ... </li><li> ... </li></ul>
  • This is the iPod list.
  • Usage: <ul class="list-ipod"><li> ... </li><li> ... </li></ul>
  • This is the Mouse list.
  • Usage: <ul class="list-mouse"><li> ... </li><li> ... </li></ul>
 

Sorted Stuff

Use numbers to sort your content. You can use ordered lists or numbered paragraphs.

  1. This is simple ordered list which you can use to sort your content.
  2. Usage:
    <ol><li> ... </li><li> ... </li></ol>
  3. Use as many items as you need.

1.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

2.Usage:
<p class="big-number"><span class="big-number">number</span> Content </p>

 

You can also use other signs for numbered paragraphs, for example:

A You can use letters.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

B And any other signs.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Boxes

 
This is a sample of the alert box.
Usage 1:
<div class="alert"> Text here </div>

Usage 2:
<div class="alert"><div class="icon"><!-- --></div> Text here </div>
 
This is a sample of the information box.
Usage 1:
<div class="info"> Text here </div>

Usage 2:
<div class="info"><div class="icon"><!-- --></div> Text here </div>
 
This is a sample of the notice box.
Usage 1:
<div class="notice"> Text here </div>

Usage 2:
<div class="notice"><div class="icon"><!-- --></div> Text here </div>
 
This is a sample of the Save Box box.
Usage 1:
<div class="box-save"> Text here </div>

Usage 2:
<div class="box-save"><div class="icon"><!-- --></div> Text here </div>
 
This is a sample of the Accept Box box.
Usage 1:
<div class="box-accept"> Text here </div>

Usage 2:
<div class="box-accept"><div class="icon"><!-- --></div> Text here </div>
 
This is a sample of the Tip Box box.
Usage 1:
<div class="box-tip"> Text here </div>

Usage 2:
<div class="box-tip"><div class="icon"><!-- --></div> Text here </div>

Custom login module

The template has built-in pop-up log in form module position which you may want to use to allow your customers to quickly log in to your site.

To use Pop-up Login Form position simply publish your login form into loginform module position.

After you customer will login he will get an access to his account also using Pop-up Login Form.
You will find the Pop-up Login Form module at the top of the demo of this template.

colour picker tool

The Inspire template comes with a built-in color chooser tool which gives you complete control over the designs color scheme. You can change the colors for most of the template with a click of a button.

If you want to easily customize the designs color scheme which includes the template background, text, headings, module background, menus and lots more all you need to do is open the built in template control panel by selecting the Extensions » Template Manager and click the  template name to open the template settings area. Now on the right hand side click Custom Colors tab and choose your own colors for each part of the template.

 

Color Picker Tool Preview

Pic. 1. Color Picker Tool

social media

The  template comes with a built-in tool which will allow you to connect your website to the popular social networking sites.

The template includes icons for the following:

  • Twitter
  • Blogger
  • Facebook
  • LinkedIn
  • RSS
  • MySpace
  • Vimeo
  • Stumbleupon
  • digg

To use Social networking Links please log in to your Joomla! Administrator Panel and choose Extensions » Template Manager » template and click Community Links tab.

Responsive Design

Inspire Is A Responsive Mobile Ready Joomla Template

The Inspire Joomla template for Virtuemart automatically adapts to different devices including Computers, Tablets and Mobile phones to give web site visitors the best viewing experience.

 

More Articles...

  1. Built-in Slideshow

Media Channels

bloggeremail-bluefacebookgoogleplusinstagramlinkedinpinteresttumblrtwitteryoutube

About Phigit

Phigit is the platform to buy and sell social media and digital advertising.

We have a dedicated team that want to create an environment where digital and social advertising succeeds.

Contact Us

sample03 9005 8116 - Australia
847 380 2847 - United States

sampleThis email address is being protected from spambots. You need JavaScript enabled to view it.