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 to 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 the modules.php file works. 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 your 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 in the modules.css. So let's start and add a new case to the module.php. For example we want the 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