Stay Connected

facebook  twitter  youtube  rss

Typography

Typography styles for this template.

Along with the built in framework typography styles, we have included many more styles for a HUGE catalog of 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 !


    To display error message<p class="error">Error message here!</p>.

    To display info message<p class="message">Info message here!</p>.

    To display tips message<p class="tips">Tips message here!</p>.

    To highlight phrase use<span class="highlight">This is sample of highlighted phrase!</span>

     

     

    To display codes use

    <pre> or <div class="code">
    <?php$lijevo = mosCountModules( 'left' );
    if ( $lijevo ) {$maincontent = 'right_side';} else {$maincontent = 'right_side_full';?

    To display sticky note use: <p class="sticky">Sample of your note!</p>

    To display pin note use :<p class="pin">Sample of your pin note !</p>

    To display clip note use:<p class="clip">Sample of your clip note</p>

    To display download note use:<p class="down">Sample of your download note</p>

    To display blockquote note use: <div class="blockquote"><blockquote>Sample of your blockquote note</blockquote></div>

    01Sample of Big Numbers List<p class="blocknumber"><span class="bignumber">01.</span>Content goes here!</p>Need some more text here to display demo content.Need some more text here to display demo content.Need some more text here to display demo content.

    02Sample of Big Numbers List <p class="blocknumber"><span class="bignumber">02.</span>Content goes here!</p> Need some more text here to display demo content.Need some more text here to display demo content.Need some more text here to display demo content.

    03Sample of Big Numbers List<p class="blocknumber"><span class="bignumber">03.</span>Content goes here!</p> Need some more text here to display demo content.Need some more text here to display demo content.Need some more text here to display demo content.

     

    Sample of ordered list .
    1. Sample of ordered list
    2. Sample of ordered list
    3. Sample of ordered list
    4. Sample of ordered list

    Sample of check list .To use

    <ul><li class="check">Your list item goes here!</li></ul>
    • Sample of li list
    • Dolor sit
    • Consectetuer
    • Adipiscing elit
    • Diam

    Sample of star list .To use

    <ul><li class="star">Your list item goes here!</li></ul>
    • Sample of li list
    • Dolor sit
    • Consectetuer
    • Adipiscing elit
    • Diam

    Sample of video list .To use

    <ul><li class="video">Your list item goes here!</li></ul>
    • Sample of li list
    • Dolor sit
    • Consectetuer
    • Adipiscing elit
    • Diam

    Sample of image border use

    <img src="http://sitename/image.jpg class="border" alt="" title="">

     

    INSTRUCTIONS FOR USE

    You can apply these styles in two ways. The first way is to manually  add the styles.  The easiest way to use the typography styles provided with this template is to use 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.

     

    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.

    styles

    This applies to all styles except for lists. Lists would need to be done manually with the method listed below.

     

    Manually add the class to your span, ul or p. Like this:
    <p class="ppbox_red" >Get Help Fast! </p>

    Most Popular Story

    • Need cash? Pawn shops edge into the mainstream
      At a time when banks have shut their doors on those with bad credit, a growing number of U.S. borrowers are pawning their jewelry, electronics and other valuables to make ends meet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean fringilla, neque sit amet pretium cursus, enim nunc feugiat ante, sagittis fringilla mi nulla commodo massa. Quisque lorem nisl,…

    Weather

    Fair

    65°F

    New York, NY

    Fair
    Humidity: 43%
    Wind: N at 3 mph

    Tech Tips

    • Keeping Kids Safe Online
      Adults have a responsibility to help children learn about, interpret and understand their world. It's a pretty basic concept, but how do we as adults help kids understand their world when we aren't completely aware of the threats and benefits of things like the internet? Today's technology tip is all about helping adults educate themselves about the internet so they can help kids stay safe online.
      Read more...

    Live Stock Updates


    Warning: Invalid argument supplied for foreach() in /home/pixelpo1/public_html/demos/newsie/modules/mod_stockscroller/helper.php on line 61