De jolis coins

Publié le : 17 mars 2009 – Dernière modification le 21 décembre 2021 – par Patrice Vanneufville, YannX – 40 commentaires

1
2
3
4
5
18 votes
Une fonctionnalité du Couteau Suisse permettant de modifier facilement l’aspect des coins de vos cadres colorés en partie publique de votre site.
Cet article traite également un cas d’école : jouer avec les <div> de SPIP.

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 :

// coins ronds pour les menus de navigation
.rubriques, .breves, .syndic, .forums, .divers

Ceci est possible car SPIP colore ses cadres (exemple CSS : background-color:#FFEAEA; ), et les définit, par exemple pour les rubriques, comme ceci :

<div id="navigation" style="width:12em;">
  <div class="rubriques">
    <h2 class="menu-titrefont-size:1.2em;
">Rubriques</h2>
    <ul> <li>
      <a class="on" href="./?-test-v1-9-2-">test v1.9.2</a>
    </li></ul>
  </div>
</div>

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 :

// marge haute pour les titres
".rubriques>h2, .breves>h2, .syndic>h2, .forums>h2, .divers>h2" = css('margin-top', '6px')

// coins ronds pour les menus de navigation
.rubriques, .breves, .syndic, .forums, .divers

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 :

// marge haute pour les titres
jQuery(".rubriques>h2, .breves>h2, .syndic>h2, .forums>h2, .divers>h2", this).not(".jc_done").addClass("jc_done").css('margin-top', '6px');

// coins ronds pour les menus de navigation
jQuery(".rubriques, .breves, .syndic, .forums, .divers", this).not('.jc_done').addClass('jc_done').corner();

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 :

.menu = jc_ajouter_parent('lightBlue').parent().corner()

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 :

.menu = .css('margin-bottom','0em').jc_ajouter_parent('lightBlue').parent().corner().css('margin-bottom','1em')

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 :

// marge haute pour les titres
".rubriques>h2, .breves>h2, .syndic>h2, .forums>h2, .divers>h2" = css('margin-top', '6px')

// Un parent pour la bordure, et coins pour tout le monde
".rubriques, .breves, .syndic, .forums, .divers" = .jc_ajouter_parent('#c82', '4px', '15px').corner("round 8px").parent().corner("round 10px")

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 :

// marge haute pour les titres
".rubriques>h2, .breves>h2, .syndic>h2, .forums>h2, .divers>h2" = css('margin-top', '6px')

// Un parent pour la bordure, et coins pour tout le monde
".rubriques, .breves, .syndic, .forums, .divers" = .css('margin-bottom','0em').jc_ajouter_parent('#c82', '8px', '15px').corner("round 8px").parent().css('padding','4px').corner("round 10px").css('margin-bottom','1em')

Soit, enfin :

A ce stade, c’est gagné !

Attention, cette outil passe en version distante dès la version 1.8.18.00 du Couteau Suisse. Il convient donc de vérifier que le fichier distant indispensable est bien rapatrié dans le dossier du plugin : couteau_suisse/lib/jcorner/distant_jquery.corner.js.

Donc :

-  Pour SPIP >= 2.1 : la version 2.12 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 les paramètres de votre serveur le permettent, le Couteau Suisse rapatrie automatiquement le fichier distant suivant (version 2.13 [19-FEB-2013] pour SPIP 3) :
-  http://raw.github.com/malsup/corner...
le renomme et le place comme ceci :
-  votre_dossier_des_plugins/couteau_suisse/lib/jcorner/distant_jquery.corner.js

Si vous mettez à jour SPIP (ou éventuellement le Couteau Suisse), n’oubliez pas d’« [actualiser] » la description des « Fichiers distants » que vous trouverez sur la page de configuration de l’outil « Jolis coins ». Vous serez alors sûr d’avoir la meilleure version compatible du fichier téléchargé.

En cas de problème avec l’accès distant, par exemple si votre serveur n’a pas l’accès au Hub distant, ou si la page de configuration du plugin vous signale une erreur, procédez à une installation par téléchargement manuel :
-  renommez à la main le fichier téléchargé jquery.corner.js en : distant_jquery.corner.js
-  placez-le dans votre dossier ./squelettes/ à la racine de votre site suivant l’arborescence : ./squelettes/lib/corner/distant_jquery.corner.js.

N.B. : la mise à jour de cette installation manuelle (en cas de correction de bugs ou d’évolution de jcorner...) restera à votre charge.

Discussion

5 ans 1 an 3 mois Sans limite
par date
Filtrer

16 discussions

  • agony

    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

  • archi02

    Voici la réponse de Mike, le developpeur du plugin, à qui j’ai posé sensiblement là même question :

    Sorry, Jonathan. That’s really just a limitation of the plugin. Thin
    borders are difficult to achieve.

    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

  • archi02

    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

  • 1
    archi02

    Une nouvelle question : lors de la mise en application de ce tutoriel, je m’aperçois que la fonction .jc_ajouter_parent ne fonctionne pas. Y’a t’il quelque chose à activer en particulier ?
    (Je fonctionne avec la version 1.8.05.08 du couteau suisse)

    Merci !

    Répondre à ce message

  • archi02

    Arf. Tellement sûr de moi, je n’avais pas déroulé la page... Merci mille fois !

    Répondre à ce message

  • 1
    archi02

    Très jolis ces coins, cela pourrait me simplifier drôlement la vie ! Seulement sur mon squelette, je n’arrondis que deux coins sur chaque bloc coloré : haut-gauche et bas-droite. Ceci donne un effet sympa et un peu original.

    Est-ce que cela serait possible avec ce plugin ? Je n’ai vu nulle part ou préciser le coin à arrondir, comme si c’était « tout ou rien »...

    Quoi qu’il en soit merci pour ce bel article !

    Répondre à ce message

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Qui êtes-vous ?
[Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom