Personnaliser le tableau comparatif à inclure sur votre blog ou site web

Suite à notre précèdent billet où nous expliquions que vous pouviez désormais choisir le style du tableau comparatif à inclure, nous allons ci-dessous détailler la façon dont vous pourrez totalement personnaliser le style de votre tableau.

Ce billet nécessite quelques compétences techniques et n’intéressera que les personnes souhaitant inclure un tableau comparatif socialcompare sur leur blog ou site web.

Pour inclure un tableau comparatif sur votre site, il suffit de copier et coller le code HTML suivant:
<iframe width="100%" height="270" src="http://socialcompare.com/fr/w/playstation3-vs-xbox360-vs-wii#" frameborder="0" scrolling="auto" marginheight="0" marginwidth="0"></iframe>


Ceci étant la syntaxe par défaut qui produira le résultat suivant:

Si vous voulez personnaliser et changer le style de cet affichage, vous devez changer l’URL, en particulier la partie après le « # » :

• Le style par « défaut » est: #
• Le style et syntaxe « compact » est: #nofoot;noround;noactions;noflags;header-font-size:12px;header-color:#555;header-border:none;header-padding:2px 5px;cell-font-size:12px;cell-border:none;cell-padding:2px;image-max-width:120px;image-max-height:90px

Cliquer sur les liens ci-dessus pour tester les différents styles directement dans cette page. Vous constaterez que le second style (plus compacte) s’accorde mieux à l’espace de ce blog.

Voyons désormais ce que nous pouvons personnaliser. Ci-dessous est la liste des différentes zones du tableau qui peuvent être adaptés en terme de style:

• cell: cellule/case d’un tableau (utilisez cellhover pour personnaliser quand le curseur passe dessus, cellodd pour les cellules impaires, celloddhover pour combiner les deux)
• header: les titres du tableau, soit les critères ou les éléments (titres de lignes ou colonnes) (headerodd pour les titres sur les lignes impaires)
• item: les titres des éléments (itemodd pour les éléments sur les lignes impaires (uniquement si votre tableau est tourné car par défaut les éléments sont des colonnes))
• section: les titres et cellules des critères de type « entête » (sectionhover quand le curseur de souris passe dessus)
• corner: la cellule qui est tout en haut à gauche du tableau (cornerhover: quand le curseur de souris passe dessus)
• link: les liens dans le tableau (linkhover quand le curseur de souris passe dessus)
• image: les images qui apparaissent dans le tableau (utile avec max-width, max-height pour limiter les dimensions des images)

La syntaxe est similaire à CSS.
Sur toutes les parties du tableaux vous pouvez modifier les attributs suivants:
background, border, color, font, font-size, letter-spacing, line-height, max-width, max-height, min-width, min-height, padding, text-align, text-decoration, text-shadow, text-transform, vertical-align, word-spacing.

Concaténez le nom de la zone du tableau à modifier avec l’attribut séparé par ‘-’.
Par exemple si vous souhaitez modifier la couleur du texte des éléments:
#item-color:green

Si vous souhaitez changer la couleur de fond des lignes impaires, vous devez changer les cellules impaires et les entêtes impaires; séparez plusieurs modifications avec ‘;’:
#cellodd-background:#bbbbff;headerodd-background:#bbbbff

Vous pouvez consulter un manuel de syntaxe CSS pour savoir les valeurs possibles pour chaque attribut.

Notes:
Les caractères suivants ne sont pas acceptés: ,'"()%! certaines valeurs ne sont donc pas possible (par exemple: 100%, url(), !important)

Voici quelques options supplémentaires que vous pouvez rajouter:

• noround: pour ne pas avoir des bords arrondis en haut et en bas du tableau.
• nofoot : pour ne pas avoir de bas de tableau.
• noactions : pour avoir aucune action (retourner, tri, modifier, glisser-déposer).
• noedit: pour avoir que l’action de tri.
• noflags: pour cacher les drapeaux de langue sous le tableau.

Pour facilement adapter le style de votre tableau, vous pouvez directement éditer l’URL dans le navigateur (cliquez sur le lien plus bas et éditer jusqu’à obtenir votre style):
http://socialcompare.com/en/w/playstation3-vs-xbox360-vs-wii#noedit;nofoot;item-color:#00aa33;header-padding:2px 18px 2px 2px;item-padding:5px;section-padding:10px 2px 2px 2px;section-color:#00aa33;cell-padding:2px;image-max-height:120px
Une fois que vous avez la combinaison qui vous plaît, remplacez l’URL dans le code HTML initial.

Utilisez les commentaires en dessous si vous souhaitez suggéré de nouveaux attributs, ou si vous avez créé un style que vous aimeriez partager avec les autres.