Applying YOOtheme Typography Styles

Typography is a key element in web design. YOOtheme templates deliver sophisticated typography and various stylings. The style guide gives you an overview about all possible HTML tag stylings provided by the template. It also helps you to set up the available classes for special stylings, in addition you will find the sample code that you can apply as "raw" code to overcome issues with WYSIWYG editors stripping out the code.

This tutorial has been moved to the Yootheme Template Club forums and is back now because you can see the examples better here than on a forum

 

Example of a normal < blockquote>

This is some sample text this is some sample text, this is some sample text. This is some sample text this is some sample text, this is some sample text. This is some sample text this is some sample text, this is some sample text. This is some sample text this is some sample text, this is some sample text.This is some sample text this is some sample text, this is some sample text.

< blockquote >Your Text Goes Here< /blockquote>

 

Example of a < blockquote > with the added class=" quotation "

To get the images to show we need to add the class="quotation" to the opening < blockquote > tag so it looks like this, < blockquote class=" quotation "> if we do not do this, we will not see the quotation images and the styling will look like the first quote example.

< blockquote class="quotation" >Your Text Goes Here< /blockquote>

 

Using the "star" , "checkbox" , "arrow" and "check" in the Unordered style

  • First row Text Goes Here
  • Second Row Text Goes Here
  • Third Row Text Goes Here
  • First row Text Goes Here
  • Second Row Text Goes Here
  • Third Row Text Goes Here
  • First row Text Goes Here
  • Second Row Text Goes Here
  • Third Row Text Goes Here
  • First row Text Goes Here
  • Second Row Text Goes Here
  • Third Row Text Goes Here
< ul class=" star "> < li >First row Text Goes Here < li >Second Row Text Goes Here < li >Third Row Text Goes Here < /ul>

 

Example of a "disc" class int the Ordered List style

  1. Line 1 Text Goes Here
  2. Line 2 Text Goes Here
  3. Line 3 Text Goes Here
< ol class=" disc "> < li >Line 1 Text Goes Here< /li > < li >Line 2 Text Goes Here< /li > < li >Line 3 Text Goes Here< /li > < /ol>

 

Example of using two syles combined

This is some sample text this is some sample text, this is some sample text. This is some sample text this is some sample text, this is some sample text. This is some sample text this is some sample text, thisCombine Tags with class " inset-right " or " inset-left ". Example: < span class=" info inset-right width25 " is some sample text. This is some sample text this is some sample text, this is some sample text.This is some sample text this is some sample text, this is some sample text. This is some sample text this is some sample text, this is some sample text. This is some sample text this is some sample text, this is some sample text. This is some sample text this is some sample text, this is some sample text. This is some sample text this is some sample text, this is some sample text.This is some sample text this is some sample text, this is some sample text. This is some sample text this is some sample text, this is some sample text. This is some sample text this is some sample text, this is some sample text. This is some sample text this is some sample text, this is some sample text. This is some sample text this is some sample text, this is some sample text.This is some sample text this is some sample text, this is some sample text. What's that I hear you say ? You want to drop a small donation to support the tutorials, no problem, just click here
Saturday, 11 December 2010 Posted in Tutorials

Leave a comment

You are commenting as guest.

Premium Membership