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

Afficher les articles sur 2 colonnes


Rédigé par jack le Aucun commentairee

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-)

DClassé dans : PluXml ,Mots clés : Article, Css, PluXml, Tuto, Thème

A propos de l'auteur, jack:

Webmestre de PluXopolis de 2018 à Avril 2023.

Les commentaires sont fermés.

Top