Mise en page de mon Accueil

[l.mnu]

Bonjour,
Je cherche de l'aide pour la mise en page de mon Accueil. Je voudrai sur ma page d’accueil partager en deux zones égales, à gauche un article présentant mon site et à droite le module JoomSpirit Slider. Mon template est Protostar et j'ai essayé de mettre le module JoomSpirit Slider en position 7 mais mon slider est étriqué.
Après j'ai essayé d'insérer un tableau a deux colonnes, cela fonctionne assez bien mais cela n'est pas Responsive (car la colonne de droite ne ce met pas en dessous de la colonne de gauche en petite résolution.)
Y-a t'il une solution ?
Merci beaucoup pour votre aide

[lesoutier]

Un bon dessin valant lieux qu'un long discours serait-il possible d'avoir une illustration de ce que tu veux faire ?

[dolmenhir]

Salut,

La position 7 du template Protostar a une classe "span3" qui correspond à une largeur de grille de 3/12e (=1/4), donc forcément étriqué. (idem pour la position 8).
Si tu veux avoir une "sidebar" qui occupe 50% de la largeur, il faut une classe "span6" (6/12e = 1/2).

Basiquement, on pensera à modifier la valeur de la classe de la position 7 (ou 8) dans l'index du template mais il y a une petite routine qui fixe la largeur de la zone principale du contenu selon que la position 7 et/ou 8 sont occupées ou pas :
lignes 103 à 118

if ($position7ModuleCount && $position8ModuleCount)
{
    $span = 'span6';
}
elseif ($position7ModuleCount && !$position8ModuleCount)
{
    $span = 'span9';
}
elseif (!$position7ModuleCount && $position8ModuleCount)
{
    $span = 'span9';
}
else
{
    $span = 'span12';
}

Dans tous les cas d'un module en position 7 et/ou 8 (sauf le dernier où c'est vide) ces zones ne feront jamais + de 3/12e, puisque la zone "centrale" fera la moitié (span6) ou les trois-quarts (span9) de la largeur.

Donc il faut également apporter une modification ici

if ($position7ModuleCount && $position8ModuleCount)
{
    $span = 'span6';
}
elseif ($position7ModuleCount && !$position8ModuleCount)
{
    $span = '[B]span6[/B]';
}
elseif (!$position7ModuleCount && $position8ModuleCount)
{
    $span = '[B]span6[/B]';
}
else
{
    $span = 'span12';
}

Dans le 1er cas, si les positions 7 et 8 sont occupées, elles ne feront que 3/12e, car la zone "centrale" occupera les 6/12e restant.
Dans le 2e et 3e cas, si la position 7 ou 8 est occupée, elles feront 6/12e car la zone "centrale" sera toujours limitée à 6/12e.

Évidement, il faudra aussi modifier :
- la classe de la position 8 (ligne 184) et mettre "span6"
- la classe de la position 7 (ligne 201) et mettre "span6"

Avec ces quelques modifs, ta sidebar fera la moitié de la largeur du template.
Attention, cela s'applique dès lors à tout le site.

Dol.

[RobertG]

Bonjour,

L'inconvénient est en effet que la modification du fichier ou des largeurs de span3 et span9 (dans un affichage de démo de Protostar) s'appliquent à tout le site. Il faut donc dupliquer le template (et pas le style) pour n'appliquer ces modifications qu'à celui utilisé par la page d'accueil.

[dolmenhir]

Bonjour,

L'inconvénient est en effet que la modification du fichier ou des largeurs de span3 et span9 (dans un affichage de démo de Protostar) s'appliquent à tout le site. Il faut donc dupliquer le template (et pas le style) pour n'appliquer ces modifications qu'à celui utilisé par la page d'accueil.

Oui Robert, tu as raison, il est préférable de dupliquer le template.

Et j'irai même + loin en suggérant de modifier ce template dupliqué en ajoutant des positions (et en modifiant selon les besoins le code de la routine) pour répondre aux spécificités du site.
Comme ça, à l'arrivée, on utilise qu'un seul et même template (le dupliqué/modifié).

[lomart]

Bonjour,

Une solution simple, c'est un pageBuilder ou UP avec ce shortcode sur un éditeur wysiwyg

{up flexauto=2 | mobile=1 | class=fg-gap}
un article présentant mon site
{===========}
le module JoomSpirit Slider avec un shortcode : {loadposition position_du_module}
{/up flexauto}

Le plus dur est d'attribuer une position au module. Il faut taper un nom dans la zone position et valider avec la touche Entrée

Si on veut des colonnes inégales, il faut utiliser l'action flexbox

C'est cette méthode que j'utilise sur la page d'accueil https://up.lomart.fr/

[l.mnu]

Bonjour à tous,
Merci pour votre aide, je vais essayer de modifier le template suite aux conseils de Dolmenhir. C'est mon premier site Joomla alors je risque de galérer un peu...
Sinon est-ce qu'il existe une extension qui gere la mise en page du content avec deux zones ?
Je vous tiens au courant, encore merci !!!


Juste pour la page d'accueil !!!

[Jeff71]

Bonjour, est tu arrêté sur le template ? Perso j'ai opté pour le Framework Gantry + template Helium qui donne beaucoup de flexibilité pour régler le template sans code. (je n'ai pas les connaissances pour tapper dans le code). Il existe aussi d'autre Framework performant.
Bonne journée

[l.mnu]

Désolé lomart je n'avais pas vu ta réponse mais c'est tout à fait cela qu'il me faut. Je vais essayer ta méthode avant de modifier les span (lol)...
Encore merci à tous