Elison
26/02/2010, 22h32
Boutons "Nouveau sujet & Répondre au sujet" relooké - (Version simple)
Avec l'arrivée de vB4, sera-t-il encore possible de retrouver des boutons comme vous aimiez les créer dans vB3 ? Grâce à vB4, peut-on faire encore mieux ?
Libéré des contraintes des table tr td... vB4 nous offre une réelle possibilité d'avoir de vrais boutons design avec effet hover instantané ! Cela, peu importe la longueur du texte de bouton.
Présentation visuelle
Exemple pris avec le style par défaut de vB4, bouton "Ecrire un nouveau sujet"
12717
Exemple avec ce sets de CSS "Bouton CSS"
12718
Préambule
Pourquoi j'insiste sur le fait que ses boutons seront "avec effet hover instantané" ?
Lorsque nous choisissons d'avoir une image différente au moment du survol (hover), nous constatons toujours un délai d'affichage de cette dernière. Pourquoi ça ? Parce que cette image, affichée lors du survol du curseur de souris, n'a pas encore été chargée par le navigateur. Ce laps de temps d'affichage est assez désagréable.
Grâce au CSS, nous allons pouvoir rendre cet effet instantané.
Conception
Auteur du Set de CSS / Author Of CSS set: Elison
Version vBulletin Requise / Version vBulletin Required : vB 4.0.0
Testé / Tested: oui sous 4.0.2
Navigateurs testés et compatible : (dernière version) Firefox 3.6 / Google Chrome 4 / Safari 4 (Windows)
Nombre de templates par défaut modifiés: AUCUN
Template personnalisé: additional.css
Nombre de variables de style utilisé: 8
Installation
Auparavant, il vous faudra créer une image double état. Cette image aura à la fois l'état normal et l'état survolé (vous trouverez en pièce jointe une archive zip avec une image pour vos essais).
12719
Les images d'arrière-plan
Nous allons utiliser deux variables de style : "control_content_background" et "control_content_hover_background".
Dans l'éditeur de variable de style
- Direction vers "le menu de l'admin CP: Styles & Templates" > "Gérer les styles" > "votre style - menu déroulant: variables du style"
- Collez le nom de la variable "control_content_background" dans le champ "Rechercher une variable de style"
- Mettre les paramètres suivant, puis validez:
Couleur de fond: #538eaa
Image de fond: url(images/elison/buttons/bouton_css.gif) (sans mettre de ";" à la fin)
Image de fond répétée: Aucune répétition
Unités: rien
Image de fond décalage horizontal: left
Image de fond décalage vertical: top
12720
Dans l'éditeur de variable de style
- Collez le nom de la variable "control_content_hover_background" dans le champ "Rechercher une variable de style"
- Mettre les paramètres suivant, puis validez:
Couleur de fond: #6cb8ab
Image de fond: url(images/elison/buttons/bouton_css.gif) (sans mettre de ";" à la fin)
Image de fond répétée: Aucune répétition
Unités: rien
Image de fond décalage horizontal: left
Image de fond décalage vertical: bottom
12721
Cacher un élément du contenu
Nous allons maintenant supprimer le petit "+" qui se trouve devant chaque légende de boutons
- Direction vers "le menu de l'admin CP: Styles & Templates" > "Rechercher dans les templates" > "dans le style a modifier coller: additional.ccs"
- coller dans ce template la déclaration suivante:
/* Bouton CSS */
.newcontent_textcontrol span {
display:none;
}
Marges des boutons CSS
En fonction du design de votre image de fond, il faudra surement revoir les marges des légendes de bouton
Dans l'éditeur de variable de style
- Collez le nom de la variable "control_content_padding" dans le champ "Rechercher une variable de style"
- Mettre les paramètres suivant, puis validez:
Unités: px
Utiliser la valeur la plus élevée pour tous les côtés: non
Haut de page: 4
Droite: 10
Bas: 4
Gauche: 27
12722
Bordure des boutons CSS
Nous allons maintenant nous attaquer aux bordures de bouton. L'état normal dans un premier temps, puis l'état survolé dans un second.
Dans l'éditeur de variable de style
- Collez le nom de la variable "control_content_border" dans le champ "Rechercher une variable de style"
- Mettre les paramètres suivant, puis validez:
Unités: px
Largeur: 1
Style: solid
Couleur: #2f4456
12723
Nous allons réduire l'arrondi du bouton (à ce jour, uniquement pour les navigateurs Firefox 3.6, Chrome 4 & Safari 4)
Dans l'éditeur de variable de style
- Collez le nom de la variable "control_content_radius" dans le champ "Rechercher une variable de style"
- Mettre les paramètres suivant, puis validez:
Unités: px
Taille: 5
12724
Modifier l'ombrage des bordures de boutons (à ce jour, uniquement pour les négateurs Firefox 3.6, Chrome 4 & Safari 4)
Dans l'éditeur de variable de style
- Collez le nom de la variable "control_content_shadow_color" dans le champ "Rechercher une variable de style"
- Mettre le paramètre suivant, puis validez:
Couleur: #a0b6c5
Pour l'état survolé du bouton, nous remplacerons la couleur de bordure et la couleur de l'ombrage. Cette fois-ci nous n'utiliserons pas de variables de style, mais nous ajouterons directement une déclaration CSS dans le template "additional.css"
Dans le template additional.css
- coller dans ce template la déclaration suivante:
.newcontent_textcontrol:hover {
border-color: rgb(83,136,128);
-moz-box-shadow: 0 3px 8px #519fa6;
-webkit-box-shadow: 0 3px 8px #519fa6;
}
Légende de boutons
Pour ceux qui souhaiteraient modifier la couleur de police différemment dans les deux états
État normal
Dans l'éditeur de variable de style
- Collez le nom de la variable "control_content_color" dans le champ "Rechercher une variable de style"
- Mettre le paramètre suivant, puis validez:
Couleur: rgb(255, 255, 255)
État survolé
Dans l'éditeur de variable de style
- Collez le nom de la variable "control_content_hover_color" dans le champ "Rechercher une variable de style"
- Mettre le paramètre suivant, puis validez:
Couleur: rgb(107, 232, 89)
Afin de donner du contraste à une couleur de texte de même ton, vous pouvez ajouter un ombrage plus foncé à ce texte
Dans le template additional.css
- Ajoutez au sélecteur "newcontent_textcontrol:hover" la propriété et la valeur suivante :
text-shadow:1px 1px 7px #36524d;
Pour ceux qui souhaiteraient essayer ce jeu CSS "Boutons CSS" sans se prendre la tête, vous avez la possibilité de le faire une quelques secondes.
Télécharger le dossier "image" (voir en pièce jointe) à la racine de votre forum, puis Dans votre admin CP > Styles & Templates > Télécharger / Importer > Importation du fichier de style XML
Allez chercher le fichier XML "vbulletin-style-BoutonCSS.xml" (voir en pièce jointe)
Mettre les valeurs suivantes :
- Écraser un style ? (dans le menu déroulant) Créer un nouveau style
- Ignorer la version du style ? oui (si vous avez une version vB4 inférieur à 4.0.2), sinon non
- Titre du style importé: Test Boutons CSS
- le reste par défaut !
Prochainement, je vous ferai la version avancée de ses boutons CSS.
fichier zip
Avec l'arrivée de vB4, sera-t-il encore possible de retrouver des boutons comme vous aimiez les créer dans vB3 ? Grâce à vB4, peut-on faire encore mieux ?
Libéré des contraintes des table tr td... vB4 nous offre une réelle possibilité d'avoir de vrais boutons design avec effet hover instantané ! Cela, peu importe la longueur du texte de bouton.
Présentation visuelle
Exemple pris avec le style par défaut de vB4, bouton "Ecrire un nouveau sujet"
12717
Exemple avec ce sets de CSS "Bouton CSS"
12718
Préambule
Pourquoi j'insiste sur le fait que ses boutons seront "avec effet hover instantané" ?
Lorsque nous choisissons d'avoir une image différente au moment du survol (hover), nous constatons toujours un délai d'affichage de cette dernière. Pourquoi ça ? Parce que cette image, affichée lors du survol du curseur de souris, n'a pas encore été chargée par le navigateur. Ce laps de temps d'affichage est assez désagréable.
Grâce au CSS, nous allons pouvoir rendre cet effet instantané.
Conception
Auteur du Set de CSS / Author Of CSS set: Elison
Version vBulletin Requise / Version vBulletin Required : vB 4.0.0
Testé / Tested: oui sous 4.0.2
Navigateurs testés et compatible : (dernière version) Firefox 3.6 / Google Chrome 4 / Safari 4 (Windows)
Nombre de templates par défaut modifiés: AUCUN
Template personnalisé: additional.css
Nombre de variables de style utilisé: 8
Installation
Auparavant, il vous faudra créer une image double état. Cette image aura à la fois l'état normal et l'état survolé (vous trouverez en pièce jointe une archive zip avec une image pour vos essais).
12719
Les images d'arrière-plan
Nous allons utiliser deux variables de style : "control_content_background" et "control_content_hover_background".
Dans l'éditeur de variable de style
- Direction vers "le menu de l'admin CP: Styles & Templates" > "Gérer les styles" > "votre style - menu déroulant: variables du style"
- Collez le nom de la variable "control_content_background" dans le champ "Rechercher une variable de style"
- Mettre les paramètres suivant, puis validez:
Couleur de fond: #538eaa
Image de fond: url(images/elison/buttons/bouton_css.gif) (sans mettre de ";" à la fin)
Image de fond répétée: Aucune répétition
Unités: rien
Image de fond décalage horizontal: left
Image de fond décalage vertical: top
12720
Dans l'éditeur de variable de style
- Collez le nom de la variable "control_content_hover_background" dans le champ "Rechercher une variable de style"
- Mettre les paramètres suivant, puis validez:
Couleur de fond: #6cb8ab
Image de fond: url(images/elison/buttons/bouton_css.gif) (sans mettre de ";" à la fin)
Image de fond répétée: Aucune répétition
Unités: rien
Image de fond décalage horizontal: left
Image de fond décalage vertical: bottom
12721
Cacher un élément du contenu
Nous allons maintenant supprimer le petit "+" qui se trouve devant chaque légende de boutons
- Direction vers "le menu de l'admin CP: Styles & Templates" > "Rechercher dans les templates" > "dans le style a modifier coller: additional.ccs"
- coller dans ce template la déclaration suivante:
/* Bouton CSS */
.newcontent_textcontrol span {
display:none;
}
Marges des boutons CSS
En fonction du design de votre image de fond, il faudra surement revoir les marges des légendes de bouton
Dans l'éditeur de variable de style
- Collez le nom de la variable "control_content_padding" dans le champ "Rechercher une variable de style"
- Mettre les paramètres suivant, puis validez:
Unités: px
Utiliser la valeur la plus élevée pour tous les côtés: non
Haut de page: 4
Droite: 10
Bas: 4
Gauche: 27
12722
Bordure des boutons CSS
Nous allons maintenant nous attaquer aux bordures de bouton. L'état normal dans un premier temps, puis l'état survolé dans un second.
Dans l'éditeur de variable de style
- Collez le nom de la variable "control_content_border" dans le champ "Rechercher une variable de style"
- Mettre les paramètres suivant, puis validez:
Unités: px
Largeur: 1
Style: solid
Couleur: #2f4456
12723
Nous allons réduire l'arrondi du bouton (à ce jour, uniquement pour les navigateurs Firefox 3.6, Chrome 4 & Safari 4)
Dans l'éditeur de variable de style
- Collez le nom de la variable "control_content_radius" dans le champ "Rechercher une variable de style"
- Mettre les paramètres suivant, puis validez:
Unités: px
Taille: 5
12724
Modifier l'ombrage des bordures de boutons (à ce jour, uniquement pour les négateurs Firefox 3.6, Chrome 4 & Safari 4)
Dans l'éditeur de variable de style
- Collez le nom de la variable "control_content_shadow_color" dans le champ "Rechercher une variable de style"
- Mettre le paramètre suivant, puis validez:
Couleur: #a0b6c5
Pour l'état survolé du bouton, nous remplacerons la couleur de bordure et la couleur de l'ombrage. Cette fois-ci nous n'utiliserons pas de variables de style, mais nous ajouterons directement une déclaration CSS dans le template "additional.css"
Dans le template additional.css
- coller dans ce template la déclaration suivante:
.newcontent_textcontrol:hover {
border-color: rgb(83,136,128);
-moz-box-shadow: 0 3px 8px #519fa6;
-webkit-box-shadow: 0 3px 8px #519fa6;
}
Légende de boutons
Pour ceux qui souhaiteraient modifier la couleur de police différemment dans les deux états
État normal
Dans l'éditeur de variable de style
- Collez le nom de la variable "control_content_color" dans le champ "Rechercher une variable de style"
- Mettre le paramètre suivant, puis validez:
Couleur: rgb(255, 255, 255)
État survolé
Dans l'éditeur de variable de style
- Collez le nom de la variable "control_content_hover_color" dans le champ "Rechercher une variable de style"
- Mettre le paramètre suivant, puis validez:
Couleur: rgb(107, 232, 89)
Afin de donner du contraste à une couleur de texte de même ton, vous pouvez ajouter un ombrage plus foncé à ce texte
Dans le template additional.css
- Ajoutez au sélecteur "newcontent_textcontrol:hover" la propriété et la valeur suivante :
text-shadow:1px 1px 7px #36524d;
Pour ceux qui souhaiteraient essayer ce jeu CSS "Boutons CSS" sans se prendre la tête, vous avez la possibilité de le faire une quelques secondes.
Télécharger le dossier "image" (voir en pièce jointe) à la racine de votre forum, puis Dans votre admin CP > Styles & Templates > Télécharger / Importer > Importation du fichier de style XML
Allez chercher le fichier XML "vbulletin-style-BoutonCSS.xml" (voir en pièce jointe)
Mettre les valeurs suivantes :
- Écraser un style ? (dans le menu déroulant) Créer un nouveau style
- Ignorer la version du style ? oui (si vous avez une version vB4 inférieur à 4.0.2), sinon non
- Titre du style importé: Test Boutons CSS
- le reste par défaut !
Prochainement, je vous ferai la version avancée de ses boutons CSS.
fichier zip