le netSuite à la publication de l'article, Modification de la mise en page d'un article, de nombreuses réflexions ont fait part de la difficulté de mise en place de la méthode par des non initiés.

sympa, merci,
mais !!! c'est un peu prise de tête de gérer des modules, ne serait pas possible d'attribuer la classe css à un tableau quitte à ce qu'il n'y ait qu'une case.
Bonjour,
L'idée est bonne mais quid lorsque la gestion du contenu est faite par une personne qui ne connaît strictement rien au css et à l'insertion des balises : un peu risqué non ?

Nous allons donc voir au travers de ce tutoriel une autre façon de gérer depuis la publication de l'article.

*N'oubliez pas de sauvegarder vos fichiers avant d'appliquer les changements.

1°) Vous allez pour cela conserver le CSS du précédant tutoriel :

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;
}

2°) Ensuite vous allez copier le fichier "default.php" présent dans le dossier "components/com_content/views/article/tmpl/",

dans le dossier "html/com_content/article/" présent dans votre template  (le créer si celui-ci n'existe pas).

Si vous avez déjà un dossier "com_content" présent dans le dossier "html" de votre template, ignorer cette étape.

3°) Ouvrez maintenant le dossier "article" présent dans "/templates/votre_template/html/com_content".

Voila ce que vous devez voir:

000

Dupliquez 6 fois ce fichier et renommez les pour avoir un fichier par mise en page pour chaque version de colonnes.

Ce qui donne cela

001

4°) Éditez chaque fichier et supprimez la ligne N°26

<div class="item-page<?php echo $this->pageclass_sfx?>">

puis supprimer la ligne 56

</div>

5°) Rajouter la ligne suivante

<div class="multi-column item-page<?php echo $this->pageclass_sfx?>">

juste après la ligne N°82

(remplacer X par sa correspondance)

puis rajouter

</div>

juste après la ligne 259

6°) Maintenant, dans la gestion de votre article, onglet "paramètre de l'article", vous avez le choix de la mise en page.

003

PS: Pour ceux ayant déjà le fichier inclus avec leur template, il faudra adapter le code en fonction.

Exemple avec le T3v3:

remplacer la ligne 187

<section class="article-content clearfix">

par

<section class="article-content multi-columnX clearfix">

(remplacer X par sa correspondance)

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