Modification de la mise en page d'un article :

Par défaut, l'affichage d'un article se présente un peu comme ci-dessous.

colonne1

 Ce tutoriel va nous permettre d'obtenir cette présentation.

colonne2a

colonne3colonne3a

colonne4colonne4a

Tout cela grâce à la puissance des CSS.

Création de l'article :

Nous commençons par créer notre article.
Contenu ==> Gestion des articles ==> Ajouter un article
Nous lui donnons un titre, nous  lui attribuons une catégorie, et nous ajoutons seulement une ligne.


{"loadposition perso10"} sans les ""


Ou perso10 qui sera la position du module qui affichera l'article.

article

Nous sauvegardons l'article en l'enregistrant

Création du module :

Nous nous rendons ensuite dans
Extensions ==> Gestion des modules
Puis
Nouveau ==> Contenu personnalisé
Nous donnons un titre au module (qui peut être le même que l'article) et nous lui attriburons la position perso10

article2

Puis nous allons personnaliser le contenu de notre article.

article3

Pour finir nous enregistrons notre module pour valider sa publication.
Voila, notre article est créé et devrait se présenter comme ci-dessous.

colonne1

Le CSS :

Et oui, pour pouvoir créer nos colonnes, nous allons ajouter une classe CSS.

Celle-ci sera compatible :

  • Internet Explorer 10+
  • Firefox, Firefox Mobile
  • Chrome, Chrome Mobile
  • Opera 11.1+
  • Opera Mobile 11.1+
  • Safari 3.2+
  • Safari Mobile 3.2+
  • Android Browser 2.1+
Donc dans notre fichier CSS (template.css par défaut) nous allons ajouter l'un des blocs de codes suivants :
 
 Pour 2 colonnes sans bordure :

 .multi-column2 {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count:2;
-moz-column-gap: 40px;
-webkit-column-gap: 40px;
column-gap: 40px;
text-align: justify;
}

Pour 2 colonnes avec bordures :

.multi-column2-bordered{
-moz-column-count: 2;
-webkit-column-count: 2;
column-count:2;
-moz-column-gap: 40px;
-webkit-column-gap: 40px;
column-gap: 40px;
-moz-column-rule:4px outset #5C4C4D; /* Firefox */
-webkit-column-rule:4px outset #5C4C4D; /* Safari and Chrome */
column-rule:4px outset #5C4C4D;
text-align: justify;
}

Pour 3 colonnes sans bordure :

.multi-column3 {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count:3;
-moz-column-gap: 30px;
-webkit-column-gap: 30px;
column-gap: 30px;
text-align: justify;
}

Pour 3 colonnes avec bordures :

.multi-column3-bordered{
-moz-column-count: 3;
-webkit-column-count: 3;
column-count:3;
-moz-column-gap: 30px;
-webkit-column-gap: 30px;
column-gap: 30px;
-moz-column-rule:4px outset #5C4C4D; /* Firefox */
-webkit-column-rule:4px outset #5C4C4D; /* Safari and Chrome */
column-rule:4px outset #5C4C4D;
text-align: justify;
}

Pour 4 colonnes sans bordure:

.multi-column4 {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count:4;
-moz-column-gap: 20px;
-webkit-column-gap: 20px;
column-gap: 20px;
text-align: justify;
}

Pour 4 colonnes avec bordures :

.multi-column4-bordered{
-moz-column-count: 4;
-webkit-column-count: 4;
column-count:4;
-moz-column-gap: 20px;
-webkit-column-gap: 20px;
column-gap: 20px;
-moz-column-rule:4px outset #5C4C4D; /* Firefox */
-webkit-column-rule:4px outset #5C4C4D; /* Safari and Chrome */
column-rule:4px outset #5C4C4D;
text-align: justify;
}

Si vous le souhaitez, aidez-vous de ce site pour générer votre code.

http://www.debray-jerome.fr/outils/Generateur-de-multi-colonnes-en-css3.html

Quelques explications :

  • -moz-  Contrôle l'affichage sur Firefox
  • -webkit - Contrôle l'affichage sur Chrome et Safari
  • Column-count  Permet de définir le nombre de colonnes
  • Column-gap  Permet de définir l'espace entre deux colonnes
  • Column-rule  Permet de définir le trait de séparation entre deux colonnes

colonne5

Les valeurs pour ce trait sont les suivantes :

  • La largeur en pixel
  • Le style de ce trait :

                         - solid : trait continu
                         - dotted : pointillé
                         - dashed : tiret
                         - double : trait continu double
                         - grouve : rainuré
                         - ridge : relief
                         - inset : relief interieur
                         - outset : relief exterieur

  • la couleur

Voila pour le css.

Maintenant nous retournons dans la gestion de notre module pour y appliquer l'une de nos différentes classes.

article4

Les classes sont les suivantes :

  • [espace]multi-column2
  • [espace]multi-column2-bordered
  • [espace]multi-column3
  • [espace]multi-column3-bordered
  • [espace]multi-column4
  • [espace]multi-column4-bordered

Voila, il ne vous reste plus qu'à jouer avec l'intégration de vos modules
et classes CSS.

article-fin

 Consulter la seconde partie : Modification de la mise en page d'un article: 2° méthode

A propos de l'auteur
starter
Nom: starterSite Web: http://www.soulpin.com
100% autodidacte
Derniers articles de l'auteur

  • sympa, merci,
    mais !!! c'est un peu prise de tete de gerer des modules, ne serait pas possible d'attribuer la class css à un tableau quitte à ce qu'il n'est qu'une case.

  • Je ne comprends pas bien ce que tu veux dire :(

  • Bonjour,
    L'idée est bonne mais quid lorsque la gestion du contenu est faite par une personne qui ne connait strictement rien au css et à l'insertion des balises : un peu risqué non ?

  • Justement, une fois le css créé par la personne qui géré le site, la première partie (création de l'article et du module) est, me semble t il bien expliquée.

  • Bonjour,
    désolé Starter, bravo pour l'article mais pour un béotien comme moi, un peu plus de clarté est nécessaire :

    1. Lorsque l'article est personnalisé, l'image ne montre pas s'il s'agit du même article... sous {"loadposition..."} donc ?
    Lorsque je fais cela, j'ai un affichage vide, le module appelé fonctionne mais il est vide...
    C'est effectivement la technique que j'emploie pour charger par exemple un slideshow dans un article... alors je ne comprends pas (en français logique) l'appel d'article en 2 colonnes via le module et le css... voir ci-dessous !

    2. Dans la partie "...retournons dans la gestion de notre module pour y appliquer ... [ une classe ] ...",
    il est écrit : " espace+multi-column2+espace+titre "
    Que veut dire "titre", titre de quoi ? De l'article ? De son alias ?

    Dans mon français logique, par toujours compatible avec les langages de programmation, je sais, mais en général, je comprends comme ça, un lien devrait faire appel à un module qui appel un article via le css ! Mais là je ne crois pas que je sois sur la bonne piste ! Car comment l'article peut-il appeler le module qui devrait le charger lui-même en 2 colonnes ? D'où la question 2 !

    Désolé d'être dans la nuit mais une petite lampe me ferait du bien...
    Merci d'avance.

  • Bah, des fois je mérite des baffes ! (et je me les donne !)
    Donc pour le point 1. lorsqu'il est écrit :
    "Puis nous allons personnaliser le contenu de notre article."
    comprendre :
    "Puis, toujours dans le module, dans la partie "personnaliser le contenu", nous mettons notre article."
    Bon, je sais, c'était évident !!!

    Ah ! avec mon css : si je met 1 colonne, j'en ai 1, si je mets 2, j'en ai 4 et si je mets 3, j'en ai 9...
    Je ne suis pas allé plus loin, inutile de tenter le diable...
    Je cherche d'où vient ce facteur puissance du nombre de colonne... probablement d'un détail du template... ice_future !

    Merci pour l'article.

  • Salut Syliiodj

    Effectivement, c'est du à ton template.
    Dans la gestion de ton module, onglet options, paramètres avancés, style du module

    mettre : system none

  • Très bon exemple d'utilisation avancées des fonctionnalités sans limites autre que nos imaginations de notre cms préféré. J'aime montrer à nos stagiaires que c'est capital d'avoir un minimum de compétences en css pour tirer la quintessence de Joomla.

Charger plus
Ajouter un commentaire