This page presents the typography developed for The Flatstore VirtueMart template. To learn more how to use typography please see notes placed next to each element.
Extensions » Plugin Manager » Editor - TinyMCE and set Never for Code cleanup on save.
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.
- This is simple ordered list which you can use to sort your content.
- Usage:
<ol><li> ... </li><li> ... </li></ol> - 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
Usage 1:
<div class="alert"> Text here </div> Usage 2:
<div class="alert"><div class="icon"><!-- --></div> Text here </div> Usage 1:
<div class="info"> Text here </div> Usage 2:
<div class="info"><div class="icon"><!-- --></div> Text here </div> Usage 1:
<div class="notice"> Text here </div> Usage 2:
<div class="notice"><div class="icon"><!-- --></div> Text here </div> Usage 1:
<div class="box-save"> Text here </div> Usage 2:
<div class="box-save"><div class="icon"><!-- --></div> Text here </div> Usage 1:
<div class="box-accept"> Text here </div> Usage 2:
<div class="box-accept"><div class="icon"><!-- --></div> Text here </div> Usage 1:
<div class="box-tip"> Text here </div> Usage 2:
<div class="box-tip"><div class="icon"><!-- --></div> Text here </div> 
