SPIP-Contrib

SPIP-Contrib

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

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

Accueil > Navigation > Varicelle > Palette de boutons

Palette de boutons

27 octobre 2016 – par tetue – 1 commentaire

1
2
3
4
5
7 votes

Avec ce plugin, dans sa dernière version, vous bénéficiez d’une vingtaine de styles prédéfinis, combinables, pour former des boutons de couleurs et de tailles différentes :

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

  • Sémantique (V2) :
    • primary (peu utilisable correctement dans SPIP)
    • secondary (sans effet = par défaut)
    • success
    • info
    • warning
    • danger
    • light : pour redonner l’apparence d’un lien
    • disabled : s’applique automatiquement aux boutons inactifs
  • Couleurs disponibles :
    • purple
    • pink
    • red
    • orange
    • yellow
    • green
    • blue
    • black
    • gray
    • white
    • metal : façon alu brossé
    • spip : aux couleurs de SPIP (violet et or)
  • Tailles disponibles :
    • small
    • big
    • super
  • Formes disponibles (V2) :
    • circle : uniquement sur boutons carrés
    • expand : pour étendre à toute la largeur disponible

Voyez la demo !

Un tableau des principaux styles de boutons est disponible dans votre site SPIP :
-  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 des boutons de cette palette, dans votre feuille de style, par surcharge CSS. Par exemple, pour définir la couleur par défaut de vos boutons, en particulier ceux des formulaires générés par SPIP, déclarez [*] :

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, surchargez le style de .spip-admin .btn [*].

Notes

[*] Dans la V1 il fallait utiliser le sélecteur .submit (et non .btn introduit en V2), soit :

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

Dernière modification de cette page le 6 novembre 2016

Retour en haut de la page

Vos commentaires

  • Le 8 novembre 2017 à 07:44, par Michel En réponse à : Palette de boutons

    Bonjour,

    L’information précisée sur cette page sur les formes disponibles (V2) dont
    circle, précise "uniquement sur boutons carrés" alors que cette information n’est pas présente sur la page de Varicelle...qui permet le téléchargement des deux versions sans explication concernant les nouveautés de la V2...
    En effet avec la version 2.2.5 la forme de bouton qui devrait être circulaire « circle », est ovoïde, si vous l’utilisez comme les autres.
    Cordialement
    Michel
    http://laccreteil.fr

    Répondre à ce message

Répondre à cet article

Qui êtes-vous ?

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

  • ORR v2

    21 mai 2013 – 111 commentaires

    ORR, le plugin d’Organisation des Réservations et des Ressources passe en version 2, avec quelques nouveautés attendues. Je ne reprendrai pas les explications données dans la version 1. Les nouveautés : 1. Gestion des autorisations Le principe (...)

  • Social tags

    8 septembre 2008 – 448 commentaires

    Le plugin Social Tags permet d’ajouter des icônes de partage de liens vers les sites tels que Digg, Facebook, Delicious.... Une fois le plugin installé et activé (voir doc.), le choix des sites se fait via un menu de configuration. Insertion (...)

  • Mailshot

    16 janvier 2013 – 309 commentaires

    Ce plugin prend en charge l’envoi en nombre d’info-lettres par email. Mailshot permet l’envoi en nombre d’emails au moyen d’un SMTP (ou d’un service externe) dédié à cet effet. Il permet de limiter la cadence d’envoi. Enfin, ce plugin implémente la (...)

  • Visualiser un PDF dans un article

    13 juin – 9 commentaires

    SoyezCréateurs utilise un modèle pour afficher un PDF dans le corps d’un article Un peu d’histoire Avant, les navigateurs n’incluaient pas de lecteur PDF nativement ce qui avait conduit à la création du plugin Lecteur pdf javascript pdf.js. Mais, (...)

  • ScolaSPIP 4

    19 janvier 2016 – 346 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 (...)