Typography
Heading 1
|
Heading 2
|
Heading 3
|
Heading 4
|
Heading 5
|
Heading 6
|
BOXES
class="ppbox_red" Nullam pulvinar mauris et nisl accumsan at blandit velit dignissim. Suspendisse eget purus nulla.
Proin ultricies porttitor turpis vel semper.
class="ppbox_black" Nullam pulvinar mauris et nisl accumsan at blandit velit dignissim. Suspendisse eget purus nulla.
Proin ultricies porttitor turpis vel semper.
class="ppbox_purple" Nullam pulvinar mauris et nisl accumsan at blandit velit dignissim. Suspendisse eget purus nulla.
Proin ultricies porttitor turpis vel semper.
class="ppbox_brown" Nullam pulvinar mauris et nisl accumsan at blandit velit dignissim. Suspendisse eget purus nulla.
Proin ultricies porttitor turpis vel semper.
class="ppbox_yellow" Nullam pulvinar mauris et nisl accumsan at blandit velit dignissim. Suspendisse eget purus nulla.
Proin ultricies porttitor turpis vel semper.
class="ppbox_green" Nullam pulvinar mauris et nisl accumsan at blandit velit dignissim. Suspendisse eget purus nulla.
Proin ultricies porttitor turpis vel semper.
class="ppbox_blue" Nullam pulvinar mauris et nisl accumsan at blandit velit dignissim. Suspendisse eget purus nulla.
Proin ultricies porttitor turpis vel semper.
DROP CAP
Suspendisse vulputate libero a ligula tristique ac pellentesque neque pellentesque. In laoreet pharetra est id dapibus. Nulla feugiat, turpis posuere vehicula semper, dolor elit tempus ipsum, vel suscipit velit lorem at risus. Donec sodales risus eget ipsum vestibulum posuere. Nullam venenatis sem pulvinar libero aliquet vel adipiscing ante porta. Nunc vulputate iaculis interdum. Morbi lobortis, ipsum a vestibulum consectetur, justo justo ultrices ante, non mattis magna lacus sit amet diam.
uspendisse vulputate libero a ligula tristique ac pellentesque neque pellentesque. In laoreet pharetra est id dapibus. Nulla feugiat, turpis posuere vehicula semper, dolor elit tempus ipsum, vel suscipit velit lorem at risus. Donec sodales risus eget ipsum vestibulum posuere. Nullam venenatis sem pulvinar libero aliquet vel adipiscing ante porta. Nunc vulputate iaculis interdum. Morbi lobortis, ipsum a vestibulum consectetur, justo justo ultrices ante, non mattis magna lacus sit amet diam.
LISTS
- Bulleted List with ul class="pp_black"
- Bulleted List with ul class="pp_arrow"
- Bulleted List with ul class="pp_round"
- Bulleted List with ul class="pp_star"
- Bulleted List with ul class="pp_leaf"
ICONS
| class="ppicon_advanced" Sample Text ! |
class="ppicon_alert" Sample Text ! |
class="ppicon_archive" Sample Text ! |
class="ppicon_baggreen" Sample Text ! |
|
class="ppicon_babwhite" Sample Text ! |
class="ppicon_cancel" Sample Text ! |
class="ppicon_chat" Sample Text ! |
class="ppicon_check" Sample Text ! |
|
class="ppicon_computer" Sample Text ! |
class="ppicon_credit" Sample Text ! |
class="ppicon_help" Sample Text ! |
class="ppicon_hot" Sample Text ! |
|
class="ppicon_info" Sample Text ! |
class="ppicon_offer" Sample Text ! |
class="ppicon_offer5" Sample Text ! |
class="ppicon_offer10" Sample Text ! |
|
class="ppicon_offer20" Sample Text ! |
class="ppicon_offer50" Sample Text ! |
class="ppicon_padlock" Sample Text ! |
class="ppicon_podcast" Sample Text ! |
|
class="ppicon_question" Sample Text ! |
class="ppicon_send"Sample Text ! |
class="ppicon_smiley" Sample Text ! |
class="ppicon_star" Sample Text ! |
INSTRUCTIONS FOR USE
You can apply these styles in two ways. The easiest way to use the typography style sheet provided with this template is to include it in the Joomla Content Editor. If you are unfamiliar with JCE, it is a replacement for the Tiny Editor which comes with Joomla by default. It is far superior in every way.
HERE is a tutorial on how to change your style sheet.
The style sheet for typography is called typo.css so your JCE settings will look like this:

This method makes adding typography a snap as all you will need to do is highlight the text you want formatted and then choose your style from the styles dropdown and voilà you are done. See a screen shot below.

This applies to all styles except for lists. Lists would need to be done manually with the method listed below.
The second method would be to manually add the class to your span, ul or p. Like this:
<p class="ppbox_red" >Get Help Fast! </p>