[RÉGLÉ] Le footer du template hera_j3_vm3

[valserine]

Bonjour,

J'ai créé un footer avec un tableau de 3 colonnes, pour que les 3 zones soient alignées et non empilées... sur les différents pc (écran 28' sur lequel je travaille et écran 10' pour vérifier ) ça rend très bien, mais sur le tél mobile, seule une colonne apparaît, les deux autres sont visibles hors champs en faisant glisser la zone et parce que j'ai mis un body background color noir comme mon footer. Je pense que j'aurais dû créer cette mise en forme différemment mais je ne sais pas comment...

Merci de me dire si ma question est claire et possiblement résolvable :-)

[lesoutier]

Ton erreur est là :

J'ai créé un footer avec un tableau de 3 colonnes

La mise en page avec des tableaux c'est la préhistoire. Il faut utiliser les css.
Je ne connais pas ce template mais il est sans doute possible de positionner trois modules cote à cote.

[valserine]

Oui, je m'en doutais... je suis "out" :-)
bon je vais fouiller de ce côté là, css... héra est l'un des 3 templates installés (avec beez et protostar) sur ma version joomla. En fait, j'ai fait une petite formation de 4 jours auprès de la chambre des métiers pour créer ma boutique en ligne et depuis 2 mois j'y travaille... j'adore ça mais c'est parfois un peu difficile...
merci.

[lomart]

Bonjour,

Le template utilise Bootstrap 3.3.7
Il faut mettre des div avec les classes indiquées sur cette page : https://getbootstrap.com/docs/4.0/layout/grid/

[valserine]

Oh merci, Lomart ! ça semble exactement ce qu'il me faut !! Il ne me reste plus qu'à m'y mettre.. Je vous dirai.

[valserine]

j'ai finalement abandonné la mise en page spéciale... trop novice pour ça.. j'ai utilisé le module menu et ça fera bien son office pour l'instant.

[lomart]

Bonjour,

Pourtant ce n'est pas très dur !
Il suffit de mettre ce code dans un module personnalisé (celui de joomla ou le mien (LM-Custom) pour être sur qu'un éditeur WYSIWYG n'efface pas notre beau travail

<div class="container">
  <div class="row">
    <div class="col-sm">
      Contenu de la 1ère cellule du tableau actuel
    </div>
    <div class="col-sm">
      Contenu de la 2ème cellule du tableau actuel
     </div>
    <div class="col-sm">
      Contenu de la 3ème cellule du tableau actuel
     </div>
  </div>
</div>

[manu93fr]

Bonjour,
et si tu veux le faire sans ajouter une ligne de code ... tu n'as qu'a utiliser un editeur comme pagebuiderCK

[valserine]

Bonjour,

- Manu je vais aller voir pagebuilder CK
- Lomart je joins ici 3 images pour montrer :

1/ le footer tableau de départ, même si le contenu ne me convient plus, pour diverses raisons que je ne vais pas développer, mon post serait trop long :-)
2/ le footer avec module menu
3/ l'essai fait avec le code que tu m'as fourni




1/


2/


3/


Ainsi vous pourrez constater mon grand talent !!! :-/

[lomart]

Bonjour,

Il faudrait regarder avec un inspecteur de code pourquoi cela ne fonctionne pas.
Le site n'est pas visible en ligne ?

[valserine]

Bonjour,

Si si, il est visible, en tout cas cette partie là oui, pour le côté boutique je retravaille mes fichiers produits en attendant que mon hébergeur passe mon site en https

voici le lien :

[lomart]

Il n'y a actuellement que 2 colonnes.
Mon code précédent peut-être repris en enlevant le bloc parent qui doit être donné par le module et en remplaçant le nom de la classe, soit

<div class="col-md-4">
      Contenu de la 1ère cellule du tableau actuel    
</div>    
<div class="col-md-4">
      Contenu de la 2ème cellule du tableau actuel      
</div>    
<div class="col-md-4">
      Contenu de la 3ème cellule du tableau actuel      
</div>

col-md-4 veut dire que la colonne fera 4/12 de large

On verra ensuite, s'il faut remettre le bloc parent