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.

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.

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

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

Example of using two syles combined