The Joomla! Community Magazine™

20 Suggestions for Better Style and Script Designing in Joomla! Extensions (Part 1)

Written by | Sunday, 30 September 2012 19:00 | Published in 2012 October
Extension developers provided large number of extensions for Joomla!. But as you know, some of them are not compatible with many templates. Also, in many cases Joomla! extensions do not have standard style and script designs, and because of this many users force to hack the extensions. In this article I am going to explain 20 suggestions for better style and script designing of Joomla! extensions, and maybe these simple techniques and patterns will help you!

This article's content extracted from many experiments that Joomla! developers have been encountered, but also it could be better solutions, there are lot of ways to reach the goals. if you have other solutions, write them in the comments.

Style and script designing is the main part of User Interface designing, but they are not the same thing. I will explain some solutions for better UI designing in Joomla! extensions next articles.

Note that the meaning of script in this article is the client-side scripting like JavaScript. Also in codes {component name} is referring to the Joomla! Component name and {module name} is refer to the Joomla! Module name.

1) Root selector

This is very simple. Just use a selector(class or id) in the first level of your extension HTML output. for example:

<div class="{root-selector}">

...

[output of extension]

...

</div>

If you add this selector and use it in your style and script designing, it will be rescued your extension from many conflicting! Lets look at a complete example:

<div class="myext">

<h1 class="title" >

extension's title

</h1>

<div class="content" >

extension's content

</div>

</div>

In this example the root selector is the class named "myext". So in the style and script designing simply use .myext in the first level of your selectors:

Usage in style designing

.myext .title {

font-size: 12px;

}

.myext .content {

padding-top: 5px;

}

Usage in script designing (jQuery)

$('.myext .content').fadeIn('slow');

Note that you must use unique name for the root selector.

2) Joomla! parameters for style and script controlling

Your extension users will be controlling style and script propertices by Joomla! parameters. We have four type of parameters in Joomla! that can be used in your extensions: Component parameters, Module parameters, Menu parameters and Plugin parameters (template parameters rarely used in extensions). See the below examples to know how to use it:

[Using Menu parameters]

if($itemid = JRequest::getInt('Itemid'))

{

$menu= JFactory::getApplication()->getMenu();

$active= $menu->getItem($itemid);

$params= $menu->getParams( $active->id );

$param= $params->get('param-name' , 'default-value');

}

[Using Component parameters]

$app = JFactory::getApplication('site');

$params = $app->getParams('com_{component name}');

$param = $componentParams->get('param-name', 'default-value');

[Using Module parameters inside a Module]

$param = $params->get('param-name', 'default-value');

[Using Module parameters outside a Module]

$module = JModuleHelper::getModule('{module name}');

$params = new JRegistry();

$params->loadString($module->params);

$param = $params->get('param-name', 'default-value');

3) Class suffixes

Maybe your extension users need to have special selector in some non-general cases. With built-in class suffixes in Joomla! users can do this easily, without hacking extensions. If you want to know more about this, read this document. In Joomla! we have 2 type of class suffixes: Page class suffix and Module class suffix (you can add Plugin class suffix with the parameters if you need it, Joomla! is flexible!). We highly recommended you to add this parameter to the root selector[#] of your extension. suppose that my root selector is "myext", see the below to learn how to use this technique:

Usage in Page class suffix (Joomla! 2.5 Components)

[Get the property : PHP]

$app= JFactory::getApplication();

$params = $app->getParams();

$menus= $app->getMenu();

$menu= $menus->getActive();

$pageclass_sfx = htmlspecialchars($params->get('pageclass_sfx'));

[Use it : HTML]

<div class="myext<?php echo $pageclass_sfx; ?>">

Usage in Module class suffix (Joomla! 2.5 Modules)

[Get the property : PHP]

$moduleclass_sfx = htmlspecialchars($params->get('moduleclass_sfx'));

[Use it : HTML]

<div class="myext<?php echo $moduleclass_sfx; ?>">

4) Additional unique selectors in item lists

In some cases we output the list of items in the Joomla! extensions. We can add additional unique selector to each item, so users do not need to hack the extensions in small customizing. For example suppose we have list of items named "$items", see the below to learn how to use this technique:

$i = 1;

foreach($items as $item)

{

echo '<div id="item_'. $i .'" >';

echo $item;

echo '</div>';

$i++;

}

It is better to use id selectors instead of class selectors in this technique, because of future JavaScript using. In the cases that we have not security issues, using ids of database rows as selectors is a better solution.

5) Percentage sizes

As you know, we don't know the absolute sizes of width and height where the extension will be displayed. So if you use percentage sizes in your extension style and script designing, it is be more compatible. Also you can use min-width, min-height, max-width and max-height CSS property to have better control in this technique. For example:

Without using percentage sizes

.myext {

width: 600px;

}

.myext .header {

width: 200px;

}

Using percentage sizes

.myext {

width: 90%;

max-width: 1000px;

}

.myext .header {

width: 30%;

min-width: 40px;

}

Also it is better not to using width and height CSS property in some cases and using padding and margin instead of them. beside this, using percentage height in some cases is not needed. All of the situations depends on your design!

6) Size of images

You should not use large-size images in your extension. Combination of icons and small images with CSS2 and CSS3 properties can be used instead of that.

7) External files

