-
This tutorial will show you how to create a new module suffix and how to style it. For the purpose of the tutorial I will use the JA_Purity template and Photoshop for image editing but any image software that supports slices or cropping will achieve the same result. As usual I will tell you way more than you need to know(SORRY!) about how to achieve the results but please read everything… it will give you a much better understanding of how modules work and will enable you to truly enhance your site and make it unique.
As always before modifying files MAKE A BACKUP!!!!!
A module ‘Suffix’… is a method that has been built into Joomla that allows you to easily apply different styles to different modules. We use the Module Manager in the Admin Backend to apply the suffix and we use 4 images and our template.css file to style the suffix.
Joomla will usually code a module like <div class=”module”>. Whatever we put in the suffix box above will be added to the class. Eg. if we save -sample in the suffix box joomla will code the page like <div class=”module-sample”>. This means if we create a style in our css as div.module-sample, then this style will be applied to any module we add the -sample suffix to. Or will it? I’m afraid not. There are certain limitations. Read on for more…
Why it won’t work for all modules…As we know, templates are designed in all shapes and sizes with various module ‘positions’ around the page. When a template designer is creating a module position he must decide what style the position is to have. This is a PHP style not a CSS style. To see this in practice add ?tp=1 to the end of any joomla homepage URL. For example JA purity demo. We can see that some positions are ‘xhtml’ and some are ’rounded’ (or ‘jarounded‘ for some Joomlart templates. From now on I’ll just refer to them all as ‘Rounded’ ).
In our index.php file we will see something like…[php]<!– BEGIN: LEFT COLUMN –>
<div id=”ja-col1″>
<jdoc:include type=”modules” name=”left” style=”xhtml” />
</div><br />
<!– END: LEFT COLUMN –>[/php]…and the right column…[php]<!– BEGIN: RIGHT COLUMN –>
<div id=”ja-col2″>
<jdoc:include type=”modules” name=”right” style=”jarounded” />
</div><br />
<!– END: RIGHT COLUMN –>[/php]Only modules placed in ‘Rounded’ styled positions (ie. with nested divs) can be
styled with rounded, fluid, background styling!We could change the left column to ‘jarounded’ too with interesting results. Remember though… the ja-col1 and ja-col2 will also have different styling that can still make the column modules look and behave different.
If we look in our web directory for a file called modules.php we will see how each (PHP) class of a module is coded. ‘Rounded’ is coded with 4 nested <div> tags and it’s that that enables us to have nice module styling and enables us to add a rounded corners and fancy backgrounds.
[php]
/*
* Module chrome that allows for rounded corners by wrapping in nested div tags
*/
function modChrome_jarounded($module, &$params, &$attribs)
{ ?>
<div class=”jamod module<?php echo $params->get(‘moduleclass_sfx’); ?>” id=”Mod<?php echo $module->id; ?>”>
<div>
<div>
<div>
<?php if ($module->showtitle != 0) : ?>
<?php
if(isset($_COOKIE[‘Mod’.$module->id])) $modhide = $_COOKIE[‘Mod’.$module->id];
else $modhide = ‘show’;
?>
<h3 class=”<?php echo $modhide; ?>”><span><?php echo $module->title; ?></span></h3>
<?php endif; ?>
<div class=”jamod-content”><?php echo $module->content; ?></div>
</div>
</div>
</div>
</div>[/php]and how that will look in our html…<div class=”module-sample”>
<div>
<div>
<div>
<h3>Our Header Title</h3>
The module content here…
</div>
</div>
</div>
</div>]
Styling the MODULE…
OK so what we have is 4 nested divs. These are 4 positions that will display on top of each other. If we place an image in each corner then we can create a rectangle. If we make our 4 images correct we can make it look like 1 image. Have a look at the module below and we can see how it is actually made up of 4 well placed images.
( That should be top right module and bottom right module^^^^^^^)
The CSS…
Important: If you follow my instructions to a tee and the results are not what you expected it is because all joomlart templates are different. So the styling for one template suffix may not work exactly the same in another template. It will most likely be a padding or margin problem. If you run in to any problems just post below and someone will help you out.
The CSS for a module suffix looks like this…
/*sample suffix. Use '-sample' as the suffix name in Module Manager */
div.module-sample {
background: url(../images/sample_br.png) no-repeat scroll right bottom; /* Image for bottom right corner. Our main image. */
clear: both;
float:left;
margin-bottom:15px;
padding:0;
width:100%;
}
div.module-sample div {
background: url(../images/sample_bl.png) no-repeat scroll left bottom; /* Image for bottom left corner. */
}
div.module-sample div div {
background: url(../images/sample_tr.png) no-repeat scroll right top; /* Image for top right corner. */
}
div.module-sample div div div {
background: url(../images/sample_tl.png) no-repeat scroll left top; /*Image for top left corner. Smallest image. */
padding: 15px; /* Padding for inside whole container including header. */
}
/* This extra div is only needed on a few templates */
div.module-sample div div div div {
background: none;
padding: 0;
}
div.module-sample h3 {
color: #FFFFFF; /* Colour of heading text. */
margin: 0 0 5px;
}
The code above should be copied and pasted into your template.css file. To have a 2nd suffix just copy it and change the text ‘sample‘ to something else.If the template you are using already has a suffix in the CSS you may find that there is styling common to all suffix variants. For example you would usually want your heading, the <h3> tag, to look the same on all modules. So if you have something like…
div.module-brick h3,
div.module-green h3,
div.module-cyan h3 {
line-height:normal;
margin:0 0 5px;
padding:0;
}
You would add your suffix in to it like…
div.module-sample h3,
div.module-brick h3,
div.module-green h3,
div.module-cyan h3 {
line-height:normal;
margin:0 0 5px;
padding:0;
}
Of course you can still add individual styling for your -sample h3. Just make sure that it is after the common styling in the CSS file.That’s the CSS done.
[/LEFT]
Creating the images…
I could write a big tutorial on how to create the images but look for any tutorial on creating buttons and it’s the same thing. Ours are just bigger and we need to slice them into 4 separate images.
Top Left: The smallest image. This should be no wider or higher than it needs to be to smoothly blend with the image to it’s right and below it.Top Right: This should be no higher than it needs to be to blend in with the image below it but hould be wide enough to accomodate a wide module.
Bottom Left: This should be no wider than it needs to be but should be high enough to allow any size module in it without it haveing to repeat.
Bottom Right: Our main Image. This should be at 400px wide and at least 600px high.Finished images are saved to /templates/YOUR_TEMPLATE_NAME/images
You can download a .pdf template for doing your own suffix here. It contains named slices. Using this template… when you have finished your image hold ‘CTRL ALT SHIFT+S’… select png8 in the dialog box and click Save. When the save box appears select Slices: User Slices. This will create a folder in your save location called Images with the 4 named slices inside.The END!!! almost…
OK so just to recap….
- Your module suffix’s can be applied to ‘Rounded’ Module positions ONLY.
- The CSS above may need to be tweaked depending on the templates current CSS.
- You need 4 images that can be pieced together to make one rectangle.
- If you have any problems post them here.
I’m sorry this has turned out so long, when I started I thought it would take 20 minutes, (I was wrong!) but as I said at the start, if you understand how module suffix’s work, and I hope you do after reading this, then you will find it much easier to make them and to get them to look right.
If anyone needs any help or runs into any problems then post below and people will help you.
If you need any help making the graphics then post in the graphics request section here.Of course if you spot any mistakes, I am only learning, please point them out!
[/LEFT]
This topic contains 7 replies, has 6 voices, and was last updated by 
We moved to new unified forum. Please post all new support queries in our New Forum