Texte agrandi ou pleine page

Le plugin boutonstexte

Publié le : 14 novembre 2006 – Dernière modification le 16 mai 2022 – par support, toggg – 125 commentaires

1
2
3
4
5
36 votes
Un plugin client qui pose ou équipe tout seul des boutons dans le texte pour gérer la taille des caractères ou passer le texte en pleine page

Motivations

Insérer des boutons dans le texte pour

  • augmenter/diminuer la taille de la police de caractères,
  • voir le texte en pleine page.

Tout cela

  • en cliquant juste sur installer le plugin sans toucher à rien d’autre

Installation

C’est un plugin. Il faut donc être en 1.9

Tout se fait coté client en javascript new wave, il faut donc une 1.9.2 sinon avoir le plugin jQuery

Le zip pour spip 1.9.0 à 2.1.x boutonstexte des snapshots de la zone ou le zip pour spip 3.0.0 à 3.2.x boutonstexte des snapshots de la zone fournit un dossier plugins/boutonstexte/ à poser dans votre spip/plugins/

Ensuite, allez dans configuration/administrer les plugins ( ecrire/?exec=admin_plugin ) et validez Boutons dans le Texte

Vous pouvez aussi l’obtenir en svn

Réglages

A priori aucun.

Par défaut, les boutons sont insérés dans un span de classe boutonstexte, chacun ayant sa propre classe textonly, textsizeup et textsizedown juste avant chaque élément de classe texte.

Il est aussi possible de spécifier soi même des boutons « fixes », il suffit qu’ils aient les classes textsizeup et textsizedown. Dans ce cas, boutonstexte n’insèrera pas de boutons avant les zones de texte et le click agira sur toutes ces mêmes zones.
Note au 24/12 : ce n’est que dans la version en développement et ça n’est pas encore fait pour le bouton « texte seulement »

Vous pouvez changer les images utilisées en icones.
izo propose des alternatives

Plusieurs règlages sont possible en affectant des propriétés de boutonstexte en javascript juste avant </head> comme par exemple, pour chercher toutes les zones de classe texte et pas seulement celles dans la div id contenu :

<script type="text/javascript">boutonstexte.selector = ".texte";</script>

Si vous êtes en 1.9.2 ou suivantes, installez cfg. Vous pourrez alors effectuer ces réglages directement depuis le lien donné dans administration plugins lorsque on ouvre le « chapitre » Boutons dans le texte. Cette méthode est conseillée, elle évite toute intervention dans le code.

Propriétés Défaut Description Notes
selector #contenu .texte Sélecteur jQuery/CSS des éléments affectés, défaut : les classes texte descendantes de l’id contenu
imgPath plugins/boutonstexte/images Chemin des icones
rate 1.2 Ratio (nombre réel) d’augmentation/diminution des tailles de police, le défaut correspond à 20%
txtOnly Texte seulement Titre du bouton pour n’afficher que le texte 1,2
txtBackSpip Retour à Spip Titre du bouton pour retour affichage complet 1
txtSizeUp Augmenter police Titre du bouton pour augmenter la taille des caractères 1,2
txtSizeDown Diminuer police Titre du bouton pour augmenter la taille des caractères 1,2
  1. Texte traduit (fr, de, it au 24/12), si affecté doit être en séquences Array javascript
  2. Mis à blanc comme boutonstexte.txtXXX = ""; : inhibe le bouton correspondant

Extensions

Ce plugin se marie très bien avec Crayons

Essayez l’édition pleine page :)

zip boutonstexte pour spip 1.9.0 à 2.1.x sur plugins.spip.net
zip boutonstexte pour spip 3.0.0 à 3.2.x sur plugins.spip.net

Discussion

5 ans 1 an 3 mois Sans limite
par date
Filtrer

