This document describes how to configure and setup the module positions to achieve a two column layout.
Module Positions
The image below shows the new content layout sections.
The white section at the top is the article content area. The content shown here is determined by the “menu type” selected when the menu item was created using the menu manager.
The next section, highlighted in blue, is the module position ‘content-after’. This module spans the width of the content area. In this example it contains only one module.
The green and yellow highlighted areas are the ‘content-after-left’ and ‘content-after-right’ module positions respectively. In this example both module positions contain two modules each.
Module Style
The module style is used to control the way the content block is laid out.
To change the module style, on the module edit page, in the right hand side section, click the heading “Advanced options” to slide open the settings panel. Enter a value into the field labelled “Module Class Suffix”.
The options are
- underline – place a single line underneath the module
- overline – place a single line on top of the module
- underline overline – place a single line both underneath and on top of the module
- box – place a box around the module
- plain – show a plain module with no outline, or box
If you do not provide a value for “Module Class Suffix” then the module will be displayed without any padding or spacing.
The available style options are demonstrated by the following image.
Content Style
The content style is used to control the way the text inside the module appears.
In addition to the basic HTML tags you have a number of options
- Module Title: by default the module title will be displayed using the special web font used for headings. You may choose to "Hide" the module title field and instead use a h2 or h3 tag inside the module text area.
- Big Text: highlight any text and then use the drop down box “Styles” to select “big”. This will render the normal page text in a larger font size.
- Read More button: highlight any link text then use the drop down box “Styles” to select “read_more”. This will render the link text as a button.
Enabling Modules on Menu Items
In order for a module to appear on any page it must first be assigned to the page's menu item.
Modules are assigned to menu items using the Module edit page. The tools for doing this are located at the bottom of the edit page, on the left hand side.
The drop down list "Module Assignment" is used for selecting the rule governing module placement
The options are
- on every page
- on no pages
- only on the pages selected
- on all pages except those selected
Below the drop down list is an area for "Menu Selection". Use the set of buttons to easily select or deselect groups of items in the menu list.
Use the grey tabs to show menu items from different menus. Place a tick in the box next to each menu item on which the module should appear.
You can repeat the same module across multiple pages by placing a tick next to each page.
Additional Module Styles
Additional module styles have been added for greater flexibility in module styling.
Basic Options
The basic style options are
box style1 – use the background image: /images/styles/style1.jpg
box style2 – use the background image: /images/styles/style2.jpg
box style3 – use the background image: /images/styles/style3.jpg
box style4 – use the background image: /images/styles/style4.jpg
Uploading Images
Use the media manager to upload replacement images into the folder /images/styles/.
The media manager will not allow you to overwrite existing images. You must first delete the existing image and then upload a new version with the exact same filename.
The images may be larger than the module area and the excess will be automatically hidden from view. The image should be at least
300px wide by
150px high
NOTE: when you replacing an existing image be aware that previous visitors to your website may still see the old image for some time because it will be stored in their browser cache until the cache time expires. To force a new image to load the actual file name must be changed. It is currently not possible to change the file name of these background images using the Joomla admin interface. It is only by editing the template stylesheet that these background file names can be changed, or additional styles added.
Formatting Options
In additional the base styles above you have a number of formating adjustments at your disposal. To use these adjustments simply enter style options separated by a space into the module's advanced settings for "Module Class Suffix".
height250 - force the tile to display with a height of 250px
height100 - force the tile to display with a height of 100px
back10, back20, back 30 ... back90 - these options allow you to control the vertical position of the background image. The number represents the percentage by which the background image will be adjusted up. By default a background image sits at 0%. So back10 will adjust the image to 10% of its previous position, ie it will move up slightly. The back90 setting will adjust the image to 90% of its previous position, ie it will move up significantly.
Module Content Requirements
The module must be laid out a certain way in order for the correct formatting to be achieved. Colour coding has been added for legibility
<div><a title="Subscribe to the Hunter Valley Newsletter" class="read_more" href="http://www.winecountry.com.au" style="float: right;">Button</a> <span class="big">Big Text</span> this is the free text area</div>
The easiest way to recreate this format is to copy the contents from an existing test modules, eg "Test: Module Style 1". To do that, click into the text editor area on the test module edit page and hit 'Ctrl-A' to select all and then 'Ctrl-C' to copy the contents. Then paste that into your new module and edit it as necessary. If you accidently remove any of the formatting, try editing the code directly. Above the editor window is a link [show/hide] which will toggle the code view window.
Example
The following example shows how to combine the different settings to control the module layout
Module Class Suffix: box style1 height250 back90
This will use the style1.jpg image with a height of 250px and the background image will be adjust up 90%.
Module Class Suffix: box style2 back50
This will use the style2.jpg image with the default minimum module height of 150px and the background image position adjusted 50% upwards.
