Downloads

Details:

Odoodem Guards: Columns of Three can help ease the task of template development in Joomla! 1.5 websites by providing a manageable interface in the administrator with a CSS driven module dedicated to managing a simple yet scalable grid for all of your content. Easily organize your html, modules, and content in one module position that can be styled and expanded upon.

Using Odoodem Guards (OG) can be a little tricky if you don't have a solid grasp of how it works. I do however hope that you will find it to be as convenient to the development process of your Joomla! 1.5 websites as I have found it to be necessary in mine.

The first thing to consider is that OG uses negative margins and presumes a liquid layout based on an article I found years ago at alistapart.com by Ryan Brill. Since then I have found liquid layouts to be extremely scalable an brutally easy, even when layouts use a stipulated width, because it's nothing a wrapper div with a stipulated width can't take care of.

WARNING:Do not include any modules positions within OG with the same position as OG itself as this will cause an endless loop and break the application.

In Brill's article he exhibits both a two and three column layouts that take advantage of only one of the columns being liquid (with a relative width) while the remaining columns have a fixed width. When using OG it is notable to consider that columns are evaluated in numerical order. Instead of left, center, and right column layouts you should approach OG sections as 1, 2, and 3. For example: if you have have a three column layout that uses one left column with a width of 200px and one right column with a width 250px, where the center is the liquid column. It would be better to say that column 2 is the liquid column (where the width is omitted) and 1 and 3 have widths and therefor fixed. Please remember that you cannot skip columns. For example: You want a two column layout with a column of a set width to be on the right. So, you place the set width in column 3 because you have left/center/right stuck in your head. When instead you should have set a width in column 2 (with the applicable settings) and column 3 should be left blank to be omitted. Though futzing around with the controls will render content it may not always render content properly.

If you want to make a row of columns to be an absolute width. Just assign a width to the columns rendered. Then along with not assigning a width to columns not rendered, if there is no parameters support content as you must also insure that there is no content assigned to those columns as well: including default text or opening and closing wrappers. For three column layouts just assign a width to all three columns.

NOTE: Once a the width of a column has been omitted a second time within OG that proceeding column is omitted. Even if you have identified module positions within it's parameters.

In the text fields labeled "column." You can assign several modules to be stacked within each column. In the advanced tab you can also assign the component area for the page in one of the columns. You can also assign both modules and the component area to one column in whichever order that you would prefer.

You can also assign Chrome wrappers to your modules by using this:

user1(style=>jollyRoger, headerLevel=>4).user3.user4

Please refer to the Joomla! 1.5 documentation on using chrome.

Module positions are separated by a ".". For example: toprighttop.toprightbottom.breadcrumb.

Snippets:

Like module positions, snippets are seperated by a ".". For example: toprighttop.{OSnippet}.toprightbottom.{JOContent}.breadcrumb.

{JOContent}:You can actually render the component within OG. This is extremely useful when you are trying to trim the fat out of your templates while utilize the full capability of this module.

{OSnippets}:Sometimes you want to add some html to a particular column within OG. In a proceeding example I demonstrate this with a logo.

When working with OSnippets it is important to consider that HTML tags are not identified as so "" but as "[[tag]]". Also, to help make this module more adaptable I also introduced both {baseurl} and {template} as string delimiters to be conveniently used as well. You may also notice an opening and closing wrapper for each column as well as a interceptor to go between the modules/OSnippet and the component itself.

You can also use {jroute=???} for routing links to other pages within the website while keeping the integrity of the url when changing locations.

&124;JOMessage&126;:By default Joomla has a messaging system for displaying messages back to the user i.e., login failure, etc. The locations of these messages are defined within the template itself. When using OG you can render these directly within any column to get similar results. However, you can also include directly inside of any of your components and/or even in your content and OG will check for a message to display and remove this delimiter if none are found.

{ONested}:While using OG you can nest a second set of columns making it possible to have up to 5 columns. To do this simply assign {ONested} to the column where you want to nest the second set within the regular parameters and manage the nested set within the advance parameters.

Controls Manual:

Module Parameters:

These controls only handle module positioning. Please refer to "Advanced Parameters" when dding your component to a column.

Add Clearing: Sometimes, seting this to No this can help when you are putting your OG inside of a floated "div" tag. Works best when you leave the clearing there as it escapes both left and right floats to properly stack.

CSS Prefix: Add a prefix to the ids and classes to properly seperate your styles.

1st, 2nd, 3rd Column: Place your modules or OSnippets inside here. Module positions and snippets are separated by a ".". For example: toprighttop.{OSnippet}.toprightbottom.breadcrumb.

1st, 2nd, 3rd Column Width: Set the width of your columns here. Once a the width been omitted a second time in OG that column is omitted. Even if you have identified module positions oor OSnippets within it's parameters.

Reserve 1st, 2nd, 3rd Column Width: Sometimes you may want to reserve the width of a column for layout or something: even if there is no module in that column that is listed for that page.

Advanced Parameters

I have only addressed the controls that I feel are not related to the functionality of the outer set.

Nested Oddodem Set: Maybe, you would like to nest a second set of columns inside the column that was reserved in the component display field.

Nested CSS Prefix: Add a prefix to the ids and classes to properly separate your styles inside your nested set.

Other Parameters

These address the markup preceding the modules, and components, falling between the modules, and components and following the modules, and components. This is also where you can define one OSnippet of markup to include inside your columns using {OSnippet}.When working with OSnippets it is important to consider that HTML tags are not identified as so "" but as "[[tag]]". Also, to help make this module more adaptable I also introduced both {baseurl} and {template} as string delimiters to be conveniently used as well. You may also notice an opening and closing wrapper for each column as well as a interceptor to go between the modules/OSnippet and the component itself.

Example

[[a href="/{baseurl}"]]
[[img longdesc="The Online Resume of Mitchell W. Morris" alt="LandingHouse Graphics" 
src="/{baseurl}templates/{template}/images/logo.jpg"/]][[/a]]

Enjoy!!!