Typography

Valora este artículo
(0 votos)

It is possible with templates which have a typography page to show you how you can use e.g. headline tags in order to structure your content in a better way. Below, we present rebuilt and refreshed typographical aspects of Gavern Framework. In order to use it, you have to use a plug in which is delivered in a package with a template or use HTML code.

Heading Styles

This is Heading 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer semper egestas nunc in volutpat. Fusce adipiscing velit ac eros tempor iaculis. Phasellus venenatis mollis augue, non posuere odio placerat in. Etiam volutpat ultrices lectus

This is Heading 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer semper egestas nunc in volutpat. Fusce adipiscing velit ac eros tempor iaculis. Phasellus venenatis mollis augue, non posuere odio placerat in. Etiam volutpat ultrices lectus

This is Heading 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer semper egestas nunc in volutpat. Fusce adipiscing velit ac eros tempor iaculis. Phasellus venenatis mollis augue, non posuere odio placerat in. Etiam volutpat ultrices lectus

This is Heading 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer semper egestas nunc in volutpat. Fusce adipiscing velit ac eros tempor iaculis. Phasellus venenatis mollis augue, non posuere odio placerat in. Etiam volutpat ultrices lectus

Pre Code Styles

Below is a sample of <pre> or <div class="code">

#zt-body {
width: 180px;
float: right;
color: #EEEEEE;
}
#zt-body {
width: 180px;
float: right;
color: #EEEEEE;
}

Highlights

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

This is a highlight phrase.

Use <span class="highlight">Your highlight phrase goes here!</span>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

This is a highlight phrase.

Use <span class="highlight1">Your highlight phrase goes here!</span>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

This is a highlight phrase.

Use <span class="highlight2">Your highlight phrase goes here!</span>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

This is a highlight phrase.

Use <span class="highlight3">Your highlight phrase goes here!</span>.

Icon set 1

This is a sample icon1 documents Use <p class="icon1">Your message goes here!</p>.

This is a sample icon2 documents Use <p class="icon2">Your message goes here!</p>.

This is a sample icon3 documents Use <p class="icon3">Your message goes here!</p>.

This is a sample icon4 documents Use <p class="icon4">Your message goes here!</p>.

This is a sample icon5 documents Use <p class="icon5">Your message goes here!</p>.

This is a sample icon6 documents Use <p class="icon6">Your message goes here!</p>.

This is a sample icon7 documents Use <p class="icon7">Your message goes here!</p>.

This is a sample icon8 documents Use <p class="icon8">Your message goes here!</p>.

This is a sample icon9 documents Use <p class="icon9">Your message goes here!</p>.

This is a sample icon10 documents Use <p class="icon10">Your message goes here!</p>.

This is a sample icon11 documents Use <p class="icon11">Your message goes here!</p>.

This is a sample icon12 documents Use <p class="icon12">Your message goes here!</p>.

This is a sample icon13 documents Use <p class="icon13">Your message goes here!</p>.

This is a sample icon14 documents Use <p class="icon14">Your message goes here!</p>.

This is a sample icon15 documents Use <p class="icon15">Your message goes here!</p>.

This is a sample icon16 documents Use <p class="icon16">Your message goes here!</p>.

This is a sample icon17 documents Use <p class="icon17">Your message goes here!</p>.

This is a sample icon18 documents Use <p class="icon18">Your message goes here!</p>.

This is a sample icon19 documents Use <p class="icon19">Your message goes here!</p>.

This is a sample icon20 documents Use <p class="icon20">Your message goes here!</p>.

This is a sample icon21 documents Use <p class="icon21">Your message goes here!</p>.

This is a sample icon22 documents Use <p class="icon22">Your message goes here!</p>.

This is a sample icon23 documents Use <p class="icon23">Your message goes here!</p>.

This is a sample icon24 documents Use <p class="icon24">Your message goes here!</p>.

This is a sample icon25 documents Use <p class="icon25">Your message goes here!</p>.

This is a sample icon26 documents Use <p class="icon26">Your message goes here!</p>.

This is a sample icon27 documents Use <p class="icon27">Your message goes here!</p>.

This is a sample icon28 documents Use <p class="icon28">Your message goes here!</p>.

This is a sample icon29 documents Use <p class="icon29">Your message goes here!</p>.

This is a sample icon30 documents Use <p class="icon30">Your message goes here!</p>.

Unordered lists

  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.

Warnings

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer semper egestas nunc in volutpat. Fusce adipiscing velit ac eros tempor iaculis. Phasellus venenatis mollis augue, non posuere odio placerat in. Etiam volutpat ultrices lectus.

This is a sample clip note. Use <p class="box-info">Your clip note goes here!</p> to form a clip note!

This is a sample clip note. Use <p class="box-warning">Your clip note goes here!</p> to form a clip note!

This is a sample clip note. Use <p class="box-stickynote">Your clip note goes here!</p> to form a clip note!

This is a sample clip note. Use <p class="box-upload">Your clip note goes here!</p> to form a clip note!

This is a sample clip note. Use <p class="box-download">Your clip note goes here!</p> to form a clip note!

Sábado, 01 Enero 2011 00:00 Escrito por  Joomla!
Visto 601 veces Modificado por última vez en Lunes, 06 Agosto 2012 01:47
Más en esta categoría: Fusce eget sem quis tellus »
Zo2 Framework Settings

Select one of sample color schemes

Google Font

Menu Font
Body Font
Heading Font

Body

Background Color
Text Color
Link Color
Background Image

Header Wrapper

Background Color
Modules Title
Text Color
Link Color
Background Image

Slider Wrapper

Background Color
Modules Title
Text Color
Link Color
Background Image

Inset Wrapper

Background Color
Modules Title
Text Color
Link Color
Background Image

Bottom Wrapper

Background Color
Modules Title
Text Color
Link Color
Background Image
Background Color
Modules Title
Text Color
Link Color
Background Image
 
Top of Page
LiveZilla Live Help