[phpbb2] Changer le style des champs, boutons et menus dérou

Suite à la mise en place de la version phpbb3, je me suis dit qu'il est possible de changer le style des champs d'écritures, boutons et menus déroulants, donc voici l'astuce.

Premièrement, voici les balises et classes de ces champs, boutons et menus déroulants, ainsi que ce à quoi ils correspondent.

Les balises
input : Balise pour faire des champs à une ligne ainsi que des boutons (l'attribut type détermine la forme).
textarea : C'est la balise des champs à plusieurs lignes, comme celui où vous écrivez vos messages par exemple
select : C'est la balise pour faire des menus déroulants (ex : Sauter vers, Outils de modération, etc.)

...Et les classes
.post : Cela correspond aux champs que l'on a quand on rédige un message ou édite son propre profil. On le retrouve avec les balises input (champs à une ligne) et textarea
.button : Correspond aux boutons des BBCode lorsqu'on rédige un message ou édite sa signature
.mainoption : Correspond aux bouton "Prévisualisation", "Envoyer" et "Connexion"
.liteoption : Correspond aux autres boutons qui ne sont pas mentionnés ci-dessus (exclut celui de la fenêtre des smilies qui n'a aucune classe particulière qui y est rattachée)

Il n'y a aucune classe particulière pour les balises select


Donc, si on veut changer des champs/boutons ayant une classe particulière, voici donc les possibilités de ce que vous pouvez mettre/modifier dans votre feuille :

[list][*]input => Champs et boutons sans exception
[*]textarea => Tous les champs de texte multilignes sans exception
[*]select => Tous les menus déroulants sans exception
[*]input.post => Tous les champs d'une ligne associées à la class .post
[*]textarea.post => Tous les champs multilignes associées à la class .post
[*]input.button => Tous les boutons associées à la class .button
[*]input.mainoption => Tous les boutons associées à la class .mainoption
[*]input.liteoption => Tous les boutons associées à la class .liteoption

Vous pouvez donc changer le style de ces champs/boutons/listes séparément, comme mettre un fond différent, modifier la bordure, etc.

Ben oui, on peut modifier la bordure, si on est écoeuré de la traditionnelle bordure par défaut !

Par exemple, je veux que mes champs, boutons et listes aient une belle bordure unie et colorée qui "fitte" avec le design du forum ^^

Alors, on y va avec un exemple. Étant donné qu'on va avoir à modifier plusieurs balises/classes d'un coup, on les place les uns à la suite des autres, en les séparant d'une virgule.

Code:

input, textarea, select
{
 border: #555555 1px solid;
}

Ici j'ai décidé que la bordure allait être unie de couleur gris foncé avec une épaisseur de 1 pixel.

Ensuite, tiens j'aimerais bien mettre une texture au lieu d'une simple couleur unie. Mais je ne veux pas la même texture pour les champs que pour les boutons, et je ne veux pas de texture pour les menus déroulants.

Dans ce cas-là, on va ajouter de nouvelles lignes en reprenant les balises, mais avec les classes cette fois. On va décider que tous les boutons auront le même fond.

Here we go !

Code:

input.button, input.mainoption, input.liteoption
{
 background-image: url(http://monsite.com/fond_bouton.png);
}

Ensuite, là on s'attaque aux champs unilignes et multilignes. On mettra le même fond pour ces deux types de champs.

Code:

input.post, textarea.post
{
 background-image: url(http://monsite.com/fond_champs.png);
}

Mais là, si je veux mettre un dégradé horizontal pour mes boutons et un dégradé vertical pour mes champs, j'aimerais qu'ils ne se répètent d'un sens. Pensez-y un peu, surtout si vous aviez déjà fixé l'arrière-plan de votre forum !

Ben oui, il suffit juste d'ajouter l'attribut background-repeat et d'y mettre repeat-x (répétition horizontale) ou repeat-y (répétition verticale), ou même no-repeat (aucune répétition) !

On revient à notre css et on fait les ajouts !

Code:

input.button, input.mainoption, input.liteoption
{
 background-image: url(http://monsite.com/fond_bouton.png);
 background-repeat: repeat-x;
}
input.post, textarea.post
{
 background-image: url(http://monsite.com/fond_champs.png);
 background-repeat: repeat-y;
}

Voilà, notre dégradé pour les boutons ne se répétera qu'horizontalement, et celui des champs ne se répétera que verticalement ! Bien sûr, pour une question d'esthétique, il faudra que vous ayez mis la même couleur de fond que celui de la fin du dégradé

On fait donc ce changement !

Code:

input.button, input.mainoption, input.liteoption
{
 background-image: url(http://monsite.com/fond_bouton.png);
 background-repeat: repeat-x;
 background-color: #cccccc;
}
input.post, textarea.post
{
 background-image: url(http://monsite.com/fond_champs.png);
 background-repeat: repeat-y;
 background-color: #dddddd;
}

Voilà, ça commence à avoir de l'allure ! Voici donc le code complet qu'on a jusqu'à maintenant :

Code:

input, textarea, select
{
 border: #555555 1px solid;
}
input.button, input.mainoption, input.liteoption
{
 background-image: url(http://monsite.com/fond_bouton.png);
 background-repeat: repeat-x;
 background-color: #cccccc;
}
input.post, textarea.post
{
 background-image: url(http://monsite.com/fond_champs.png);
 background-repeat: repeat-y;
 background-color: #dddddd;
}

On a donc nos bordures et fonds personnalisés.
Mais tiens, j'aimerais donc ça avoir un "rollover" sur mes champs et boutons. C'est possible en ajoutant :hover à la fin de chaque class !

Pour notre exemple, on va foncer et épaissir la bordure des champs et on va mettre un dégradé inversé à nos boutons !

On y va !

Code:

input.post:hover, textarea.post:hover
{
 border: #222222 2px solid;
}
input.button:hover, input.mainoption:hover, input.liteoption:hover
{
 background-image: url(http://monsite.com/fond_bouton2.png);
 background-repeat: repeat-x;
}

On obtient donc ce code au final !

Code:

input, textarea, select
{
 border: #555555 1px solid;
}
input.button, input.mainoption, input.liteoption
{
 background-image: url(http://monsite.com/fond_bouton.png);
 background-repeat: repeat-x;
 background-color: #cccccc;
}
input.post, textarea.post
{
 background-image: url(http://monsite.com/fond_champs.png);
 background-repeat: repeat-y;
 background-color: #dddddd;
}
input.post:hover, textarea.post:hover
{
 border: #222222 2px solid;
}
input.button:hover, input.mainoption:hover, input.liteoption:hover
{
 background-image: url(http://monsite.com/fond_bouton2.png);
 background-repeat: repeat-x;
}

Et voilà, j'espère que ce tuto vous aura été utile ^^