54 discussions

  • Matéo

    Bonjour,

    Perso, le plugin marche nickel. Toutefois je trouve l’emplacement mal choisis et je ne trouve pas comment les changer... Ils se trouvent pour ma part à cheval entre le fond et l’article. J’aimerais donc les « descendre » un peu.
    Voir un exemple

    Merci en tout cas pour ce plugin que je trouve très pratique.

    Répondre à ce message

  • interceptor

    Bonjour
    Je suis sous sarka spip ... et je n’arrive pas à faire fonctionner ce plugin
    je suis en version SPIP 1.9.2d [11132] | Sarka-SPIP 2.0.2 [16931]
    J’ai du louper quelques choses !! tous mes autres plugin fonctionnent bien sauf celui là
    Quelqu’un peut m’aider ?
    http://touchfrance.fr

    Répondre à ce message

  • 1
    Rémi Castérès

    Bonjour,

    J’ai trouvé deux défauts à ce plugin très intéressant :

    -  la trop grande ressemblance des boutons agrandir et diminuer la police ;
    -  le fait qu’ils ne s’appliquent qu’à une partie de l’écran - pas l’en-tête, pas au texte des forums, pas aux brèves, etc.

    Mais bravo à vous qui l’avez fait !

    Rémi Castérès

    • Loiseau2nuit

      Ce remerciement risque d’avoir du mal à parvenir à son destinataire mais je suis sûr que de là-haut, c’est lui qui te remercie de l’utiliser et de l’apprécier :)

      pour info : ici et là ...

    Répondre à ce message

  • isi

    EXCUSEZ moi pour ce deuxième poste (le premier ayant ignoré certains caractères)

    Bonjour,

    Je n’arrive pas a le faire marcher sur mon site (en locale sur WAMP5).
    Avec le squelette standard de SPIP, pas de problème (Ça marche très bien) mais avec le mien il marche seulement avec les titres des documents et ceux des images.
    Les images "A" et "rectangulaire" du plugin s’affiche automatiquement mais hélas...

    Mon squelette j’ai ceci :

    - Juste avant </head> (la fin du HEAD) :

    <INCLURE{fond=inc-head}>

    <INCLUREfond=inc-head>

    - Dans la partie BODY il ya des tableaux et dans la cellule réservée à l’affichage du contenu de l’article j’ai ceci :

    [(#REM) Contenu principal : contenu de l'article ]
<div id="contenu">
[(#LOGO_ARTICLE|left||reduire_image{350})]

#DEBUT_SURLIGNE
[<div class="#EDIT{chapo} chapo">(#CHAPO|justifier)</div>]
<br class="nettoyeur" />
[<div class="#EDIT{texte} texte">(#TEXTE|image_reduire{400,0})</div>]
#FIN_SURLIGNE 
</div><!-- fin contenu -->

    - Résultat à l’affichage : Seuls les titres et les descriptions des images et documents sont sensible au changement de taille.

    Je pioche depuis 2 jours et toujours le même résultat.
    N’étant fort en CSS, je me contente pour le moment de faire mon squelette avec les tableaux plutôt que de reprendre le squelette par défaut de spip qui lui marche pourtant.

    Merci de m’aider

    Répondre à ce message

  • isi

    Bonjour,

    Je n’arrive pas a le faire marcher sur mon site (en locale sur WAMP5).
    Avec le squelette standard de SPIP, pas de problème (Ça marche très bien) mais avec le mien il marche seulement avec les titres des documents et ceux des images.
    Les images « A » et « rectangulaire » du plugin s’affiche automatiquement mais hélas...

    Mon squelette j’ai ceci :

    -  Juste avant

    (la fin du HEAD) :

    -  Dans la partie BODY il ya des tableaux et dans la cellule réservée à l’affichage du contenu de l’article j’ai ceci :

    [(#REM) Contenu principal : contenu de l’article ]

    [(#LOGO_ARTICLE|left||reduire_image350)]

    #DEBUT_SURLIGNE
    [

    (#CHAPO|justifier)

    ]

    [

    (#TEXTE|image_reduire400,0)

    ]
    #FIN_SURLIGNE

    -  Résultat à l’affichage : Seuls les titres et les descriptions des images et documents sont sensible au changement de taille.

    Je pioche depuis 2 jours et toujours le même résultat.
    N’étant fort en CSS, je me contente pour le moment de faire mon squelette avec les tableaux plutôt que de reprendre le squelette par défaut de spip qui lui marche pourtant.

    Merci de m’aider

    Répondre à ce message

  • windvins

    Hello,

    j’ai installé ce plugin, mais il ne fonctionne pas sur mon site. Je n’ai pas réussi à trouver la documentation associée à son utilisation.

    Quelqu’un peut-il m’expliquer quelles sont les lignes de codes à rajouter dans mon squelette article ? Enfin bref toutes les modifs à faire. Faut’il changer le nom de ma div qui contient les articles ?

    Je vous remercie d’avance pour votre aide.

    Répondre à ce message

  • jean christophe

    Bonjour

    D’abord bravo et merci pour ce plugin. Simple à installer et à paramétrer.
    Mon petit souci vient du fait que lorsqu’on a cliqué sur un bouton, les pointillés du focus apparaissent et ça fait ... moche.

    Comment les enlever ?

    J’ai essayé avec outline : none ; mais ça ne donne rien

    J’ai vu aussi l’utilisation de onfocus=this.blur() sur un lien mais là pas de lien

    Donc je sèche

    Répondre à ce message

  • 5
    Birdy

    Bonjour,

    Voilà un outil bien utile. J’ai installé les boutons dans un cadre comme sur cette page même. Je les ai placés dans un span avec les classes textsizeup et textsizedown. J’ai indiqué #global.texte dans le sélecteur. Mais rien n’y fait, les boutons restent muets...

    Je suis sous spip 1.9.2b et j’ai cfg.

    Ai-je loupé une étape ? Une piste ?

    Merci,
    Birdy

    • Birdy

      J’ai oublié le lien pour l’exemple...

      http://www.sante-environnement.be

    • Birdy

      Bon, c’est résolu. J’avais bêtement appliqué un span alors qu’il suffisait d’appliquer la class directement dans la balise IMG...

      Par contre, les deux boutons down et up apparaissent bien là où ils devraient, mais le bouton textonly, qui devrait avoir disparu, est toujours présent dans mes div. Je n’en ai pas besoin... Comment l’enlever ?

    • Birdy

      Résolu. Décidément, il suffit de lire la doc en étant bien réveillé... Désolé.

    • allsecurite

      moi sur 1.9.3 dev, j’suis obligé de rajouter <script type="text/javascript">boutonstexte.selector = ".texte";</script> pour que cela fonctionne ?!!

    • allsecurite

      bonjour ,

      moi sur 1.9.3 dev, j’suis obligé de rajouter <script type="text/javascript">boutonstexte.selector = ".texte";</script> pour que cela fonctionne ?!!

    Répondre à ce message

  • 10
    Guignol

    Bonjour !
    Je sais Togg va me tuer... Avant de poster j’ai bien entendu regardé avec attention vos petits ennuis. Je pensais avoir compris le foncionnement de ce plugin ! Ben non !

    Je précise ! Mes squelettes personnels sont les squelettes originaux de SPIP. J’ai juste enlevé quelques appels de boucles, ajouté d’autres...
    Ensuite, j’ai réalisé un copié coller de l’abillage CSS original de SPIP et j’ai modifié à ma sauce les CSS. Vous voyez, je suis partisant du moindre effort. Et surtout, pourquoi modifier en profondeur un truc qui fonctionne à merveille ? Réalisé par des pros !
    Donc en ajoutant le plugin de Togg (avec les précisons que je viens d’apporter) je devais voir les petits affichages de police immédiatement. Non !
    Pourtant, lorsque je désactive mes CSS et que je repasse en affichage original de SPIP, alors à ce moment le plugin fonctionne. Et il s’agit bien de mes squelettes modifiés.
    Je me suis dit qu’il manquait l’appel CSS dans les miens !
    Les squelettes eux fonctionnent mais pas mes CSS. Logique !
    Donc j’ai réalisé un copié/coller du CSS boutons dans mon fichier CSS.

    /* boutonstexte.css de Togg */
    .boutonstexte
    float : right ;

    .boutonstexte button
    position:relative ;
    top : -10px ;
    padding : 0 ;
    border : 1px transparent solid ;
    background-color : transparent ;

    .textsizeup, .textsizedown, .textonly
    cursor : pointer ;

    .boutonstexte button:hover
    border : 1px red solid ;

    .boutonstexte button img
    behavior:url(win_png.htc) ;

    div.onlytext
    text-align : [(#LANG_DIR|choixsiegalltr,left,right)] ;
    margin:0 auto !important ;
    border:0 !important ;
    padding:0 !important ;
    float : none !important ;
    color : black ;
    width:19cm !important ;
    font-size : 1em ;

    div.onlytext p
    padding-bottom:0.5em !important ;

    .onlytext_wrapper
    text-align:center !important ;
    font-size : 76% ;
    background-color:white ;

    Pas mieux. Et lorsque je repasse en habillage de SPIP parfait ! Donc j’ai loupé une explication.

    PS : Tu le sais Togg mais je le rappel ici, je suis sur Mac et Firefox

    • toggg

      Pas de provo, s’il te plait. D’abord c’est toggg, 3 « g » et pas de majuscule.

      J’ai pas tout compris où était ton problème.

      Ceci dit, il y a plusieurs discussions, le modèle d’insertion de boutonstexte est naze.
      Ça va changer tout en restant compatible.

      Précises ta demande...

    • Je vais essayé d’être plus court !

      Les boutons de réglages « les petits A » n’apparaissent pas avec mes squelettes affichés avec et mon fichier CSS, alors qu’ils apparaîssent et fonctionnent avec mes squelettes et mon fichier CSS désactivé.
      Je conclu que le problème n’est donc pas dans le squelette mais dans le fichier CSS.

      Mais cela n’a pas l’air non plus d’être la bonne explication...

      Je sèche !

    • toggg

      Ça doit être ton sélecteur.

      Si donc tu es en 1.9.1 , regardes les commentaires et l’explication pour gauler les bonnes depuis un <script> juste avant ton </head>.

    • Guignol

      Non non ! Je suis bien passé en SPIP 1.9.2 et j’ai bien placé ce sript à tout hasard...

      <script type="text/javascript">boutonstexte.selector = ".texte";</script>

      Bien que je ne fonctionne pas avec des squelettes « Alternatives ».

      Par contre sur un autre site, je suis en squelettes Alternatives j’ai placé le script là où il fallait et ton plugin fonctionne parfaitement. Vraiment sur ce coup là ! Je bloque

    • toggg

      boutonstexte est absolument indépendant de la distrib.

      Pour tout dire, il marche aussi hors spip.

      Je ne suis absoluement pas responsable de la dérive introduite par jacky, si il a eu des problèmes avec Alternatives, c’est seulement du à son incapacité. Pas incapacité à récupérer ce qu’on lui a dit d’ailleurs...

      As-tu une url ? Je pourrais regarder quel sélecteur il te faut.

      Je pense changer les choses pour qu’elle soient plus faciles. Déjà, si tu as cfg, on peut paramétrer en direct.

    • Guignol

      Donc voici la solution apportée par toggg !

      Si vous utilisez un squelettes « Alternatives » vous devez nous l’avons déjà vu plusieurs fois dans ces différents fils. Ajouter avant la balise < /head> le script déjà nommé.

      <script type="text/javascript">boutonstexte.selector = ".texte";</script>

      Mais avant ce dernier, vous devez également avoir #INSERT_HEAD si cela n’est déjà pas le cas !

      Bien sur, si vous n’utilisez pas de squelettes « Alternatives », vous n’avez pas besoin du script, par contre vous devez veillez à bien avoir #INSERT_HEAD.

      Pour moi cela fonctionne. Ne me demandez pas pourquoi ?

    • Merci pour cette synthèse concernant l’usage des squelettes « Alternatives » ; grâce à elle je viens de régler mon pb d’affichage.

    • Marco

      J’ai ajouté la ligne

      <script type="text/javascript">boutonstexte.selector=".texte";</script>

      à la fin du fichier styles.html et ça marche partout. Merci pour le tuyau.

    • rémi

      he bien pour ma part, je suis un gros blaireau car ça fait 2h que j’éssaie en vain

      comment tu l’intègre au squelette alternatives ?

    • rémi

      désolé, y’avait la solution dans le forum

      ça marche

    Répondre à ce message

  • 4
    middir

    Salut,

    Tout d’abord trés bonne contrib . Mais je rencontre quelques problemes :(

    -  J’arrive a afficher les boutons sur la homepage mais apres 1 ou 2 refresh ils disparaissent :( et réapparaissent aléatoirement.

    -  Je n’arrive pas a afficher les boutons sur la page rubrique ou article (dans mon dossier squelettes).

    Je suis sous spip 1.9.2a .

    Dans l’attende d’avoir une aide,

    Amicalement,

    middir

    • Alexandra

      Une des méthodes possible consiste à définir ton bloc conteneur pour les boutons texte, si tu ne travailles pas sur la dist. Tu peux aller dans le plugin puis dans teteboutonstexte.php. Et tu personnalise la ligne selector 'selector' => '#main .texte', si ta div centrale s’appelle main, ou autre.

      Tu peux aussi le faire avec CFG sinon.

    • middir

      Alexandra,

      Merci de ta réponse.

      J’avais déja toucher ce fichier en question. le problem c’est que j’ai des ID de div differentes sur la homepage et article et rubrique.

      En mettant le meme nom partout cela ne s’affiche tjs que sur la homepage et pas sur le reste g passer 3 heures dessu je vois pas ou g loupé le coche.

      Merci de ton aide.

      j’attends de te lire,

      Amicalement,

    • b_b

      Bonsoir,

      Comme te le conseille Alewxandra, installe le plugin CFG. Ainsi tu pourras accéder à la page de configuration du plugin Texte agrandi ou pleine page.

      Dans la page de configuration on peut définir le sélecteur du plugin. Vu que tu as des ID différentes sur chaque squelettes de ton site, tu peux très bien utiliser une class comme sélecteur au lieu d’une ID (txtag par exemple). Comme ça tous les éléments portant cette classe seront affichés avec les boutons de texte.

      Bon courage ++

    • middir

      Bon,

      je me réponds et je remercie les personnes qui m’ont aidé :) !!

      Alors le pb venais de la réecriture d’url , j’utilise l’arborescence virtuelle . Dans les articles et rubrique le JQuery.js étais appelé a la racine du dossier virtuel. Donc ce que j’ai fait , au lieu d’utiliser #INSERT_HEAD je l’ai mis en dur avec les liens correct pour les differents js.

      Je sais ke c’est pas élégant mais c’est la meilleur solution que j’ai trouvé pour le moment. (si certain d’entre vous on une autre méthode je suis preneur :) )

      En espérant que cela pourra aider certain d’entre vous.

      merci pour cette contrib.

      SPIP POWWWWAAAA !!!! :)

      middir

    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