Varicelle 1

De jolis boutons : séduisants, légers et performants, pour styler tous les boutons du site.

Éruption de boutons ! Aussitôt activé, ce plugin transforme en bouton tout ce qui porte le sélecteur CSS .submit, en particulier les boutons des formulaires générés par SPIP, auxquels ce sélecteur doit son nom.

Utilisation dans les squelettes

Pour créer de nouveaux boutons dans vos squelettes, c’est très simple : il suffit d’ajouter le sélecteur .submit sur vos boutons (<button> ou <input>) ou sur vos liens (<a>), pour les métamorphoser en jolis boutons.

Vous bénéficiez alors d’une douzaine de styles prédéfinis, pour former des boutons de couleurs et de tailles différentes. Par exemple :

<a href="#" class="submit pink big">Gros bouton rose</a>

Tailles et couleurs peuvent être combinées entres elles :

  • Tailles disponibles :
    • small
    • big
    • super
  • Couleurs disponibles :
    • pink
    • red
    • orange
    • yellow
    • green
    • blue
    • black
    • gray
    • white

Vous pouvez facilement personnaliser ces définitions de tailles et couleurs, en CSS, dans votre feuille de style.

Deux styles spéciaux sont disponibles à part (non combinables) :

  • metal : en alu brossé façon Mac
  • spip : aux couleurs de SPIP (violet et or)

Notez que, si vos squelettes en contiennent, les boutons d’administration du site public sont impactés par ce plugin, qui propose donc un habillage spécifique simplifié pour ceux-ci. Si besoin, modifiez le style de .spip-admin .submit.

Voyez la demo !

Un tableau des principaux styles de boutons est disponible sous la forme d’un modèle.
-  Affichez la page de démo : ?page=demo/varicelle
-  Ou insérez le modèle <varicelle|>, dans un article par exemple
-  Si vous utilisez ZPIP, affichez directement ?page=varicelle

Personnalisation CSS

Vous pouvez personnaliser l’apparence de ces boutons en CSS, dans la feuille de style de votre site. Par exemple, pour définir la couleur par défaut de vos boutons :

.submit { background-color: pink; }
.submit:hover { background-color: red; }

Caractéristiques techniques : CSS3 avant-gardiste

Ce plugin tire profit des propriétés CSS3 pour proposer un habillage des boutons efficace, séduisant, léger et performant.

Cette méthode à base de CSS permet d’embellir les boutons à peu de frais, sans plomber la performance contrairement à toutes les méthodes habituelles à base de découpe d’images et de scripts. C’est là son avantage principal : elle est légère.
De plus, ce plugin la rend excessivement simple d’emploi.

Mais il faut préciser son inconvénient : reposant sur des propriétés CSS avant-gardistes, encore peu implémentées, ce plugin ne donnera le meilleur de lui-même que dans les navigateurs les plus modernes, c’est-à-dire les plus courants heureusement, et pas Internet Explorer. Ce plugin ne convient donc pas aux partisans d’un rendu graphique identique dans tous les navigateurs.

Cette contrib s’inspire de diverses autres, notamment listées à cette page : 20 CSS3 Tutorials and Techiques for Creating Buttons.

Discussion

3 discussions

  • 10

    Bonjour,
    Après la mise à jour de ce jour (Version : 1.1.2 SVN [100073]) les boutons ne sont plus visibles... exemple sur notre première page pour accéder à autres pages, que ce soit celle concernant les accès au lac ou celles ou sont regroupées nos photos sur les thèmes suivants CHAMPIGNONS 🍄 - LICHENS - MOUSSESFAUNE AQUATIQUE 🐟GRAPHISME ⬜INSECTES 🐞MAMMIFÈRES 🐰OISEAUX 🐦PAYSAGES & ARCHITECTURE 🌇PLANTES 🌳 sur notre site sur notre site http://laccreteil.fr (les boutons ont disparu)
    Faut-il changer quelque chose pour permettre l’inclusion de boutons pour créer des accès à des pages dans les articles ?
    Bien cordialement.
    Michel
    http://laccreteil.fr

    • Effectivement, la feuille de style n’est pas appelée… c’est étrange, car il n’y a pas eu de modification en cela. Est-ce que le plugin est bien activé sur ce site ?

    • Le plugin est bien activé... et c’est lors de la mise à jour vers la nouvelle version...
      En pièce jointe, capture faite à l’instant.
      merci.
      Michel

    • il y avait un bug dans la génération du zip, cette version 1.1.2 était du coup bugué.
      La version 1.1.3, qui sera disponible à la mise à jour vers 18h30 normalement, devrait résoudre le problème.

    • Bien vu votre réponse.... dans l’attente de 18H30 pour tester la nouvelle version 1.1.3 sans bug dans la génération du zip.
      Merci beaucoup !
      Michel

    • Merci et bravo, maintenant c’est OK...
      Il est vrai qu’avec de beaux boutons, c’est beaucoup mieux !
      Bien sincèrement.
      Michel
      http://laccreteil.fr

    • Oh mais y’a plein de boutons sur ton site ! Et oui c’est mieux désormais :)
      Sorry pour le dysfonctionnement et merci du signalement.

    • J’ai intégré Emoji et symboles dans mes textes pour boutons, mais lorsque je ne trouve pas, je souhaiterais pouvoir mettre des éléments graphiques ou symboles (dessin, photo, vectoriel, etc.) est-ce prévu pour une évolution future, en particulier pour orienter vers des thématiques 🔭 ?
      Michel
      http://laccreteil.fr

    • Pour des boutons illustrés il existe bien des façons de faire… Non, aucune en particulier ne sera proposée par ce plugin, qui se veillera plutôt à laisser ouvertes toutes les possibilités.

    • Avez-vous un tutoriel à conseiller pour effectuer cette intégration avec des « IMG » ou « EMB » sur le serveur du site sous SPIP ?

    • Mieux vaut répondre tard que jamais, suite à ta question, j’ai ajouté des exemples de boutons avec pictos : Des boutons dans vos squelettes.

    Répondre à ce message

  • 1

    Bonjour,
    Avec la version 2.2.5 il y a une forme de bouton qui devrait être circulaire « circle », mais est ovoïde.
    Michel

    Répondre à ce message

  • 1

    Bonjour,

    Je n’arrive pas à avoir un bouton varicelle sur un lien dans un article.

    dans ce cas précis, je voudrais un bouton small et orange sur le lien interne

    [{texte de mon lien}->702]

    Merci d’avance,

    Cordialement,

    Hervé

    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