Back to Top

Design

Straight out of the box, Joomla 1.0.x does not have the capability to format content into more than one column. Sure, you can get custom-layout solutions (such as the excellent iJoomla Magazine component) but what if you want to keep the core Joomla! structure, but with slightly different layouts?

Two-column layouts can be achieved fairly easily, and you can easily save a 'template' content item if you need to do it again for future articles. This kind of layout is primarily for aesthetics but it could have more practical applications too, especially for larger blocks of text.  The same method can also be applied to show three or even four column layouts (although, depending on the maximum width of your template, more than two might not look so good).

How to create your two-column layout:

  1. Make sure you've already got your section/category created (remember, you can't create content without a category for it to go in).
  2. Create a new Content Item.
  3. In your WYSIWYG editor (we'll assume you are using TinyMCE, although most of them are the same), click the "Create Table" icon (Create Table).
  4. In the "Number of Columns" field, enter "3".  In the "Number of Rows" field, enter "1".  In the "Width" field, enter "100%".  You may want to alter the width setting depending on how the layout looks in your template.  Three columns are needed to achieve a spacer between the two columns - or else they will be too close together, making reading very tricky,
  5. Click on the first cell (the one on the left).  Your cursor should now be positioned inside.  Now click the "Table Cell Properties" icon (Table Cell).
  6. Enter a value of "49%" for the width, and click "Update".
  7. Now click the middle cell; your cursor should now be flashing inside.  Once again, click the "Table Cell Properties" icon, enter a value of "2%" for the width, and click "Update".
  8. Repeat the process for the right-hand cell, as in step 6, enter a value of "49%" and click update.
  9. You should now have a layout showing two wide table cells with a narrow cell in the middle.

Your new layout is ready!  If you like, you can save this empty content item as a blank template for future use.  Just make sure it's not marked as published!

To add your text, simply type into the left & right columns as you would normally, or copy & paste from another document.

Since the content does not automatically sort the text/images into equal fields, it's usually easiest to add all the content into the left-hand side, then judge where the page-split should be - then cut a chunk of text from the left before pasting it on the right.