28
Avr 12
Gestion des Modules Chrome

  • Mis à jour le 13 mai 2012
  • Écrit par Dens
Note utilisateur:  / 2
MauvaisTrès bien 

purity2 t3-blank elastica red-flag

Dans les templates de type T3, nous avons deux types de modules : JAxhtml et JArounded.

xhtml  text

Or ce type de mise en page peut ne pas nous convenir, il va falloir ajouter un module Chrome.

1- Modifications du fichier modules.php

Chemin: plugins > system > jat3 > jat3 > base-themes > default > html > modules.php

Personnellement, je trouve plus "propre" d'effectuer les modifications dans le template plutôt que dans le plugin. Nous allons donc coller le fichier modules.php dans le dossier html du template.

C'est ce qu'on appelle de la surcharge de template (template override).

En effet, si nous n'avions pas ce fichier dans le plugin ou le template, c'est celui du dossier sytem qui prendrait le dessus :

Chemin : templates > system > html > modules.php

Reprenons avec le fichier que nous avons placé dans le template.

Voilà le code :

<code class="text plain">/*
 * Default Module Chrome that has sematic markup and has best SEO support
 */
function modChrome_JAxhtml($module, &$params, &$attribs)
{ 
    $badge = preg_match ('/badge/', $params->get('moduleclass_sfx'))?"<span class=\"badge\">&nbsp;</span>\n":"";
?>
    <div class="ja-moduletable moduletable<?php echo $params->get('moduleclass_sfx'); ?>  clearfix" id="Mod<?php echo $module->id; ?>">
        <?php echo $badge; ?>
        <?php if ($module->showtitle != 0) : ?>
        <h3><span><?php echo $module->title; ?></span></h3>
        <?php endif; ?>
        <div class="ja-box-ct clearfix">
        <?php echo $module->content; ?>
        </div>
    </div>
    <?php
}</code>

Pour l'exemple, nous allons rajouter le code suivant :

/*
 * Perso Module Chrome 
 */
function modChrome_JAperso($module, &$params, &$attribs)
{ 
    $badge = preg_match ('/badge/', $params->get('moduleclass_sfx'))?"<span class=\"badge\">&nbsp;</span>\n":"";
?>
    <div class="ja-perso<?php echo $params->get('moduleclass_sfx'); ?>  clearfix" id="Mod<?php echo $module->id; ?>">
        <?php echo $badge; ?>
        <div id="persochrome">
        <?php if ($module->showtitle != 0) : ?>
        <h3><?php echo $module->title; ?></h3>
        <?php endif; ?>
        <div class="ja-box-ct clearfix">
        <?php echo $module->content; ?>
        </div>
        </div>
    </div>
    <?php
}

  Voilà nous venons de créer une nouvelle structure Module Chrome.

 Vous pouvez créer votre propre structure de modules (div, ul, li, h3, ...).

2- Modification du style du layout :

Rendons-nous dans l'administration du template.

Editons le layout Default :

layout-persochrome

Nous venons de rajouter le style "japerso"

3- Modification de la mise en page :

Pour l'exemple nous allons rajouter l'image suivante :

chrome6

Puis nous modifierons le css en rajoutant le code correspondant au module Chrome JAperso :

Chemin : templates > ja_purity_ii > css > templates.css

#persochrome {
    background: url(../images/chrome5.png) no-repeat top left #ddd;
    min-height: 240px;
    padding-right: 5px;
    border: 1px solid #999;
    margin: 0 10px 20px 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius:10px 10px;
    border-radius:10px;
    box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.7)
    }
    
#persochrome  h3 {
        text-align: left;
        padding: 0 0 0 55px;
        font-size: 150%;
        line-height:1;
        /*text-transform: uppercase;
        text-decoration:underline;*/
        font-family: Helvetica, Arial, sans-serif;
        color: #f00;
        margin-top: 10px;
}
#persochrome .ja-box-ct    {
        margin-left: 55px;
        }
        
#persochrome .ja-box-ct ul li {
        padding-left: 5px;
        background: none;
        }

Adaptez le CSS à vos besoins.

4- Résultat

exemple-chrome2

bt25-01

afuj-05

joomfr-005

ja-003

Vous êtes ici : Accueil Tutoriels Ja Templates Modules Gestion des Modules Chrome