couleurs_spip version 2

Mise à jour et amélioration du plugin présenté à l’article Des couleurs dans le texte V2... (et des span) permettant d’enrichir la typographie de groupes de mots en insérant des balises dans le texte des articles (ou le chapeau, ou descriptif,…)

Les nouveautés :
-  Possibilité d’imbriquer les span
-  Écriture simplifiée pour la balise de fermeture
-  Redéfinition de la feuille de style du plugin par une feuille du même nom placée dans /squelettes/css/

Mettre certains mots en couleur

Pour mettre certains mots du texte en couleur ou modifier leur taille ou toute autre caractéristique typographique, il suffit d’entourer ceux-ci de balises. Par exemple :
Rouge : <cs_rouge>le texte en rouge</cs>
Orange : <cs_orange>le texte en orange</cs>
xxl : <cs_xxl>le texte en plus gros</cs>

le principe est <cs_code>le texte à mettre en couleur ou autre</cs>.
Les couleurs disponibles d’origine pour les styles définis par défaut étant :
noir, marron, rouge, orange, jaune, vert, bleu,violet, gris, blanc.
les tailles disponibles par défaut étant : xxxl, xxl, xl, l, s, xs, xxs

Il convient cependant de ne pas abuser de cette possibilité pour ne pas détruire la cohérence graphique et typographique du site. Ceci est utilisable dans tous les éléments des articles, sauf les titres...

span imbriqués

Il est possible d’imbriquer les balises. Par exemple :
<cs_rouge>cette partie de phrase est en rouge <cs_vert>ceci en vert</cs> et de nouveau en rouge</cs>
Produira : cette partie de phrase est en rouge ceci en vert et de nouveau en rouge (simulé ici par du gras et de l’italique).

Notes :
-  Ne pas oublier de fermer les balises et de ne l’appliquer qu’à l’intérieur du même paragraphe (différence de comportement là dessus entre IE et les navigateurs intelligents).
-  Il est important d’avoir autant de balises de fermeture (</cs>) que de balises d’ouverture.
-  Les balises sont fermées dans l’ordre inverse où elles ont été ouvertes.
-  Lors de l’imbrication le span le plus « interne » hérite des propriétés non redéfinies du premier (dans l’exemple précèdent si le style rouge est souligné alors la partie en vert le sera aussi sauf si on a redéfini cette propriété pour le vert (text-decoration : none ;)

Définir ses styles personnels

Pour cela il suffit de créer dans son dossier squelettes un dossier « css » et d’y placer une copie de la feuille de style du plugin que l’on modifiera ensuite en supprimant ou ajoutant des styles. Elle devra s’appeler couleurs_spip.css.

Les noms des styles doivent tous commencer par « cs_ »

span.cs_nb {
	color: white;
	background-color: black; }

définit par exemple un style de style « noir au blanc » (caractères en blanc sur fond noir).

Ce style sera alors utilisé dans le texte de l’article (ou du chapeau ou de tout autre élément) par <cs_nb>le texte écrit en noir au blanc</cs>

Rappelons que le bon goût en matière de typo doit rester de mise :-)) dans les couleurs et les effets, et que leur utilisation doit rester parcimonieuse.

Disponible sur la zone.

Discussion

3 discussions

  • 3

    Bonjour à tous et d’avance merci pour votre temps de lecture.
    Je suis entrain de travailler sur mon site web qui est bilingue (français/anglais). Je ne gère pas les langues avec le système proposé car je veux économiser la gestion des images qui devient ingérable lorsqu’on passe en multilingue... doublon des logo etc...
    J’ai donc fais des modèles qui ajoutent des drapeaux et je traduis mon texte dans le même article...
    les visiteurs voient les deux langues à la fois...
    Ainsi, je suis à la recherche d’une solution pour modifier la couleur d’un texte : j’ai essayé de faire deux modèles l’un dans lequel je commence un « span » avec une classe qui écrit d’une couleur différente, l’autre dans lequel je ferme le « span ».

    Mais lors de l’affichage, ma fermeture de span « saute » (il a été éliminé), ce n’est pas un problème d’appel car j’ai ajouté un texte ... pour tracer... il apparaît... le second modèle est donc bien appelé..

    Ce module semble avoir ce genre de principe... quelqu’un sait t-il comment ce plugin se débrouille pour faire ça... ? Ce sont des modèles ?

    • Ce plugin ne convient il pas tel quel à tes besoins ?

      Puisque tu demandes, le code est public, le lien figure plus haut dans la colonne de droite de cette page, et tu verras là comment ce plugin fait. Il n’y a qu’un seul fichier php : https://git.spip.net/spip-contrib-extensions/couleurs_spip/src/branch/master/couleurs_spip_pipelines.php

      Il y a d’autres plugins qui définissent de nouvelles règles textwheel pour définir de nouveaux raccourcis, et qui pourraient t’inspirer. Par exemple « Dame Blanche » https://plugins.spip.net/dame.html?compatible_spip=%2A mais il y en a d’autres (cherche « textwheel »).

    • Avant tout, tu devrais regarder par ici :
      Multilang

      Un seul article pour plusieurs langues.
      De fait, les documents et logo ne sont pas doublonnés.
      Tu complètes avec
      Menu de langues sous forme de liens

      et le visiteur peut passer d’un article français à sa version anglaise et inversement.

    • Merci beaucoup pour ces liens précieux... je suis une ancienne utilisatrice qui a commencé à utiliser spip il y a plus de 10 ans... et je viens tout juste de migrer sous spip 4... je ne suis pas bien au courant de toutes les évolutions qui ont eu lieux étant donné que je m’étais éloigné. Donc, un grand merci à vous pour ces conseils... la possibilité de gérer deux langues avec les même images étaient vraiment un gros problème il y a 10 ans.. très bonne nouvelle que vous m’apprenez ici !!

      Et j’avais pas essayé le plugin des couleurs.. je l’ai téléchargé ce matin pour essayer de comprendre comment il fonctionne en effet. avant de le poser sur le site en ligne... mais je m’étais dis que des fois, d’autres personnes avaient peut être des idées pour faire autrement...

      J’ai bien fait de poser la question. Ces informations vont être précieuses je pense !

      Encore un grand merci à vous tous !

    Répondre à ce message

  • 1

    Bonjour,
    bug sur la version 3.2.1 du plugin sur SPIP 3.2.11 (sous différentes versions PHP) avec tous les autres plugins désactivés.
    Erreur remontée : Warning : imageftbbox() : Could not find/open font in Website\plugins-dist\filtres_images\filtres\images_typo.php on line 577

    • Pour info, je suis en localhost quand je rencontre le bug, et ce bug ne semble pas se reproduire sur mon site distant.

    Répondre à ce message

  • 1

    Bonjour,
    Plugin très utile, mais qui manque de traduction en Anglais.
    J’en ai fait une pour moi, et je cherche maintenant à la partager pour les autres utilisateurs. Merci de m’indiquer comment.
    Et merci pour ce petit plugin tout sympa !

    • tu peux me l’envoyer par mail (monprenomsanstrema at monprenomsanstrema.net), je mettrais sur le serveur (et je vais programmer pour que le plugin soit sur trad.spip.net)

    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