Wiki

HowTo - Create and override module chrome/style in JYAML 4x

JYAML has a own concept where the modChorme styles are located. Joomla! uses by default the modules.php. But in JYAML the modules.php does load special modChrome files.

Each chrome style in JYAML contains a xml and a php file. In the xml file you can define options for the dynamic positions selection. And in the php file the modChrome function is included like in modules.php, but only with the specific style.
The xml file of a modChrome style has full support with JForm fields: http://docs.joomla.org/Standard_form_field_and_parameter_types

Override a JYAML included modChrome style.

At first, take a look in following JYAML libraries folder:
JOOMLA_ROOT/libraries/jyaml/html/modChrome/

The target diretory in the template is:
JOOMLA_ROOT/templates/[template]/html/modChrome/

In the libraries folder you can see all core styles.

For example you must make changes in the 'rawlinks' style:

  1. Copy the rawlinks.php and rawlinks.xml in your template folder (JOOMLA_ROOT/templates/[template]/html/modChrome/)
  2. After copy make your modifications in the copied files
  3. The JYAML Framework now automatically load the style from your template instead from the library.

That's it!
Note: You can override the xml and php file of a modChrome style separately, depending on what you want to change.

Create a new modChrome style with custom options

To add a new modChrome style in JYAML you must create a style in the following folder:
JOOMLA_ROOT/templates/[template]/html/modChrome/

The name of the function must called 'modChrome_[style]'. (So just the same as in the 'modules.php' would be)

For example we create a new modChrome style with the name 'mystyle'.

1. Create the file 'mystyle.php' in '/html/modChrome/'

<?php
/**
 * Chrome Style: mystyle example
 * Available and Used attributes:
 * - headerLevel: Headline Level (defaults: 3)
 *
 * @param object $module Module reference object
 * @param object $params Module params reference object {@link JRegistry}
 * @param array $attribs Array of additional jdoc attributes
 */
function modChrome_mystyle($module, &$params, &$attribs)
{
  // get the parameters (defined in the mystyle.xml or submitted from a jdoc attribute)
  $headerLevel = isset($attribs['headerLevel']) ? $attribs['headerLevel'] : '3';
 
  if (!empty ($module->content)) : ?>
    <div class="moduletable<?php echo htmlspecialchars($params->get('moduleclass_sfx')); ?>">
    <?php if ($module->showtitle != 0) : ?>
      <?php echo '<h'.$headerLevel.'>'; ?><?php echo $module->title; ?><?php echo '</h'.$headerLevel.'>'; ?>
    <?php endif; ?>
    <?php echo $module->content; ?>
    </div>
    <?php endif;
}

2. Create the file 'mystyle.xml' in '/html/modChrome/' to define your style attributes. Only necessary, if you will the attributes are selectable in the template settings.

<?xml version="1.0" encoding="utf-8"?>
<jyaml_modchrome>
 <name>mystyle modChrome Example</name>
 <description>This is a modChrome example for mystyle with JYAML</description>
 
 <config>
   <fields name="params" addfieldpath="/libraries/jyaml/form/fields">
    <fieldset name="jyaml-chrome">
       <field name="headerLevel" type="list" default="3" label="headerLevel" description="headerLevel">
         <option value="1">H1</option>
         <option value="2">H2</option>
         <option value="3">H3</option>
         <option value="4">H4</option>
         <option value="5">H5</option>
         <option value="6">H6</option>
       </field>
     </fieldset>
   </fields>
 </config>
</jyaml_modchrome>

After this you can select the modChrome style in the template settings on dynamic positions. For sure you can also use your style directly in jdoc statements.
For example: <jdoc:include type="modules" name="user1" style="mystyle" />

Note 1:
You can find this example in the modChrome folder of the JYAML template.

Note 2:
When you need fields with multiple languages you can use the custom language file included in the template /language/ folder. See: xx-XX.tpl_[template].custom.ini.example