Template Typography Guide

Joomla Optimus features integrated Joomla template parameters for serif and sans-serif Joomla typography.

I decided to take a calligraphy class to learn how to [learn calligraphy]. I learned about serif and sans-serif typefaces, about varying the space between different letter combinations, about what makes great typography great. It was beautiful. Historical. Artistically subtle in a way that science can't capture. And I found it fascinating. — Steve Jobs

Ever look around the web and notice some sites have such great typography? The trick to beautiful typography is of course in the Joomla CSS, but using valid XHTML to structure your content is key.

Keeping Your Typography Clean

  • Always use <p> tags to fragment paragraphs, pay attention to heading structure. If you're a novice with XHTML, just challenge yourself to use the most often used codes such as <p>, <h1>, <h2>, <h3>, <img>, and <a>. You'll be amazed at what you can do.
  • Familiarize yourself with the provided Joomla&nbsp;CSS styles.
  • Never paste directly into the editor from layout programs such as Microsoft Word
  • Use a Joomla&nbsp;WYSIWYG Editor with a code friendly view.
    We recommend wysiwygpro ($54) for novice users or Jxtended's Codepress (Free) editor for advanced users.
  • Ask your extension developers to practice using valid XHTML. Using valid code helps us to identify and fix browser display errors.

Heading Two <h2>

typewriter This is paragraph <p> text. The image to the left is wrapped inside the paragraph tag and is using a class name of "left".You can also use a class name of "right" for a right floated/aligned image. The rest of this paragraph is filler text to maintain balance. Quisque libero nulla, porttitor eu, convallis sed, gravida ac, nulla. Ut malesuada, tellus sed facilisis tincidunt, orci erat lobortis leo, id varius massa lectus ultrices diam. Pellentesque feugiat sapien a est. Suspendisse augue. Nam ultricies suscipit enim. In hac habitasse platea dictumst. Sed elementum est vel ipsum. Etiam nec sem. In vehicula iaculis justo. Quisque molestie eros eget nibh. Morbi elementum sollicitudin erat. Fusce nec libero nec purus ornare accumsan. Fusce ut quam. Suspendisse et tellus et pede vehicula posuere. Cras et eros id ligula fermentum laoreet. Sed tempus.

Heading Three <h3>

This is paragraph <p> text. Integer id metus at elit sodales convallis. Quisque libero nulla, porttitor eu, convallis sed, gravida ac, nulla. Ut malesuada, tellus sed facilisis tincidunt, orci erat lobortis leo, id varius massa lectus ultrices diam. Pellentesque feugiat sapien a est. Suspendisse augue. Nam ultricies suscipit enim. In hac habitasse platea dictumst. Sed elementum est vel ipsum. Etiam nec sem. In vehicula iaculis justo. Quisque molestie eros eget nibh. Morbi elementum sollicitudin erat. Fusce nec libero nec purus ornare accumsan. Fusce ut quam. Suspendisse et tellus et pede vehicula posuere. Cras et eros id ligula fermentum laoreet. Sed tempus.

Heading Four <h4>

This is paragraph <p> text. Integer id metus at elit sodales convallis. Quisque libero nulla, porttitor eu, convallis sed, gravida ac, nulla. Ut malesuada, tellus sed facilisis tincidunt, orci erat lobortis leo, id varius massa lectus ultrices diam. Pellentesque feugiat sapien a est. Suspendisse augue. Nam ultricies suscipit enim. In hac habitasse platea dictumst. Sed elementum est vel ipsum. Etiam nec sem. In vehicula iaculis justo. Quisque molestie eros eget nibh. Morbi elementum sollicitudin erat. Fusce nec libero nec purus ornare accumsan. Fusce ut quam. Suspendisse et tellus et pede vehicula posuere. Cras et eros id ligula fermentum laoreet. Sed tempus.

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.

The styles above are used by appending a class tag of warn, info, and alert to the paragraph tag..
Example:

 <p class="warn">
 ....your text here......
 </p>
 <p class="info">
 ....your text here......
 </p>
 <p class="alert">
 ....your text here......
 </p> 

The quote at the top of this page was achieved by appending the "quote" class to the paragraph tag.
Example:

<p class="quote">...your quoted text here...</p>
Unordered List Example:
  • List Item One
    • Sublevel List Item A
    • Sublevel List Item B
    • Sublevel List Item C
  • List Item Two
  • List Item Three
  • List Item Four
Ordered List Example:
  1. List Item One
    1. Sublevel List Item A
    2. Sublevel List Item B
    3. Sublevel List Item C
  2. List Item Two
  3. List Item Three
  4. List Item Four
CheckList Example:
  • Checklist Item 1
  • Checklist Item 2
  • Checklist Item 3

The checklist style above is achieved by entering:

<ul class="checklist">
<li>List Item A</li>
<li>List Item B</li>
<li>List Item C</li>
</ul>
 
Upcoming Events
This is where upcoming events, family reunion information or other things of interest will appear.

Copyright © 2016, Wildern Family • All Rights Reserved.