Typography

Automatic List Columnizer!

By adding class "listcols[x]" (where [x] is the number of columns you want the list to have) to your unordered list, you can produce up to 6 columns in which to display your list like this:

  • Table-less design
  • Valid CSS
  • Fixed or Fluid Width
  • Easy List Columnizer
  • Zoombox
  • Lazy-Load for Images
  • 15 Module Styles
  • Wow! This list is really cool!
  • And it will divide into columns
  • Automatically!
  • All I did was apply the class!
  • Table-less design
  • And Here's some more...
  • Fixed or Fluid Width
  • Easy List Columnizer
  • Zoombox
  • Lazy-Load for Images
  • 15 Module Styles
  • Wow! This list is really cool!
  • And it will divide into columns
  • Automatically!
  • All I did was apply the class!

 

 

 

 

 

 

 

To create a nice frame around your image, simply select the image and from Joomla's styles dropdown, select the class "frame". You can also choose the class "frame-left" or "frame-right" to add margin if the image is aligned to the left or right.

 

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.

  • 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 Checklist. 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.

 

  • This is a sample Pluslist. 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