Create a new module style

Module Styles define the design and appearance of a module. For example you can create different module styles like a red module, a blue module, one with a box shadow, one without, etc... The module styles are defined in the /layouts/module.php file.

If you create a theme style you want to add some new module styles you can override the default module.php file. Just copy /layouts/module.php to /styles/YOUR_STYLE/layouts/module.php.

Now let's see how modules.php file work. Open it and take a look at line ~50 to line ~75. Here is an example:

// set module template using the style
switch ($style) {

	case 'line':
		$template      = 'default-1';
		$style         = 'mod-'.$style;
		$style         .= ($color) ? ' mod-line-'.$color : '';
		$split_color   = 1;
		$subtitle      = 1;
		$title_template = '<h3 class="title">%s</h3>';
		break;

	case 'dropdown':
		$template      = 'dropdown';
		$subtitle      = 1;
		break;

	case 'raw':
		$template      = 'raw';
		break;

	default:
		$template      = 'default-1';
		$style         = $suffix;
		$title_template = '<h3 class="title">%s</h3>';
	
}

Definition

Every case defines a module style. Let's see what the code means:

case 'line':

This is the name of the module style. In Joomla you can load a module using the module class suffix. For example: style-line

$template = 'default-1';

The templates defines the HTML markup you need to create your module style. The templates are located in /warp/layouts/modules/templates.

$style = 'mod-'.$style;

Here we set the CSS class to style the module. For example .mod-line

$style .= ($color) ? ' mod-line-'.$color : '';

If you want to create color variations of your module style you need some additional CSS classes. For example .mod-line-blue

$split_color = 1;

This is optional and only for advanced users. If the first word of you module title should be automatically wrapped with a span element with a CSS class color set this parameter to 1.

$subtitle = 1;

This is optional and only for advanced users. If your module title should support subtitles using the || technique set this parameter to 1.

$title_template = '<h3 class="title">%s</h3>';

Define the HTML markup for the module title.

Add a custom module style

You have two things to do. Define your new module style in the module.php and create some CSS styles for in in the modules.css. So let's start and add a new case to the module.php. For example we want the a module style to be called box with a module template which contains two div elements:

module.php

case 'box':
	$template      = 'default-2';
	$style         = 'mod-'.$style;
	$title_template = '<h3 class="title">%s</h3>';
	break;

Now let's add some CSS style to the module.css

module.css

.mod-box {
	border: 1px solid red;
	background: white;
	padding: 15px;
}

That's it. Now you can load your new module style in Joomla using the module class suffix style-box.

For WordPress you need one more thing to do. Open the template.xml file and add your new module style to the style parameters:

<setting name="style" type="style" label="Style" nav_menu="false">
	<option name="None" value="" />
	<option name="Line" value="line" />
	<option name="Box" value="box" />
</setting>

How to add another module template?

If you want to add your own module template, you can add a template file to /layouts/modules/templates. Or if you are using your own style copy the file to /styles/YOUR_STYLE/layouts/modules/templates. You may want to use the default templates located at /warp/layouts/modules/templates as a blueprint.

Themes