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

Liste des participants qui ont commenté cet article

  • Bonjour,

    J'ai suivit exactement la démarche précédente pour qu'un autre utilisateur puisse mettre en page facilement des articles, malheureusement j'ai moi même créé mon Template et je n'avais pas le dossier htm ni com-content, je l'ai donc rajouté mais j'ai bien peur qu'il y ai un conflit avec ma structure de Template.

    Template
    -css
    --font
    ---font.css
    index.html
    -html
    --com_content
    les 6 fichiers mofiés.php
    ---defaut.php
    -images
    mes images de template
    --système
    images + index.html
    -img
    images+index.html

    Je fais la base de mes templates avec l'outil Template Creator CK pour avoir une base de css et modules rapide que je modifie ensuite, la structure de base est donc faite par l'outil.

    Je vais utiliser les class de pages pour le moment mais j’étais contente de trouver le moyen de modifier directement les options pour la facilité des autres utilisateurs des sites que je créer, mais je ne suis que webmaster en herbe pour le moment :)

  • Bonjour Marie

    Désolé pour la réponse tardive.
    Voila ce que tu as d'après tes dires:


    -html
    --com_content
    les 6 fichiers mofiés.php
    ---defaut.php


    alors que tu devrais avoir


    - html
    - - com_content
    - - - article
    - - - - les 6 fichiers mofiés.php
    - - - - defaut.php

  • Bonjour,
    J'utilise le template Ja_t3_blank et dans le fichier default.php les N° de lignes sont vraiment differentes. Est'il possible d'avoir une indication de l'emplacement pour inclure le div de la classe multi-column.
    Merci

  • Bonjour Roland

    Vous devez copier le dossier "com_content" présent dans "plugins/system/t3/base/html" dans le dossier "html" de votre template.

    Après copier et renommer le fichier "défaut.php" présent dans "templates/t3_blank/html/com_content/article/" puis modifier la ligne 187 comme expliqué à la fin de l'article.

  • Bonjour Starter,

    Merci pour cette réponse très rapide.
    Par contre j'ai Jat3 et le dossier "com_content" se trouve dans : "plugins/sysstem/jat3/jat3/base-themes/default/html" .
    Le fichier default.php ne contient que 179 lignes et je n'ai pas de class article-content
    mais <div class="article-tools clearfix"> et dl class="article-info"

  • Effectivement, c'est un peu différent pour Jat3

    Vous devez copier le fichier "defaut.php" présent dans "plugins/sysstem/jat3/jat3/base-themes/default/html/com_content/article/" dans "templates/t3_blank/html/com_content/article/".

    Après copier et renommer le fichier "défaut.php" présent dans "templates/t3_blank/html/com_content/article/" autan de fois que nécessaire puis modifier de la façon suivante:

    - rajouter après la ligne 153

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

    - rajouter après la ligne
    </div>
    <div>

  • encore merci de votre aide .
    J'ai la version 2.5.8 de ja_t3_blank et mon fichier default.php est vraiment différent de celui en piece jointe et je ne vois pas ou placer les balises </div> <div>

  • Bonsoir,
    j'ai trouvé cet article très intéressant. Je suis malheureusement incapable de mettre en application vos conseils. Je suis sous le template Purity III qui utilise le framework T3 v 2.1.3. J'ai récupéré le fichier defaut.php dans plugins et je l'ai copié dans template. J'ai apporté les modifications conseillées à la ligne 187 mais le reste du fichier diffère tellement que je suis incapable d'apporter d'autres modifications. En l'état, je vois apparaître dans "type de mise en page" la mise en page "2colonnes" mais bien évidemment cela ne produit aucun effet. Pouvez vous m'apporter assistance s'il vous plait ?
    Merci par avance,
    caluze

  • Bonjour caluze.

    Purity III est un peu spécial. Il contient deja un fichier "default.php" dans "purity_iii/html/com_content/article". Pas besoin de celui du plugin.

    Donc tu dupliques ce fichier "default.php" autan de fois que nécessaire en le renommant comme expliqué.

    ensuite à la ligne 92 qui est vide tu mets

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

    ou X indique le nombre de colonnes (à adapter)

    ensuite à la ligne 181 tu fermes ta div comme ceci
    </div></article>

Charger plus
Ajouter un commentaire