É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 pas SPIP, auxquels ce sélecteur doit son nom.
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 :
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 même 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.
Des 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’administrations 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
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.
varicelle.zip
Vos commentaires
# 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
# Le 9 décembre 2011 à 18:59, par tetue
En réponse à : Varicelle
Il faudrait voir le code. A quelle URL peut-on voir la page avec ces boutons ?
# Le 9 décembre 2011 à 19:27, par gregol
En réponse à : Varicelle
voilà le lien :
http://www.chapuisat.com/x/spip.php...
mais j’ai repassé les boutons en gris et noir (:hover)
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
# Le 18 juin 2010 à 16:16, par Suske
En réponse à : Varicelle
Youpie, je vais verdir/embellir mes boutons !
Merci tetue !
Répondre à ce message
# Le 14 juin 2010 à 22:08, par KMk
En réponse à : Varicelle
Bonjour,
Je testerai dès que j’aurai un peu de temps... d’ores et déjà, je peux dire que j’aime beaucoup le nom de ce plugin !! J’espère seulement que ces boutons... ne seront pas trop contagieux ! Surtout le gros rose ;-P...
KMk
# Le 14 juin 2010 à 22:11, par KMk
En réponse à : Varicelle
... et tant pis pour les navigateurs « rétrogrades »... <( : !o)
KMk
Répondre à ce message