Typography PDF Print E-mail

This is a Magazine Style Drop Cap.

Just use <span class="dropcap">T</span> to make it happen as we have here. Vivamus et pede. Vestibulum dictum dapibus arcu. Fusce quam arcu, nonummy ut, accumsan sit amet, sodales vel, urna. Cras sed nisl ut libero adipiscing semper. Aliquam fermentum nunc et turpis.

To create a nice frame around your image, simply select the image and from Joomla's styles dropdown, select the class "frame". Simple!

Use <p class="attn">Your attention-grabbing message will look like this!</p>.
Use <p class="info">Your info message will look like this!</p>.
Use <p class="tip">Your bright idea goes here!</p>.

This is the style Heading 1.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce nec ligula eget sapien rhoncus egestas. Nunc ac enim. Aliquam tempus nisl ut libero. Sed purus. Mauris pellentesque interdum magna.

This is the style Heading 2.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce nec ligula eget sapien rhoncus egestas. Nunc ac enim. Aliquam tempus nisl ut libero. Sed purus. Mauris pellentesque interdum magna.

This is the style Heading 3.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce nec ligula eget sapien rhoncus egestas. Nunc ac enim. Aliquam tempus nisl ut libero. Sed purus. Mauris pellentesque interdum magna.

This is the style Heading 4.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce nec ligula eget sapien rhoncus egestas. Nunc ac enim. Aliquam tempus nisl ut libero. Sed purus. Mauris pellentesque interdum magna.

This is the style Heading 5.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce nec ligula eget sapien rhoncus egestas. Nunc ac enim. Aliquam tempus nisl ut libero. Sed purus. Mauris pellentesque interdum magna.

This is the style Heading 6.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce nec ligula eget sapien rhoncus egestas. Nunc ac enim. Aliquam tempus nisl ut libero. Sed purus. Mauris pellentesque interdum magna.

 

01This is a sample bubble number. Use <p class="bubble"><span class="bubblenum">01.</span>Your content goes here!</p> to form a block number!

02This is a sample bubble number. Use <p class="bubble"><span class="bubblenum">02.</span>Your content goes here!</p> to form a block number!

03This is a sample bubble number. Use <p class="bubble"><span class="bubblenum">03.</span>Your content goes here!</p> to form a block number!

 

  • Here's a sample Unordered List.
  • Point #2.
  • Point #3.
  • And so on...

 

  1. This is a sample Ordered List.
  2. Point #2.
  3. Here's point #3.
  4. And the final point....

 

  • This is a sample Check list.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Fusce nec ligula eget sapien rhoncus egestas.
  • Nunc ac enim. Aliquam tempus nisl ut libero.
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

 

Make your code standout by using the div class "code" around your text:

pre, .code
{padding: 10px 15px;
background: #999;margin: 5px 0 15px;
border-left: 5px solid #4A4643;
border-bottom: 5px solid #4A4643;}

You can also highlight specific text by using the "highlight" class
 
^ Top ^