Personnaliser disposition module

[ust711]

Salut à tous,

J'ai un souci, actuellement je suis en train de refaire un site internet à neuf en Joomla 3.6.

Mon client aimerait pouvoir avoir 2 modules avec une disposition un peu particulière, à savoir le titre du module à gauche, le séparateur au milieu et le contenu à droite. Or d'habitude, sur Joomla, le module est en disposition verticale (titre, séparateur, contenu). J'ai essayé avec différentes classes CSS pour modifier la disposition de ces modules, mais cela ne change rien...

Voici un petit schéma pour vous montrer, en haut, la disposition par défaut dans Joomla et en bas la disposition que je souhaiterais :



Pour info, j'édite mon template grâce à l'excellente extension "Template Creator CK".

Merci d'avance pour toute aide et bon après-midi !

[_Ovb]

Re : Personnaliser disposition module

Salut,
J'ai une solution à ton soucis assez simple à mettre en place mais pas des plus "propre".
Je t'explique comment j'ai déja fait et j'espère que quelqu'un d'autres te répondras ainsi j'apprendrai à faire plus propre aussi

1. Le module tu n'affiche pas le titre et tu ne lui assigne aucune position.
2. Ensuite tu crée un module personnalisé dans lequel, en html tu fait un tableau d'une ligne et deux colonne.
3. En A1 tu inscris le titre et en B1 tu injecte ton module.
4. Ensuite tu affiche le module personnalisé la ou tu souhaitais afficher le module initial.

Ainsi le module personnalisé ne sert que à afficher ton module comme tu le souhaites.
J'espère avoir pu t'aider un peu...

[ced1870]

Re : Personnaliser disposition module

salut
tu as une url vers ta page où on peut voir le module concerné ?
CEd

[manu93fr]

Re : Personnaliser disposition module

Salut à tous,

J'ai un souci, actuellement je suis en train de refaire un site internet à neuf en Joomla 3.6.

Mon client aimerait pouvoir avoir 2 modules avec une disposition un peu particulière, à savoir le titre du module à gauche, le séparateur au milieu et le contenu à droite. Or d'habitude, sur Joomla, le module est en disposition verticale (titre, séparateur, contenu). J'ai essayé avec différentes classes CSS pour modifier la disposition de ces modules, mais cela ne change rien...

Voici un petit schéma pour vous montrer, en haut, la disposition par défaut dans Joomla et en bas la disposition que je souhaiterais :

[ATTACH=CONFIG]33432[/ATTACH]

Pour info, j'édite mon template grâce à l'excellente extension "Template Creator CK".

Merci d'avance pour toute aide et bon après-midi !

A mon avis, cela sera un peu plus complexe car il va falloir gerer le mode responsive

[lomart]

Re : Personnaliser disposition module

Salut,

Une solution est de créer un style de module

Il faut ajouter ce code (fait à l'arrach) à la fin du fichier /templates/tontemplate/html/module.php

function modChrome_2colonnes($module, &$params, &$attribs)
{
    $moduleTag     = $params->get('module_tag', 'div');
    $bootstrapSize = (int) $params->get('bootstrap_size', 0);
    $moduleClass   = $bootstrapSize != 0 ? ' span' . $bootstrapSize : '';
    $headerTag     = htmlspecialchars($params->get('header_tag', 'h3'), ENT_COMPAT, 'UTF-8');
    $headerClass   = htmlspecialchars($params->get('header_class', 'page-header'), ENT_COMPAT, 'UTF-8');

    if ($module->content)
    {
        echo '<' . $moduleTag . ' class="2col ' . htmlspecialchars($params->get('moduleclass_sfx'), ENT_COMPAT, 'UTF-8') . $moduleClass . '">';

            echo '<div style="display:table;border:1px grey solid;">';
                echo '<div style="display:table-cell;width:25%;padding:4px;background-color:coral;margin:0">';
                    echo '<h3>' . $module->title . '</h3>';
                echo '</div>';
                echo '<div style="display:table-cell;width:75%;padding:4px;background-color:plum;margin:0">';
                    echo $module->content;
                echo '</div>';
            echo '</div>';

        echo '</' . $moduleTag . '>';
    }
} 

Ensuite dans l'onglet du module "Paramétres avancés > Style du module", on choisit "2colonnes" pour obtenir ceci :



J'ai mis les styles en dur, il faudra les remplacer par des classes avec le CSS qui correspond