Étiquette : Artisteer

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)

Artisteer, créez le design de votre site en quelques minutes

artisteerPour le design des sites web sur lesquels je travaille, j’utilise Artisteer. Il n’existe pas beaucoup de logiciels de ce type et le bon point pour celui-ci, c’est ça simplicité. Avec ce logiciel,  n’importe qui devient capable de créer un template (modèle de présentation des données du site) de base. La prise en main est assez intuitive pour les utilisateurs de la suite Office 2010 car toutes les fonctionnalités sont réparties en un bandeau illustré sous les menus. Sans avoir besoin d’utiliser une seule ligne de code, vous avez la possibilité de définir chaque élément de votre futur site : couleurs, polices, forme de vos menus, bandeau, présentation de vos colonnes et widgets et j’en passe. Pour cela, Artisteer dispose d’une librairie de textures et d’objets assez importante, dans laquelle vous pouvez piocher allégrement. De nombreux thèmes de base sont par ailleurs proposés, pour vous inspirer ou à modifier directement.

Depuis la version 4, de nombreuses fonctionnalités ont été ajoutées, dont la possibilité de créer des styles pour les commentaires. Progressivement, la plupart des besoins de WordPress sont traités et la facilité de mise en place reste toujours très simple : une fois que le design créé vous convient, il suffit de l’exporter en fichier zip, puis de l’uploader depuis le menu Installer des thèmes, disponible dans le menu de l’administration de WordPress (dans Apparence >> Thèmes).

Bien que de plus en plus complets, les thèmes créés avec Artisteer restent des thèmes de bases. Si vous êtes un peu curieux, mettre les mains dans le code vous permettra rapidement d’obtenir exactement ce que vous souhaitez.  Dans de prochains articles je vous proposerai certains codes ou astuces qui m’ont servi.

Et pour finir cette (très) rapide présentation, la question qui en fâchera certains : le prix. Artisteer est en effet un logiciel payant à télécharger sur www.artisteer.com. La licence  « Home » est à 50$, c’est-à-dire environ 38€, et celle complète est à 130$ ce qui fait environ 98€. Personnellement, je ne peux plus m’en passer, et ma version « Home » (qui ne fonctionne qu’avec WordPress et Blogger et qui n’a que 75% des librairies) me suffit largement pour l’instant. Je ne peux que vous conseiller de l’essayer, vous avez la possibilité de télécharger et de tester Artisteer sur le site sans rien débourser, vos thèmes seront justes marqués comme venant d’une version non débloquée. Il vous suffira d’acheter un code sur le site si vous êtes convaincus…

Lien

Logiciel : Artisteer
Éditeur: Extensoft
Système d’exploitation : Windows et Mac
Licence : Payante

Télécharger ce logiciel sur le site d’Artisteer acheter