Modules Tutorial Part 3

Building on part 1 and part 2, this tutorial adds custom styling to our module. Along the way we learn about the Redaxscript loader functions.

This part, unsurprisingly, uses the "example3" module from the redaxscript-third-party repository on GitHub. Adding custom styles to the module means adding another folder to the module, and of course a css file to actually do the styling.The convention is that the .css file is named the same as the module.

  • modules
    • example3
      • index.php
      • install.php
      • languages
        • de.php
        • en.php
        • fr.php
      • styles
        • example3.css

install.php

Once again, the install file doesn't really change from the first two examples.

index.php

The index.php file now includes an extra function to load the style sheet:

/** * example3 loader start * * @since 2.0.0 * @deprecated 2.0.0 * * @package Redaxscript Third Party * @category Modules * @author Gary Aylward */ function example3_loader_start() { global $loader_modules_styles; $loader_modules_styles[] = 'modules/example3/styles/example3.css'; }

Redaxscript looks for a module_name_loader_start() function for each installed module as part of the page load process. The function simply accesses a global array and adds the path of the module's .css file to the array. Redaxscript then loads the css inline along with all the other css files needed for the page.

Our main function also adds a custom class to the <span> tag:

/** * example3 * * @since 2.0.0 * @deprecated 2.0.0 * * @package Redaxscript Third Party * @category Modules * @author Gary Aylward * * @param string $name * @return string */ function example3($name = 'world') { if ($name === 'world') { $name = l('example3_world'); } $output = '<span class="example3">' . l('example3_hello') . ' ' . $name . l('exclamation_mark') . '</span>'; return $output; }

Note that in order to comply with CssLint rules, styling is applied using classes, not IDs.

Language Files

The only changes to the language files are to rename everything to example3; there are no functional changes needed.

example3.css

/** * @tableofcontents * * 1. example3 * * @since 2.0.0 * * @package Redaxscript Third Party * @author Gary Aylward */ /* @section 1. example3 */ .example3 { color: #0090db; font: bold 1em arial; }

Our example style sheet is very simple, with just one style defined. The table of contents is generated by the Redaxscript tocgen tool from the @section comments. The style sheet can contain whatever CSS trickery you want to make your module look its' best.

The one simple rule is that every class name must be prefixed by the module name. Just like with the language translations in part 2, this is to ensure that classes are unique to a module and don't clash with other modules or the core of Redaxscript.

So now you have a multi-lingual, custom styled module. In part 4 we will make the module interactive...

Henry

13.10.2013 at 21:54
You could explain the hook system here.

Module[name] plus Hook[name] = a valid [function] that hooks into Redax[script]s core.

Henry

13.10.2013 at 22:17