SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

286 Plugins, 197 contribs sur SPIP-Zone, 266 visiteurs en ce moment

Accueil > Rédaction > Assistants de rédaction > Des couleurs dans le texte > Des couleurs dans le texte V2... (et des span)

Des couleurs dans le texte V2... (et des span)

10 septembre 2007 – par domiw – 16 commentaires

5 votes

Une façon souple de coloriser le texte de SPIP ou plus largement de personnaliser des portions de texte, sans modification de code, en ajoutant juste des styles dans une feuille.

Cette contribution est une généralisation à plusieurs titres de celle d’Aurélien Pierard : Des couleurs dans le texte.

La solution proposée ici est plus générale, inutile de modifier le code du filtre si on désire de nouvelles couleurs, les changer ou en ajouter. Les propriétés sont définies grâce à une feuille de style. À partir de là rien n’empêche d’aller plus loin et d’utiliser ce filtre pour obtenir du gris souligné ou du bleu sur fond jaune...

Deux solutions sont proposées, filtre classique ou plugin ainsi qu’un moyen d’assurer la compatibilité ascendante avec le filtre |couleur proposé dans la contrib inspiratrice si vous l’utilisez.

Solution Filtre

Installation

Copier coller le code suivant dans votre fichier mes_fonctions.php (le créer s’il n’existe pas et le placer dans le dossier « squelettes » - lui aussi à créer à la racine s’il n’existe pas -)

  1. /** filtre de colorisation du texte |couleurs_spip **/
  2. function couleurs_spip($letexte) {
  3. $letexte = preg_replace('`<cs_(.*)>(.*)</cs_\1>`iU', '<span class="cs_$1">$2</span>', $letexte);
  4. return $letexte;
  5. }

Télécharger

