SPIP-Contrib

SPIP-Contrib

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

289 Plugins, 197 contribs sur SPIP-Zone, 131 visiteurs en ce moment

Accueil > Navigation > Varicelle > Varicelle

Varicelle

14 juin 2010 – par tetue – 28 commentaires

26 votes

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 :

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 :

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.

Voir en ligne : http://plugins.spip.net/varicelle

P.-S.

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

Dernière modification de cette page le 10 novembre 2016

Retour en haut de la page

Tout afficher

Vos commentaires

  • Le 14 avril à 11:38, par Fennec72 En réponse à : Varicelle

    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

    1. [{texte de mon lien}->702]

    Merci d’avance,

    Cordialement,

    Hervé

    Répondre à ce message

  • Le 13 mars à 03:33, par RP En réponse à : Varicelle

    J’aimerais pouvoir utiliser un bouton varicelle avec bloc déplié du couteau suisse en guise de #BLOC_TITRE. Comment faire ? Merci

    Répondre à ce message

  • Le 7 novembre 2017 à 10:59, par Michel En réponse à : Varicelle

    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

  • Le 23 octobre 2016 à 13:00, par Michel En réponse à : Varicelle

    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

    • Le 23 octobre 2016 à 13:10, par tetue En réponse à : Varicelle

      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 23 octobre 2016 à 14:11, par Michel En réponse à : Varicelle

      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

    • Le 23 octobre 2016 à 15:12, par Maïeul En réponse à : Varicelle

      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.

    • Le 23 octobre 2016 à 16:05, par Michel En réponse à : Varicelle

      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

    • Le 23 octobre 2016 à 18:07, par Michel En réponse à : Varicelle

      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

    • Le 23 octobre 2016 à 18:17, par tetue En réponse à : Varicelle

      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.

    • Le 23 octobre 2016 à 20:36, par Michel En réponse à : Varicelle

      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

    • Le 23 octobre 2016 à 20:45, par tetue En réponse à : Varicelle

      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.

    • Le 24 octobre 2016 à 07:41, par Michel En réponse à : Varicelle

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

    Répondre à ce message

  • Le 15 octobre 2013 à 10:38, par Fennec72 En réponse à : Varicelle

    Comment appliquer un modèle de couleurs varicelle à tous les boutons submit du site, sans devoir retoucher tous les formulaires du dossier formulaires des squelettes ?

    Dit plus simplement :
    comme choisir un modèle varicelle comme submit par défaut ?

    Merci d’avance

    • Le 23 octobre 2016 à 13:15, par tetue En réponse à : Varicelle

      Mieux vaut répondre tard que jamais (pardon, ce message m’avait échappé) : nul besoin de modifier les formulaires de SPIP, puisque ce plugin en style les boutons ! En effet, les styles de Varicelle s’appuient sur le sélecteur CSS en usage dans SPIP.

    Répondre à ce message

  • Le 23 janvier 2014 à 09:00, par Francois En réponse à : Varicelle

    J’ai installé un bouton sur une page du site internet pour qui renvoie les visiteurs cliquant dessus vers un autre site.

    Jusque là tout fonctionne, le bouton renvoie bien les visiteurs vers ce second site, mais ce dernier nécessite une authentification pour y accéder, c’est à ce moment que le problème survient .. un message d’erreur de type :

    Etat HTTP 404 - /uPortal/Login%5D
    type Rapport d’état
    message /uPortal/Login%5D
    description La ressource demandée n’est pas disponible.
    Apache Tomcat/6.0.37

    Pour infos j’ai mis dans mon article cette balise (Après visualisation je ne peux mettre la balise)
    J’ai donc mis la balise présent dans la partie « utilisation dans les squelettes » avec href ...

    Actuellement le site et sous spip 3.0.13.

    J’ai testé de mettre le lien vers ce site sans le bouton et là tout fonctionne correctement, une idée d’où peut provenir le problème ??

    • Le 23 janvier 2014 à 09:24, par Francois En réponse à : Varicelle

      Après avoir cherché un bon moment ... c’est quand je me décide à rédiger un message que je trouve la solution. Une erreur dans le code s’était glissée .... Désolé !!

    Répondre à ce message

  • Le 30 août 2012 à 14:27, par Hervé En réponse à : Varicelle

    Bonjour,

    J’utilise les boutons varicelle dans une barre en haut de certains articles avec des squelettes SarkaSpip et j’ai des un menu de rubriques déroulant dans mon en-tête.
    Or les menus se déroulent sous les boutons (en arrière plan)... comment faire pour ramener le menu au premier plan ?

    Un exemple de page :
    http://www.fol.infini.fr/ufolep29/spip.php?rubrique15

    Répondre à ce message

  • Le 9 décembre 2011 à 17:12, par gregol En réponse à : Varicelle

    Bonjour,
    Je ne comprend pas pourquoi j’ai un rose pastel et non le rose magenta de la démo ?
    Et comment faire des boutons SMALL depuis la feuille de style ?
    A bientôt,
    G

    Répondre à ce message

  • Le 29 juillet 2010 à 19:05, par Nestor En réponse à : Varicelle

    Oups ! Cette contrib a l’air très chouette mais je n’arrive pas à la faire fonctionner (sur SPIP 2.0.10 [14698]). J’ai essayé de vider le cache et tout et tout, mais rien.

    Par contre en incluant la feuille de style varicelle.css directement dans inc-head (à la main) tout baigne.

    Je tenais juste à signaler le problème...

    En tout cas merci pour ces jolis boutons !

    • Le 26 août 2010 à 16:54, par tetue En réponse à : Varicelle

      La balise #INSERT_HEAD (et #INSERT_HEAD_CSS) est-elle bien présente dans le head de tes squelettes ? Elle est indispensable au bon fonctionnement des plugins.

    • Le 18 septembre 2010 à 20:39, par Nestor En réponse à : Varicelle

      J’utilise effectivement #INSERT_HEAD dans mes pages.

      J’avais classé le problème comme résolu pourtant une nouvelle étrangeté me surprend aujourd’hui sur le même site web, actuellement en dev.

      Je voulais tester le tout nouveau plugin bandeau, et là PAF, tout s’affiche correctement mais sans les styles : je me rends compte que les CSS des plugins ne sont jamais chargés, et ce aussi bien dans l’espace privé que sur le site public (ce qui est étonnant vu que je n’ai pas touché aux squelettes privés).

      A noter qu’entre temps j’ai mis à jour SPIP vers la 2.1.1.

      Pour #INSERT_HEAD_CSS, le problème demeure, que la balise soit présente ou non. Je n’avais jamais entendu parler de cette balise. Il me semblait que #INSERT_HEAD chargeait déjà les css, non ?

      En tout cas merci pour votre aide. Je vais aller voir sur les forums s’il n’y a pas déjà quelque chose à ce sujet, qui concerne plus SPIP que ce plugin en particulier.

    Répondre à ce message

  • Le 20 juin 2010 à 23:57, par SRDEV En réponse à : Varicelle

    Petit plugin simple et utile

    merci au developpeur

    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

  • Formidable, le générateur de formulaires

    23 janvier 2012 – 2464 commentaires

    Un générateur de formulaires facilement configurable pour les non-informaticiens et facilement extensible pour les développeurs. Introduction L’objectif était de créer un plugin permettant de générer des formulaires. Historiquement, 2 plugins (...)

  • Éditorial (HTML5UP)

    27 novembre 2017 – 77 commentaires

    Squelette SPIP pour intégrer le modèle Editorial de HTML5UP https://html5up.net/editorial Configuration La page de configuration permet quelques réglages. On y défini la couleur principale du site, des informations de contact et le contenu de la (...)

  • SPIP 400 - Gestion des erreurs HTTP

    23 mars 2012 – 13 commentaires

    Ce plugin tente de compléter la distribution de SPIP en proposant des modèles de pages d’erreur HTTP (codes 401 et 404) avec un texte explicatif et la possibilité pour l’internaute de transmettre un « ticket de bug » au webmestre du site. (...)

  • ScolaSPIP 4

    19 janvier 2016 – 347 commentaires

    ScolaSPIP est plugin-squelette responsive personnalisable pour sites Web d’établissements scolaires basé sur SPIPr Présentation de ScolaSPIP Ce plugin pour SPIP 3 est développé par la Dane de l’académie de Versailles pour les webmestres de cette (...)

  • Mots arborescents

    12 octobre 2015 – 15 commentaires

    Ce plugin permet de gérer une arborescence de mots-clés. La configuration d’un groupe de mots dispose d’une nouvelle option pour autoriser pour ce groupe les arborescences de mots-clés. Dans ces groupes, des mots enfants peuvent être créés pour (...)