Login Form

Cart empty

Search For Products

random product



Articles


The Excite Template Typography

Published on Monday, 02 January 2012 13:19 Hits: 2166

Category: Uncategorised

This page presents the typography developed for The Excite 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.

Read more about How to using The Excite Typography »

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.

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>

our partners

Sample