Étiquette : css

Customisez votre galerie WordPress

Galerie

Artisteer a un défaut, un manque qui n’a pas encore été comblé : les galeries WordPress ne sont pas encore stylisables. Je dis « encore », car il a quelques mois, j’avais passé un petit moment dans le css de mon thème pour définir le style de mes commentaires, et cette fonctionnalité a été ajoutée dans la nouvelle version d’Artisteer tout récemment. Ce sera donc peut-être le cas prochainement pour les galeries. En attendant, voici les morceaux de code que j’utilise.

Dans le fichier functions.php

Ajoutez cette ligne de code

Elle vous permettra de ne plus utiliser le style par défaut de WordPress.

add_filter( 'use_default_gallery_style', '__return_false' );

Dans votre CSS

Modifiez le code « .gallery img » selon ce que vous souhaitez

Ce code est celui que j’utilise sur ce site. Il est assez simple donc n’hésitez pas à le modifier pour qu’il corresponde à vos attentes.

.gallery img {
   padding:5px;
   background:#fff;
   border:1px solid #cfcfcf;
}

Supprimez la ligne de code rayée

Seulement pour la version 4.2 d’Artisteer (et sûrement celles qui suivront). Cette ligne définit la taille des images dans votre galerie et est intégrée automatiquement. Elle devra être supprimée pour vous permettre de choisir de mettre plus de trois colonnes dans votre galerie.

.gallery .gallery-item {
    float: left;
    margin-top: 0;
    text-align: center;
    width: 33%;
}

Ajoutez ces lignes

Elles permettront à vos galeries d’apparaître proprement quelque soit le nombre de colonnes que vous souhaitez.

 .gallery-columns-0 .gallery-item {
 width: 100%;
 }
 .gallery-columns-1 .gallery-item {
 width: 100%;
 }
 .gallery-columns-2 .gallery-item {
 width: 50%;
 }
 .gallery-columns-3 .gallery-item {
 width: 33.33%;
 }
 .gallery-columns-4 .gallery-item {
 width: 25%;
 }
 .gallery-columns-5 .gallery-item {
 width: 20%;
 }
 .gallery-columns-6 .gallery-item {
 width: 16.66%;
 }
 .gallery-columns-7 .gallery-item {
 width: 14.28%;
 }
 .gallery-columns-8 .gallery-item {
 width: 12.5%;
 }
 .gallery-columns-9 .gallery-item {
 width: 11.11%;
 }
 .gallery-columns-10 .gallery-item {
 width: 10%;
 }
 .gallery-columns-11 .gallery-item {
 width: 9.09%;
 }
 .gallery-columns-12 .gallery-item {
 width: 8.33%;
 }
 .gallery-columns-13 .gallery-item {
 width: 7.69%;
 }
 .gallery-columns-14 .gallery-item {
 width: 7.14%;
 }
 .gallery-columns-15 .gallery-item {
 width: 6.66%;
 }
 .gallery-columns-16 .gallery-item {
 width: 6.25%;
 }
 .gallery-columns-17 .gallery-item {
 width: 5.88%;
 }
 .gallery-columns-18 .gallery-item {
 width: 5.55%;
 }
 .gallery-columns-19 .gallery-item {
 width: 5.26%;
 }
 .gallery-columns-20 .gallery-item {
 width: 5%;
 }
 .gallery-columns-21 .gallery-item {
 width: 4.76%;
 }
 .gallery-columns-22 .gallery-item {
 width: 4.54%;
 }
 .gallery-columns-23 .gallery-item {
 width: 4.34%;
 }
 .gallery-columns-24 .gallery-item {
 width: 4.16%;
 }
 .gallery-columns-25 .gallery-item {
 width: 4%;
 }
 .gallery-columns-26 .gallery-item {
 width: 3.84%;
 }
 .gallery-columns-27 .gallery-item {
 width: 3.7%;
 }
 .gallery-columns-28 .gallery-item {
 width: 3.57%;
 }
 .gallery-columns-29 .gallery-item {
 width: 3.44%;
 }
 .gallery-columns-30 .gallery-item {
 width: 3.33%;
 }

Photographie de Sifter (CC BY-NC 2.0)