You could start here:
dev.joomla.org/component/option,com_jd-w...tutorials:templates/
The most fundamental thingd to know about Module-Positions are the calltag and that there is a variable that can be queried from php to check, if there are Modules assigned to this position on the Current page.
The rest is mainly HTML and CSS-Knowledge.
As a simple Example:
to check, if Modules are assigned to the position "user11" you use:
<?php if ($this->countModules('user11')) : ?>
and to close the Conditional, you add
This will now check, if there are Modules assigned to "user11". If there are Modules assigned to that position, it will receive "true" and execute, whatever you put between the if and endif Statements. If there are no Modules in user11 on this page, it will receive "false" and therefore skip everything between if and endif.
The Module-Calltag in J!1.5 looks like that: <jdoc:include type="modules" name="user10" style="rounded" /> (
complete Reference here
)
For Modules, "type" will - of course - always be "modules". "name" is the name of the position, the Calltag should display - in this case it will output all Modules, that are assigned to "user10" (Positions are defined in /templates/<your template>/templateDetails.xml).
For "style" you can choose between:
- none. Output the raw Module content with no wrapping.
- table. Output the module in a table.
- horz. Output the module as a table inside an outer table.
- xhtml. Output the module wrapped in div tags.
- rounded. Output the module wrapped in nested div tags to support rounded corners.
- outline. Output the module wrapped with a preview border.
The most commonly used are xhtml for plain output and rounded. Rounded will wrap each Module in 4 div-Tags, that you can style in CSS with:
div.module, div.module div, div.module div div, div.module div div div. You could use these to assign Background-Images, that make up a border with rounded corners for example.
To wrap everything up now, let's take the position "right" as an Example:
Example 1: a snippet from a Template, with a fixed right column, that will always be visible, even if there are no Modules assigned to it<div id="right">
<?php if ($this->countModules('right')) : ?>
<jdoc:include type="modules" name="right" style="rounded" />
<?php endif; ?>
</div>
PHP will check, if there are Modules in "right" - if there are none, it will not call the <jdoc:include.... but since the <div> sits outside the if-statement, it will always be drawn.
Example 2: same as above, but the whole right column will be hidden, if there are no Modules assigned to it:<?php if ($this->countModules('right')) : ?>
<div id="right">
<jdoc:include type="modules" name="right" style="rounded" />
</div>
<?php endif; ?>
As above, PHP will check, if there are Modules assigned to "right". If there are none, it will skip the whole <div> and the <jdoc:include... and therefore the whole right div will be hidden (or "collapsed" in other words).