Introduction
« Jolis Coins » est un outil permettant de modifier facilement l’aspect des coins de vos cadres colorés en partie publique de votre site.
Tout est possible, ou presque ! Voyez le résultat sur cette page : http://www.malsup.com/jquery/corner/.
Cet outil est basé sur un plugin jQuery nommé « Round Corners » et développé par Dave Methvin. Par conséquent, pour des remarques trop techniques ou des dysfonctionnement liés à la programmation en JS, il vaut mieux vous adresser directement à l’auteur. Le projet est hébergé ici : http://github.com/malsup/corner/tre.... Pour les différentes corrections effectuées : http://github.com/malsup/corner/com....
Installation
Cet outil est une fonctionnalité du plugin « Le Couteau Suisse » que vous pouvez trouver ici : Le Couteau Suisse.
Pour avoir accès aux Jolis Coins, il vous faut donc avoir installé ce plugin en suivant la procédure normale d’installation des plugins SPIP.
Ensuite, veuillez activer l’outil « Affichage public / Jolis Coins » en vous rendant sur la page d’administration du plugin en espace privé (Bouton Configuration, et onglet "Le Couteau Suisse").
Dépendances
Les indispensables scripts JS du plugin sont insérés grâce à la balise #INSERT_HEAD qui doit absolumet être présente (en un seul exemplaire) dans le header de vos squelettes (entre les balises <head> et </head> des fichiers HTML). Si vous ne trouvez pas cette balise dans vos codes et que les coins n’ont pas l’apparence voulue, alors l’outil "Balise #INSERT_HEAD" du Couteau Suisse permet d’insérer automatiquement cette balise sans manipulation de votre part.
Puisque l’ajout des coins ronds s’opère en JavaScript, sur la machine du visiteur, cela simplifie considérablement votre travail de concepteur de squelettes. Au départ, prévoyez un simple cadre coloré en CSS, puis jquery fera le travail à votre place. Notez donc, que si le visiteur a désactivé le JavaScript sur son navigateur, aucun joli coin n’apparaitra.
Configuration
Le Couteau Suisse vous permet en direct d’agir sur les cadres <div> de vos squelettes grâce aux sélecteurs CSS qu’il suffit de configurer sur la page d’administration du Couteau Suisse.
Dans le cadre « Améliorer les coins des sélecteurs suivantes », listez les objets de votre squelette à arrondir en utilisant la syntaxe CSS (.class, #id, etc. ). Veuillez respecter les points suivants :
- Utilisez le signe « = » pour spécifier la commande jQuery à utiliser.
- Utilisez le double slash « // » pour les commentaires éventuels.
- En absence du signe égal, des coins ronds seront appliqués par défaut.
Par exemple, .ma_classe est équivalent à : .ma_classe = corner().
- Dès que le sélecteur avant le signe égal contient des virgules (listes d’objets différents), utilisez les guillemets doubles « " ».
Par exemple : ".ma_classe1, .ma_classe2" = corner('round 10px')
Prenons un cas d’école : arrondir les coins des cadres de SPIP.
L’exemple suivant est très simple, il permet d’appliquer des coins ronds aux menus de navigations sous SPIP 1.92, puisqu’ils sont colorés nativement :
Ceci est possible car SPIP colore ses cadres (exemple CSS : background-color:#FFEAEA; ), et les définit, par exemple pour les rubriques, comme ceci :
Soit :
Voici ce que donne l’ajout des coins ronds :
Comme vous pouvez le remarquer, les titres <h2> nous empêchent de voir les coins ronds supérieurs : ils sont placés trop haut. A ce stade alors, on peut leur ajouter une petite marge haute pour les déplacer vers le bas :
Soit, toujours pour les rubriques :
Notez que la syntaxe est similaire à celle de jQuery : ne vous trompez pas dans votre code ! Après chargement total de la page, le plugin compile pour vous la commande ci-dessus et provoque l’ajout d’une marge haute sur les titres puis l’application des coins ronds grâce au code JS suivant :
Comme vous pouvez le constater, une sentinelle "jc_done" est appliquée lors du traitement des sélecteurs concernés. Ceci évite de multiples passages intempestifs, mais vous prive aussi de l’utilisation répétée du même sélecteur. Choisissez donc l’enchaînement de type jQuery car si vous faites plusieurs utilisations du même sélecteur, seule la première sera exécutée.
Syntaxe de type jQuery correcte (si chaque fonction renvoie bien le sélecteur de départ) :
.ma_classe = .fonction1().fonction2()
Syntaxe répétée incorecte pour le plugin :
.ma_classe = .fonction1()
.ma_classe = .fonction2()Notez : cet outil du Couteau Suisse est compatible AJAX. Si un fragment de page est modifié, les jolis coins vont s’appliquer dès le chargement du fragment terminé.
Colorer vos divs
Le squelette distribué par SPIP 2.0 n’est plus coloré. Reprenons donc notre cas d’école : arrondir les divs de SPIP !
Par exemple, voici la liste de nos rubriques en page d’accueil :
Un peu triste, non ? Le problème est que, pour avoir des coins ronds, il faut absolument un cadre coloré. L’idée est ici d’ajouter un parent coloré au cadre initial de SPIP dont la classe est ".menu".
Le Couteau Suisse vous offre une fonction jQuery simple pour ajouter un cadre parent : .jc_ajouter_parent(background_color, padding, margin). Notez le point précédant le nom de la fonction, nécessaire pour jQuery. Cette fonction permet l’enchainement jQuery car elle renvoie, non pas le nouveau parent créé, mais bien le sélecteur de départ. On peut donc sans problème enchainer la fonction corner() après jc_ajouter_parent(). Pour avoir accès au parent d’un sélecteur, alors il faut utiliser la fonction jQuery parent().
Voici donc le code facile pour ajouter un parent coloré au cadre original de SPIP, puis arrondir ses coins :
Cela donne :
Ah... Déception : La bordure est plus large en bas ! Ceci est simplement dû à la marge basse du cadre de départ qui est définie à 2em. Sacré SPIP ! Il faut donc transférer cette marge au parent, pour éviter que les cadres ne se collent entre eux. Voici le nouveau paramétrage :
Et le tour est joué :
Ceci est un cas d’école bien sûr. Stylez les <div> de votre squelette de façon à ce que la fonction .corner() puisse agir directement. Prévoyez notamment les cadres colorés à l’avance, il sera facile ensuite d’agir sur leurs coins. Cela permettra également aux visiteurs qui n’ont pas JavaScript sur leur machine de visualiser correctement votre site... mais avec des coins carrés.
Des bordures, non des coins !
Reprenons l’exemple du menu vert clair de SPIP 1.92. L’idée maintenant est d’ajouter une bordure, ce n’est pas très difficile : il faut créer un nouveau cadre, autour du premier, mais un peu plus grand, et lui aussi arrondi. C’est mathématique : deux cadres arrondis concentriques de taille différente créent ... une bordure dont on peut décider facilement l’épaisseur.
Utilisons la fonction .jc_ajouter_parent(background_color, padding, margin) décrite dans la paragraphe précédent. Notre configuration devient alors :
Notez que les coins du parent doivent être de plus grand rayon que ceux du cadre enfant. L’aspect visuel pour une bordure serait un peu étrange si tous les coins sont de même dimension.
Voici le résultat du paramétrage ci-dessus :
Quelle déception : La bordure est plus large en bas ! Ceci est simplement dû à la marge basse du cadre de départ qui est définie à 1em. Il faut donc transférer cette marge au parent, pour éviter que les cadres ne se collent entre eux. Voici le nouveau paramétrage :
Soit, enfin :
A ce stade, c’est gagné !
Donc :
- Pour SPIP >= 2.1 : la version 2.09 de ce fichier est compatible avec jQuery > 1.3.2
- Pour SPIP <= 2.0 : la version 2.03 de ce fichier n’est désormais plus maintenue par ses auteurs.
Si vous mettez à jour SPIP ou le Couteau Suisse, veuillez "[actualiser]" la description des "Fichiers distants" que vous trouverez sur la page de configuration de l’outil "Jolis coins".
Vos commentaires
# Le 4 avril 2011 à 01:34, par fd
En réponse à : De jolis coins
Comment faire pour ne faire les coins que sur les coins du bas et pas du haut d’une div ? Merci
# Le 4 avril 2011 à 13:15, par ?
En réponse à : De jolis coins
Tu es allé voir la page de démo citée plus haut ?
A priori :
corner("bottom");# Le 4 avril 2011 à 22:24, par fd
En réponse à : De jolis coins
suis-je bête, désolé merci. En effet cest .maclasse = corner("bottom") ;
Répondre à ce message
# Le 7 mars 2011 à 17:23, par Renée Picard
En réponse à : De jolis coins
Comment rendre compatible joli coin et décoration du couteau suisse ?
Répondre à ce message
# Le 4 mai 2010 à 14:01, par mailou
En réponse à : De jolis coins
Bonjour,
Je viens d’installer le couteau suisse et activé les jolis coins, j’ai un problème avec les logos de l’article, ils sont recouvert par l’article, le logo n’est vu qu’à moitié
Quelle solution afin que le logo s’intègre dans l’article,
Merci
# Le 4 mai 2010 à 14:08, par Pat
En réponse à : De jolis coins
Tu as peut-être un lien public à montrer ? Firefox+Firebug t’en diront plus sur les CSS...
# Le 4 mai 2010 à 17:20, par mailou
En réponse à : De jolis coins
Désolé c’est en local, mais voila une copie avec l’apparence de l’article et la photo entière telle qu’elle devrait être, je pense que ça donne une idée.
# Le 4 mai 2010 à 17:35, par mailou
En réponse à : De jolis coins
oups, j’ai commis une erreur, voilà une copie écran
# Le 4 mai 2010 à 17:36, par mailou
En réponse à : De jolis coins
Et l’autre copie
# Le 5 mai 2010 à 17:13, par Patrice Vanneufville
En réponse à : De jolis coins
C’est impossible de répondre sans avoir le bouzin entre les mains : une page publique exhibant fièrement le problème...
Je viens de mettre à jour le plugin jquery.jcorner.js dans le Couteau Suisse. Il te faut donc :
Peut-être que cela résoudra ton problème, s’il s’agit d’un vrai bug de jcorner. Sinon, tes réglages seront sans doute à changer.
Répondre à ce message
# Le 25 juillet 2009 à 23:48, par sBa
En réponse à : Jolis coins et Crayons
je rencontre une incompatibilité avec le plugin Crayons : je n’ai plus l’image du crayon pour éditer le texte, si je désactive jolis coins, ça remarche... vous confirmez ? (spip 2.08 + dernière version du couteau suisse)
Répondre à ce message
# Le 5 juin 2009 à 11:02, par agony
En réponse à : décallage avec Explorer ?
Bonjour à nouveau
j’ai un léger décalage sous IE.
J’ai fais un box contenant 2 box : le premier sert à l’entête le second au corps du message. Avec des arrondis différent pour le haut et le bas suivant le box.
Sous IE, j’aperçois un léger arrondis en haut alors que je n’en ai pas en bas.
Sous Firefox, pas de problème.
(pièce jointe avec l’exemple.)
# Le 5 juin 2009 à 12:14, par Pat
En réponse à : décallage avec Explorer ?
Je viens de poster la mise à jour du plugin jcorner (v1.98, zip dispo vers 19h30). Je ne sais pas si ça va résoudre ton pb... Ce projet est hébergé ici : http://github.com/malsup/corner/tre.... Pour les différentes corrections effectuées c’est ici : http://github.com/malsup/corner/com....
Répondre à ce message
# Le 28 mai 2009 à 15:21, par bobof
En réponse à : De jolis coins
Bonjour,
serait-il possible de faire une petite amélioration à « jolis coins », soucis d’avertissement tydi pour le XHTML 1.0 Strict. le bout de code JQuery introduit par la balise #INSERT_HEAD génère un avertissement suivant :
Aide de tidy - Tidy [32] : Les caractères < + / suivis d'une lettre ne sont pas autorisés ici.Cause :
Les caractères < + / suivis d'une lettre ne sont pas autorisés ici. Dans la plupart des cas, ceci est dû a une erreur de Javascript.
Exemple :
Error document.write('</h1>');
Good document.write('<\/h1>');
Solution :
Ajoutez une barre oblique ('anti-slash') dans le code javascript.
le code est le suivant :
<script type="text/javascript"><!--var cs_prive=window.location.pathname.match(/\/ecrire\/$/)!=null;
if(window.jQuery)jQuery.fn.jc_ajouter_parent=function(color,padding,margin){
color=((typeof color=='undefined')||(color==''))?'':(' background-color:'+color+';');
if((typeof padding=='undefined')||(padding==''))padding='4px';
if((typeof margin=='undefined')||(margin==''))margin='4px 0';
return this.wrap('<div class="jc_parent" style="padding:'+padding+';'+color+' margin:'+margin+';"></div>')};
c’est la dernière div fermante qui pose problème.
j’ai vu ceci dans /plugins/couteau_suisse/outils/jcorner.js.html qui ressemble bien à ligne de code incriminée .
if (window.jQuery) jQuery.fn.jc_ajouter_parent = function(color, padding, margin) {color = ((typeof color=='undefined') || (color==''))?'':(' background-color:'+color+';');
if ((typeof padding=='undefined') || (padding=='')) padding = '4px';
if ((typeof margin=='undefined') || (margin=='')) margin = '4px 0';
return this.wrap('<div class="jc_parent" style="padding:'+padding+';'+color+' margin:'+margin+';"></div>');
};
j’ai essayé <\/div> ou <\\/div> rien y fait, même en vidant les caches spip, navigateur, en rechargeant la page, l’avertissement persiste.
# Le 28 mai 2009 à 15:41, par bobof
En réponse à : De jolis coins
Désolé pour le bruit, mais en modifiant cette div fermante de :
</div> en <\/div>puis en supprimant tout le contenu du répertoire /tmp/ (vider le cache depuis l’espace privé ne suffit pas), l’avertissement disparait et jolis coins fonctionne toujours (pour l’instant).
Cordialement.
# Le 29 mai 2009 à 00:14, par Pat
En réponse à : De jolis coins
Salut, merci pour toutes ces précisions. As-tu la possilité de committer directement ces changements dans le plugin ? Autant le faire directement, non ?
A propos de la prise en compte des choses, il faut parfois recompiler le CS en réaffichant sa page de config...
# Le 29 mai 2009 à 00:27, par bobof
En réponse à : De jolis coins
Bonsoir,
moi m’excuser, moi pas comprendre vocabulaire franglais développeur ! LOL
commiter ? d’accueil ? restreint ?
# Le 29 mai 2009 à 01:05, par Pat
En réponse à : De jolis coins
;-) Google est un ami certain !
Les plugins de SPIP sont développés sur un espace SVN (logiciel serveur collaboratif nommé Subversion) auquel tout le monde peut accéder après avoir demandé un mot de passe sur la liste de diffusion spip-zone.
Tu pourras alors grâce à ce système committer (ou poster) tes corrections/modifications/créations de code.
Ensuite, deux fois par jour, le zip du plugin disponible sur la zone est automatiquement reconstruit.
Tu as qq explications ici : http://zone.spip.org/trac/spip-zone/
Sinon, je confirme qu’il faut recompiler le CS (réafficher sa page de config) pour que tes modifs sur /plugins/couteau_suisse/outils/jcorner.js.html soient prises en compte.
# Le 4 juin 2009 à 12:14, par pat
En réponse à : De jolis coins
Correction effectuée ce jour, disponible ce soir en zip.
Répondre à ce message
# Le 4 juin 2009 à 09:25, par agony
En réponse à : De jolis coins
Bon, en fait, je n’insérai tout simplement pas le code au bon endroit... :/
Répondre à ce message
# Le 29 mai 2009 à 13:01, par agony
En réponse à : De jolis coins
Bonjour à tous.
Je débute et je ne comprends pas grand chose. Je dois certainement loupé une grosse étape mais un peu d’aide serait d’un gros secours (je suis en stage et j’ai un site sous spip à réaliser ’-_- )
J’ai fais y a quelques mois un peu de développement CSS mais là, je galère grave.
Si quelqu’un veut bien m’envoyer un mail (je ne voudrai pas polluer ici sur un truc basique) à agony.forum-at-online.fr. J’aimerai au moins comprendre ce qui ne va pas dans mes coins.
Cordialement.
Répondre à ce message
# Le 25 mars 2009 à 22:26, par archi02
En réponse à : De jolis coins
Voici la réponse de Mike, le developpeur du plugin, à qui j’ai posé sensiblement là même question :
Bon à savoir non ? Me concernant, c’est donc la fin des aventures avec cette lame du couteau... Merci quand même Patrice pour ton aide jusqu’à présent ! :)
Répondre à ce message
# Le 25 mars 2009 à 16:47, par archi02
En réponse à : De jolis coins
Bon. Désolé de squatter ce forum, mais puisque j’y suis seul ! ;)
As-tu déjà essayé une bordure arrondie très fine, par exemple 1px. Ici j’ai un sacré bug, qui apparait très nettement si l’on augmente un peu la taille des arrondis. J’essaye d’expliquer : des coins fantômes non transformés apparaîssent en haut, en plus de l’arrondi du bloc et son parent. Voici une petite capture d’écran. J’ai l’impression que pour résoudre le problème il faut juste augmenter le padding de façon à cacher ces coins, mais comme justement c’est le padding qui régit la taille de la bordure... on est coincé !
Voici mon code :
[code].bords-arrondis = .jc_ajouter_parent(’#c82’, ’2px’, ’0’).css(’margin’,’0’).corner("31px").parent().corner("31px")[/code]
ps : oui en effet, une version supérieur du couteau suisse fonctionne mieux. Peut-être serait-il bon de le préciser, la mienne n’était pas si vieille que ça... ;)
Répondre à ce message