Dans les squelettes ce nouveau filtre |couleurs_spip peut être utilisé comme tous les autres filtres de SPIP. Exemple [(#TEXTE|couleurs_spip)] ou [(#CHAPO|couleurs_spip)] (Pas pour #INTRODUCTION puisque c’est une balise calculée).

D’autre part il faut dans une feuille de style appelée sur chaque page (celle de SPIP par exemple) définir des styles de classe dont le nom doit commencer par « cs_ » et s’appliquant à des éléments de type span. Ci-dessous, à titre indicatif, en voici une dizaine basée sur les codes couleur des résistances, elles-même reprenant celles de l’arc en ciel - du moins admises comme telles

  1. /* couleurs_spip */
  2. span.cs_noir {color: black; }
  3. span.cs_marron {color: maroon; }
  4. span.cs_rouge {color: red; }
  5. span.cs_orange {color: orange; }
  6. span.cs_jaune {color: yellow; }
  7. span.cs_vert {color: green; }
  8. span.cs_bleu {color: blue; }
  9. span.cs_violet {color: purple; }
  10. span.cs_gris {color: gray; }
  11. span.cs_blanc {color: white; }

Télécharger

Utilisation

Dans le texte des articles il suffit alors d’entourer le texte à colorier par <cs_rouge>le texte à mettre en rouge</cs_rouge>. C’est tout(respectivement <cs_vert>texte en vert</cs_vert> pour du texte à mettre en vert)

Maintenant on peut aller plus loin, par exemple si le style span.cs_rouge est défini dans la feuille de style :

  1. span.cs_rouge {
  2. color: red;
  3. background-color: silver; }

Télécharger

le texte sera en rouge sur fond gris clair. Il est donc possible de définir ainsi des styles pour des parties de texte (gras, italique et souligné par exemple, après tout est une affaire de goût). Si le webmestre veut faire évoluer les styles et varier les couleurs, il lui suffit de modifier la feuille de style. Si on retire le filtre les balises <cs_xxx>...</cs_xxx> seront toujours présentes dans le texte mais non prises en compte et invisibles.

Avantages et inconvénients

La solution filtre permet de maîtriser très précisément les champs où on désire que la colorisation soit prise en compte (#TEXTE, #CHAPO,…). Ceci permet d’éviter un site trop « bariolé ». Les inconvénients sont qu’il faut installer le filtre |couleurs_spip dans les squelettes pour les balises en question, et surtout que l’on ne bénéficie pas dans l’interface privée de l’aperçu « colorisé » des articles. Il faut publier ceux-ci pour que l’effet soit visible dans la partie publique.

Version Plugin

Transformé en plugin deux améliorations sont apportées : il n’y a plus de filtre à mettre dans les squelettes, et surtout l’on dispose d’un aperçu colorisé des articles dans la partie privée.

Le plugin (voir le code du fichier plugin.xml), très simple, se contente d’activer le traitement de la fonction couleurs_spip dans le post-traitement typographique des balises, d’insérer le lien vers la feuille de style contenant les style cs_xxx dans l’entête méta de la partie privée et de la partie publique.

Mise en oeuvre

L’installation se réalise comme tous les autres plugins, cf. http://www.spip.net/fr_article3396.html

Ne pas oublier de rajouter la balise #INSERT_HEAD dans la partie <head> de vos squelettes si elle n’est pas déjà présente, pour permettre l’insertion automatique du lien vers la feuille de style. Une fois activé, la fonctionnalité est immédiatement disponible. Pour rajouter ou modifier des styles, il suffit de le faire dans le fichier couleurs_spip.css se trouvant dans le dossier du plugin du même nom.

La mise en oeuvre côté rédacteur est identique à celle décrite pour le filtre (<cs_rouge>le texte à mettre en rouge</cs_rouge>).

On peut à présent mettre de la couleur et des styles span partout - même les titres - ce qui suivant les sites, les webmestre et les goûts sera jugé soit comme un avantage soit comme un inconvénient...

Notes :

-  Ce dernier point peut être restreint par l’utilisation de sélecteur css. Si on ne désire pas que la colorisation soit opérationnelle dans les titres des articles et seulement dans le texte de ceux-ci par exemple il suffit de définir par exemple le style "p.spip span.cs_rouge color : red ;" pour que celui-ci ne s’applique qu’aux span contenu dans les paragraphes de la classe spip.

-  Il n’est pas possible d’imbriquer les balises les unes dans les autres. <cs_vert>texte en <cs_rouge>texte en vert</cs_rouge>vert</cs_vert> ne sera pas interprété, seul le texte en vert sera affiché. Il convient de fermer une balise avant d’en ouvrir une autre.

Compatilité ascendante

Si vous utilisez déjà la contrib d’Aurélien Pierard et le filtre |couleur, il suffit de remplacer tout le code de la fonction couleur existante dans le fichier mes_fonctions.php par les lignes suivantes :

  1. function couleur($letexte) {
  2. $letexte = preg_replace('`<cs_(.*)>(.*)</cs_\1>`iU', '<span class="cs_$1">$2</span>', $letexte);
  3. $letexte = preg_replace('`\[((.*) ?(.*))\](.*)\[/\1\]`iU', '<span class="cs_$1">$4</span>', $letexte);
  4. $letexte = preg_replace('`<span class="cs_([0-9a-zA-Z_]*) +([0-9a-zA-Z_]*)">`iU', '<span class="cs_$1_$2">', $letexte);
  5. return $letexte;
  6. }

Télécharger

Ne pas oublier de créer une feuille de style (ou d’ajouter dans une feuille de style) tous les styles de type span.cs_xxxx correspondant aux couleurs que vous avez déjà utilisées ou redéfinies (pour les couleurs du type "vert clair" il faut créer le code cs_vert_clair). En fichier joint une feuille de style compatible reprenant tous les styles de l’ancien filtre est proposée.

Si vous désirez remplacer le filtre |couleur par le plugin couleurs_spip, il faut faire la même modification dans le fichier couleurs_spip.php du plugin sans modifier le nom de la fonction couleursspip_definirspan et supprimer de vos squelettes le filtre |couleur.

Dans les deux cas les textes existants n’auront pas besoin d’être modifiés et vous pourrez continuer à utiliser l’un ou l’autre des systèmes de balises proposés (cs_couleur ou [couleur]).

Dernière modification de cette page le 4 octobre 2009

Retour en haut de la page

Vos commentaires

  • Le 9 janvier 2012 à 17:46, par SuNn En réponse à : Des couleurs dans le texte V2... (et des span)

    Bonjour, j’utilise le plugin sur une version 2.1.10 mais ....
    C’est bizarrement aléatoire, en tout cas ce que je veux faire (description en noir) ne marche pas ...

    URL : http://nh.enter-sect.com
    code html généré :

    Ce blog sans prétention est destiné à vous apporter un peu d’idées et de fraicheur. A la découverte de l’Asie et du Sud-Est asiatique, au travers sa décoration zen naturelle et ethnique façonnée par son histoire et ses habitants.

    qqun aurait une idée de dépannage ?

    Merci

    • Le 9 janvier 2012 à 17:47, par SuNn En réponse à : Des couleurs dans le texte V2... (et des span)

      arff

      1. <cs_noir>Ce blog sans prétention est destiné à vous apporter un peu d’idées et de fraicheur. A la découverte de l’Asie et du Sud-Est asiatique, au travers sa décoration zen naturelle et ethnique façonnée par son histoire et ses habitants.</cs>
    • Le 9 janvier 2012 à 18:13, par domiw En réponse à : Des couleurs dans le texte V2... (et des span)

      Comme le texte vient de la balise #DESCRIPTIF_SITE_SPIP (ton site est une dist modifiée), je ne sais pas si les filtres typo et propre sont bien affichés.
      solution modifier le css de la div « chapo »
      modifier le squelette (#DESCRIPTIF_SITE_SPIP à voir...

    Répondre à ce message

  • Le 6 novembre 2010 à 01:16, par ? En réponse à : Des couleurs dans le texte V2... (et des span)

    Moi j’aime beaucoup ce plugin qui permet de se passer de l’envahissant « Couteau Suisse ».

    Merci :-)

    Répondre à ce message

  • Le 4 septembre 2009 à 08:21, par Pierre Roger En réponse à : Des couleurs dans le texte V2... (et des span) : résolu en rafraichissant le cache

    Merci dwojylac pour tes conseils

    Il n’y avait pas d’erreurs dans le codage mais simplement un cache à rafraichir....

    Répondre à ce message

  • Le 3 septembre 2009 à 16:45, par Pierre Roger En réponse à : Des couleurs dans le texte V2... (et des span)

    Je me suis rendu compte que FUSCHIA faisait partie des 16 couleurs de base.

    J’ai donc remplacé le codage haxa décimal par

    span.cs_fuschia
    color : fuschia ;

    Mais je n’ai pas plus de résultat. Même en prenant une couleur complètement différente, je n’ai aucun résultat : le texte reste affiché en noir.

    • Le 3 septembre 2009 à 21:27, par domiw En réponse à : Des couleurs dans le texte V2... (et des span)

      Je ne reproduis pas ton problème. Attention à la convention
      « fuchsia » et non pas « fuschia » (problème de la place du s et du c) mais tu peux aussi donner son code chez moi #ff00ff.

      Attention les styles doivent être valides
      span.cs_fuchsia { color: fuchsia; }

      Pour éviter les questions d’orthographe tu peux appeler ton style « mauve » si tu veux. Il n’y a pas de relation entre le nom du style et la couleur et c’est plus facile à écrire..
      span.cs_mauve { color: fuchsia; }

      D’autre part je remarque qu’en 209 l’actualisation ne se fait pas dans la partie privée même en désactivant le cache du navigateur si on vient de modifier la css. Par contre c’est à jour dans la partie publique.

      Vérifier aussi que le code est bien traduit en <span class="fuchsia"> (y compris dans la partie privée)

    Répondre à ce message

  • Le 3 septembre 2009 à 16:04, par Pierre Roger En réponse à : Des couleurs dans le texte V2... (et des span)

    Bonjour,

    J’utilise le plugin couleurs pour un site en spip 2.0.9.

    Pour rajouter une couleur fuschia, j’ai rajouté au fichier couleurs_spip.css

    span.cs_fuschia {
            color:         #FF6699;}

    Ca ne donne rien mais c’est peut-être pas au bon endroit. Merci de votre aide.

    Répondre à ce message

  • Le 21 juillet 2009 à 20:27, par Romy Têtue En réponse à : Le plugin fonctionne-t-il sous SPIP 2 ?

    Je viens d’essayer le plugin sur SPIP 2.0.8 [13982] : c’est sans effet... est-t-il fonctionnel sous SPIP 2 ? Ce serait bien de le préciser dans l’article...

    Répondre à ce message

  • Le 16 septembre 2007 à 19:52, par Patrice Vanneufville En réponse à : Des couleurs dans le texte V2... (et des span)

    Bonjour,

    J’aimerais préciser que cette contrib a déjà été étendue et placée en plugin au sein du Couteau Suisse : Le Couteau Suisse.

    L’outil ’Tout en couleur’ permet actuellement d’appliquer facilement des couleurs à tous les textes du site (articles, brèves, titres, forum, …) en utilisant des balises en raccourcis. Les styles css sont créés à la volée.

    Deux exemples identiques pour changer la couleur du texte :

    -  Lorem ipsum [rouge]dolor[/rouge] sit amet
    -  Lorem ipsum [red]dolor[/red] sit amet.

    La page de configuration permet aussi d’autoriser les fonds colorés :

    -  Lorem ipsum [fond rouge]dolor[/fond rouge] sit amet
    -  Lorem ipsum [bg red]dolor[/bg red] sit amet.

    Quelle que soit la couleur, la balise fermante peut aussi être : [/couleur] ou [/color], et [/fond] ou [/bg].
    Un exemple de balises imbriquées : [fond jaune]Lorem ipsum [rouge]dolor[/couleur] sit amet[/fond].

    Suite à une discussion sur la liberté à accorder aux rédacteurs — un site doit respecter une charte graphique que les rédacteurs ne doivent pas saccager avec n’importe quelle couleur—, j’ai décidé de laisser au webmestre du site la possibilité de choisir les balises autorisées ou non, et même de fixer les couleurs au sein de la page de config.

    On peut donc utiliser :
    -  soit les 36 couleurs des styles css (black/noir, red/rouge, maroon/marron, green/vert, olive/vert olive, navy/bleu marine, purple/violet, gray/gris, silver/argent, chartreuse/vert clair, blue/bleu, fuchsia/fuchia, aqua/bleu clair, white/blanc, azure/bleu azur, bisque/beige, brown/brun, blueviolet/bleu violet, chocolate/brun clair, cornsilk/rose clair, darkgreen/vert fonce, darkorange/orange fonce, darkorchid/mauve fonce, deepskyblue/bleu ciel, gold/or, ivory/ivoire, orange/orange, lavender/lavande, pink/rose, plum/prune, salmon/saumon, snow/neige, turquoise/turquoise, wheat/jaune paille, yellow/jaune)
    -  soit des balises personnalisées. Le format de ces balises doit lister des couleurs existantes ou définir des couples « balise=couleur », le tout séparé par des virgules. Exemples : « gris, rouge », « faible=jaune, fort=rouge », « bas=#99CC11, haut=brown » ou encore « gris=#DDDDCC, rouge=#EE3300 ». Pour le premier et le dernier exemple, les balises autorisées sont : [gris] et [rouge] ([fond gris] et [fond rouge] si les fonds sont permis).

    • Le 18 septembre 2007 à 08:10, par dwojylac En réponse à : Des couleurs dans le texte V2... (et des span)

      Si le couteau suisse de tout s’occupe...

      Je pense que toutes ces remarques sur la syntaxe des balises (du couteau suisse) figurent dans sa documentation ou en tout cas avaient plus leur place sur la page de la contrib du couteau suisse. Mais bon...

    • Le 18 septembre 2007 à 11:55, par Patrice Vanneufville En réponse à : Des couleurs dans le texte V2... (et des span)

      Tu as raison. C’était pour les idées. Je n’en fais pas un monopole. Si tu veux améliorer ton plugin, pourquoi ne pas envisager de le configurer directement avec CFG ?

    Répondre à ce message

  • Le 16 septembre 2007 à 20:06, par Patrice Vanneufville En réponse à : Des couleurs dans le texte V2... (et des span)

    Quelques dernières remarque encore... Constructives j’espère.

    -  Ce plugin est vraiment de petite taille, il vaut mieux le penser comme une lame du couteau suisse, amha.
    -  Mais il n’est pas du tout impossible de concevoir un petit plugin automone, bien sûr, mais attention toutefois à la maintenance.
    -  le préfice « cs_ » serait justement réservé à devinez quoi ? ben au Couteau Suisse, encore lui !
    -  le choix cornélien de balises au format [couleur] ou <couleur> est à discuter peut-être. Je suis d’accord avec James, attention à la compatibilité !
    -  Le filtre ’couleurs_spip’ ci-dessus est un peu simplet dans sa version actuelle. Il ne protège pas les balises <html> ou <code>
    -  Le couteau suisse traite les textes directement, sans qu’il y ait besoin d’ajouter un filtre : à voir les avantages et inconvénients d’être tributaire d’un filtre à mettre systématiquement dans les squelettes...
    -  Je suis réservé sur le paragraphe des imbrications. span est imbricable, non ?

    • Le 18 septembre 2007 à 08:26, par dwojylac En réponse à : Des couleurs dans le texte V2... (et des span)

      Cette contrib présentant deux solutions (filtre qui oblige effectivement à modifier les squelettes, ou plugin) peut être vu comme une contrib pédagogique sur la réalisation d’un plugin (ou du moins le passage d’un filtre à un plugin) et dans ce sens son côté « simplet » est complètement assumé. Pour celui-ci je pense que la question de la maintenance ne posera pas trop de problèmes (et les sources sont publiques).

      Je pense qu’il peut y avoir deux approches dans les plugins, ou des couteaux suisses avec beaucoup de lames, mais attention aux risques de coupure quand on en ouvre plusieurs :-), ou des plugins simples qui ne font qu’une chose. Il faut laisser au webmestre et au concepteur le choix.

      Pour les questions de choix de syntaxe [couleur] ou <couleur>, la seconde présente à mon avis l’avantage d’être invisible en cas de retrait du plugin ou du filtre. La seconde interdit aussi des notations du type [vert clair] (avec un espace) qui me semble plus dangereuse (mais bon c’est toujours une question de choix). Enfin le fait que les styles ne soient pas définis à la volée directement depuis l’espace privé est effectivement une limitation, mais d’un autre côté ces styles peuvent porter sur autre chose que la couleur de la police et/ou du fond.

    • Le 18 septembre 2007 à 11:53, par Patrice Vanneufville En réponse à : Des couleurs dans le texte V2... (et des span)

      Je pense qu’il peut y avoir deux approches dans les plugins, ou des couteaux suisses avec beaucoup de lames, mais attention aux risques de coupure quand on en ouvre plusieurs :-), ou des plugins simples qui ne font qu’une chose. Il faut laisser au webmestre et au concepteur le choix.

      La-dessus, je suis bien d’accord. Et c’est vrai que certaines lames du Couteau Suisse interagissent entre elles, pour le meilleur !

    Répondre à ce message

Répondre à cet article

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 Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Mailsubscribers

    16 janvier 2013 – 274 commentaires

    Ce plugin permet de gérer les inscriptions (ou abonnements) à la diffusion de contenu par email. Mailsubscribers permet de gérer les inscriptions par Opt-in simple ou double et la désinscription par URL. Ce plugin gère également plusieurs listes (...)

  • noiZetier v2

    9 novembre 2012 – 36 commentaires

    Le noiZetier offre une interface d’administration permettant d’insérer au choix des éléments modulaires de squelettes (noisettes) et de les ajouter ainsi à ses squelettes. Compatibilité La version 2 du noizetier fonctionne sous SPIP 3. Elle est (...)

  • cirr : plugin « rédacteur restreint »

    29 octobre 2010 – 60 commentaires

    Ce plugin « cirr : rédacteur restreint » permet d’affecter des rubriques aux rédacteurs et modifie les droits afin qu’un rédacteur restreint (ou un administrateur restreint) voit dans l’espace privé uniquement les rubriques qui lui sont affectées (et leur (...)

  • Un retour d’expérience d’utilisation de Formidable

    26 octobre – commentaires

    Il s’agissait de créer un formulaire d’inscription à un évènement modérer les inscriptions dans le privé publier les inscriptions dans le public Nous avons discuté de cette présentation lors de l’apéro SPIP du 15 février 2016 à la Cantine (...)

  • Métas +

    3 décembre – 14 commentaires

    Améliorez l’indexation de vos articles dans les moteurs et leur affichage sur les réseaux sociaux grâce aux métadonnées Dublin Core, Open Graph et Twitter Card. Installation Activer le plugin dans le menu dédié. Dans le panel de configuration, (...)

Ça spipe par là