Take Advantage of Your Joomla! Gantry Template System- Part 1 of 5

1. Go to your template manager
2. Click on the options button in the top rightish corner of your admin screen.
3. Look for an option that says ‘Preview Module Positions”. The phrasing and look of this section may vary depending on your version of Joomla! and template. Here is what it looks like in Joomla! 3.2

previewmodules

4. Toggle the preview modules option to on.*
5. Go to the frontend of your site and append the ?tp=1 query to the URL. For example, www.mydomain.org/?tp=1

* It is recommended to turn this option off if it is not in use since it can slow down your site.

Following the steps above should result in something like this:

tp1grid

Welcome! this is Gantry! Every module posiiton should now be layed out before your eyes. Take some time to go through the positions your template has to offer. Most rows you will notice have 6 positions across with the exeption of the drawer, the main content area positions (content-top a, b and c  and content-bottom a, b and c), the sidebars and the main article position. All these positions will expand or contract based on whether or not a module or article is published in them. There are situations in which you may want to force one position to be wider or more narrow than another. I will conclude this part of the series by dicussing how to do this:

Say I want a two column layout for part of a page on my site. I have a photo that I want to position in the left column and I want some text to show up in the right column. In addition I want the photo column to be larger than the text column. Let’s use the maintop-a and b positions as an example of how to do this.  To get our uneven two column layout we will need to adjust the layout so that the a position is wider than the b position. Finally we don’t want this layout for every page, just assigned to some pages. Here is how to do this.

1. Go to your template manager.
2. Check the box next to your master default template. It is the template that is marked Master and has a gold star which means it is the default template.

find-default-template

3. Make a duplicate of this template by pressing the duplicate button in the top of the template manager.

duplicate

4. Once you have your duplicate click into that template.
5. Rename the duplicate template to something relevant. In this case we can rename it “template-two column”
6. Go to the layout tab.
7. Find the maintop positions.
8. Adjust the slider till you get the proportions that you want.

maintop

9. Go to the “Assignment” tab.
10. Check the boxes for all the menu items you want to apply this particular layout to.

ASSIGNMENTS

11. Publish your modules to the maintop-a and maintop-b  positions.
12. Assign the modules to the same menu items that you assigned the layout to in step 10.
13. Go to the front-end and make sure that it works.

You can see from this example how flexible the system is and how you can get creative with your layouts. I hope you found this article helpful.

Below is a sneak peak at next week’s article:

Wouldn’t it be nice (you say to yourself as you contemplate the Joomla! template system over breakfast)  if you could make a Joomla! page built completely out of modules without having to point that menu item to an actual article? By default Joomla! requires that every menu item point to some type of content however, your Gantry system allows you to turn off the main body position. In Part 2 of this series I would like to discuss how to do this and some real life applications for doing so…

Stay tuned! 

If you have any questions or require any of my services please feel free to comment here or send me an email at [email protected] I would love to talk!

Thanks!