Pluxopolis

Tout savoir pour devenir un pro de PluXml, mais pas seulement...

Afficher les articles sur 2 colonnes

Rédigé par Stéphane Aucun commentaire

Grâce au CSS3 il est simple et rapide d'afficher les articles sur plusieurs colonnes.
Juste quelques lignes de code dans la feuille de style de son thème sont nécessaires pour changer la disposition du contenu des articles.

Prenons en exemple le thème par défaut de PluXml.
Éditez le fichier /themes/defaut/css/style.css et ajoutez à la fin du fichier le code suivant:


article section  {
	/* nombre de colonnes = 2 */
	-webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;

	/* espace entre les colonnes: 30px */
	-webkit-column-gap: 30px;
    -moz-column-gap: 30px;
    column-gap: 30px;
	
	/* barre de séparation entre les colonnes */
	-moz-column-rule-color: #ccc;
	-moz-column-rule-style: solid;
	-moz-column-rule-width: 1px;
	-webkit-column-rule-color: #ccc;
	-webkit-column-rule-style: solid ;
	-webkit-column-rule-width: 1px;
	
	/* espace en haut et en bas de l'article */
	margin-top: 15px;
	margin-bottom: 15px;
}

Les quelques commentaires dans le code vous permettront de faire les changements nécessaires en fonction de vos besoins, genre remplacer la valeur 2 par 3 par exemple pour avoir un affichage sur 3 colonnes au lieu de 2.

L'exemple est compatible:

  • Chrome 4.0+ (-webkit-)
  • IE 10.0+
  • Firefox 2.0+ (-moz-)
  • Safari 3.1+ (-webkit-)
  • Opera 15.0+ (-webkit-)

Fil RSS des commentaires de cet article

Écrire un commentaire

Quelle est la quatrième lettre du mot jfssjc ?
Top