In Joomla! you can put style and script data in external files or use that in inline format or in <style> and <script> HTML tags. Usually the better choice is external files, because they will be loaded in first time and for future browsing the external files are loading from cashed in browsers. Other reason is that external files can be compressed later, if you want.

Also, you can use Joomla! parameters in external files. To learn how to do that, see the example below:

In this example I want to use Joomla! parameters in CSS files of my Component:

[Load CSS in components/com_{component name}/view/{view name}/view.html.php]

$doc =& JFactory::getDocument();

$style = 'components/com_{component name}/assets/css/mystyle.php?Itemid='.JRequest::getInt('Itemid');

$doc->addStyleSheet(JURI::base() . $style);

[CSS file content in components/com_{component name}/assets/css/mystyle.php]

<?php

/**

*CSS file with Joomla! controls

*Author: Soheil Novinfard

*/

// load CSS header

header("Content-type: text/css; charset: UTF-8");

// Set flag that this is a parent file

define('_JEXEC', 1);

// No direct access.

defined('_JEXEC') or die;

// Set the directory separator

define( 'DS', DIRECTORY_SEPARATOR );

// Define the root path of Joomla! (Don't forgot to change it!)

define('JPATH_BASE', dirname(__FILE__).DS.'..'.DS.'..'.DS.'..'.DS.'..' );

require_once ( JPATH_BASE .DS.'includes'.DS.'defines.php' );

require_once ( JPATH_BASE .DS.'includes'.DS.'framework.php' );

jimport('joomla.database.database');

jimport('joomla.database.table');

$app = JFactory::getApplication('site');

$app->initialise();

// Load component parameters

$params= &$app->getParams('com_{component name}');

// Load menu parameters (priority by menu parameters)

if($itemid = JRequest::getInt('Itemid'))

{

$menu = JFactory::getApplication()->getMenu();

$active = $menu->getItem($itemid);

$params = $menu->getParams( $active->id );

}

// Use a parameter

$backColor= $params->get('ext_backcolor');

?>

.myext {

background-color: <?php echo $backColor ;?>;

}

You must change the JPATH_BASE and define the root path of Joomla! when you want to use this code in another place.

Also, you can use this code for JavaScript external files too, just change the header in CSS file:

header("content-type: application/x-javascript");

8) Compatibility with right-to-left (RTL) languages

Your extensions will be used in all Joomla! powered websites, even those that have right-to-left language direction. So you should compatible your styles with RTL languages, too. Joomla! have useful method to detect RTL languages, isRTL. There are many ways to add this compatibility, I explain a short example about this technique here:

[Load style files in components/com_{component name}/view/{view name}/view.html.php]

$doc=& JFactory::getDocument();

$lang=& JFactory::getLanguage();

// Load general style file

$style= 'components/com_{component name}/assets/css/mystyle.css';

$doc->addStyleSheet(JURI::base() . $style);

// Load RTL CSS file if language direction is RTL

if($lang->isRTL()) {

$style_rtl= 'components/com_{component name}/assets/css/mystyle_rtl.css';

$doc->addStyleSheet(JURI::base() . $style_rtl);

}

[General style file in components/com_{component name}/assets/css/mystyle.css]

.myext {

background-color: #ffffff;

border: 1px solid #eeeeee;

margin: 5px;

padding: 2px 10px 5px 7px;

text-align: left;

}

...

[RTL style file in components/com_{component name}/assets/css/mystyle.css]

.myext {

direction: rtl;

padding: 2px 7px 5px 10px;

text-align: right;

}

...

As you see, you don't need another complete CSS file with all details; just override or add the different CSS properties that needed in RTL style file. Most CSS properties that will be changes in this technique is text-align, direction, float, margin and padding; but depends on your design, maybe you need to change other CSS properties too.

9) Compressing static files

Maybe you have some style and script files in your extension that they won't changed by users and they are static files. It is a good solution to compressing these files for faster site loading and reducing the page size. There are many tools for the compressing files, here are some of them:

CSS Compressor

Minify CSS

JS Compress

JavaScript Compressor

If you have some static files, you should compress all files into one file; it will be reducing HTTP requests and speed up the website loading.

Also it is better to specify your compress files with .min suffix (for example mystyle.min.css) and keep the original style and script files into your extension. Uncompressed files will be used by Joomla! developers.

10) External libraries

External libraries are used for facilities ,simplified and reliable designing. JQuery, Bootstrap and grid systems are examples of these libraries. You can use some of these external libraries in your extension. But the problem is that other extension may used the same libraries too. So you should have options in your extensions to include or not include these libraries.

Another problem that may occur is conflicting of these libraries. You will be solved this issue too, but it depend on your design and libraries that you used. One of the popular example of this issue is conflicting on MooTools and jQuery JavaScript libraries.

This is the first part of this article, You can read 10 other solutions for better style and script designing in next month. ;)

Read 114379 times
Tagged under Developers, English
Soheil Novinfard

Soheil Novinfard

I'm Soheil Novinfard, Moderator of Egolt Fundation. I started to web design in 2000 year and write my first web application in 2005 year. I like joomla, because of its powerful extensible platform. I wrote my first extension for joomla in 2009 year and here are some of my extension. I'm working and developing in some php frameworks like yii, codeigniter and cakephp, also. Semantic web is one of my favorite field too. I love my motherland Iran and its people and our Persian Gulf.