Personnalisé les boutons " Valider , Envoyer , Prévisualiser "...

[Diabolo34]

Bonsoir à tous,

Je voudrez personnalisé mes boutons " Valider , Envoyer , Prévisualiser... "
Je suis en version phpbb2 et je suis le fondateur parce que mes boutons sont très moche !
En voici une capture d'écran :



Pouvez - vous m'aider savoir comment faire s'il vous plait ?

Merci d'avance de votre aide

[quierra]

Coucou, pour personnaliser ces boutons, tu dois passer par ton css.

Affichage --> Couleurs --> Onglet feuille de style CSS

Pour prévisualiser, brouillon, aller, etc... :

input.liteoption {
background-color : #d9e5f5;
background-image: url('adresse de l'image');
background-position: top;
font-weight : bold;
color: #000;
}

/* si image au survol*/

input.liteoption:hover {
background-color : #d9e5f5;
background-image: url('adresse de l'image');
background-position: top;
font-weight : bold;
color: #000;
}

Pour envoyer etc...

input.mainoption {
background-color : #d9e5f5;
background-image: url('adresse de l'image');
background-position: top;
font-weight : bold;
color: #000;
}


/* si image au survol*/

input.mainoption:hover {
background-color : #d9e5f5;
background-image: url('adresse de l'image');
background-position: top;
font-weight : bold;
color : #000;
}

A modifier selon ton forum, j'ai mis partout "font-weight: bold;" car certains boutons comme "prévisualiser" ne sont pas en gras et donc
difficilement visible s'il y a une image de fond.

[Diabolo34]

Merci. C'est pour personnalisé mes boutons sa mes enfaite je veut pas sa. Désolé. Je voudrez des boutons du genre jolie (comme eux de forumactif)

[Diabolo34]

up

[quierra]

Coucou, et bien il te suffit de mettre l'image de fond que tu veux afin de les rendre "joli" !

On met en général l'image d'un simple dégradé par trop voyant qui correspond bien avec son forum.

Sur le FDF, tu as aussi un dégradé en fond et un réglage de couleur et bordure pour le survol.

Bonne journée.

[Diabolo34]

Sa veut dire votre codage css je peut faire comme je veut (même comme FDF) ?! Juste à régler le codage ?!

[quierra]

Coucou, mais oui bien sur, tu mets les couleurs, bordures et images que tu veux.

[Diabolo34]

Pouvez - vous m'aider dans le codage css je suis pas très fort !
Exemple : background-position: top; > Veut dire...

[Diabolo34]

up

[quierra]

Coucou, en fait tu fais une petite image d'un dégradé de la couleur que tu souhaites, exemple :



Elles font 30 pixels sur 30 pixels, c'est suffisant, la deuxième est pour l'image au "hover" donc au suvol.

Maintenant, tu peux ou non spécifier la position qu'aura l'image.

- Top = en haut, l'image partira du haut

- Bottom = en bas, l'image partira du bas

- Left = gauche, l'image partira alors de la gauche

- Right = droite, l'image partira aors de la droite

Tu peux aussi spécifier, en haut et centré :

position: top center;

en bas et à droite :

position: bottom right ;

etc....

Pour faire simple je te mets des commentaires :

input.liteoption {
background-color : #d9e5f5; /* couleur de fond (au cas ou l'image ne s'affiche pas) */
background-image: url('adresse de l'image'); /* adresse de l'image */
background-position: top; /* position de l'image */
font-weight : bold; /* pour mettre la police en gras */
color: #000; /* couleur de la police */
}

/* si image au survol*/

input.liteoption:hover {
background-color : #d9e5f5; /* couleur de fond (au cas ou l'image ne s'affiche pas) */
background-image: url('adresse de l'image'); /* adresse de l'image */
background-position: top; /* position de l'image */
font-weight : bold; /* pour mettre la police en gras */
color: #000; /* couleur de la police */
}

input.mainoption {
background-color : #d9e5f5; /* couleur de fond (au cas ou l'image ne s'affiche pas) */
background-image: url('adresse de l'image'); /* adresse de l'image */
background-position: top; /* position de l'image */
font-weight : bold; /* pour mettre la police en gras */
color: #000; /* couleur de la police */
}


/* si image au survol*/

input.mainoption:hover {
background-color : #d9e5f5; /* couleur de fond (au cas ou l'image ne s'affiche pas) */
background-image: url('adresse de l'image'); /* adresse de l'image */
background-position: top; /* position de l'image */
font-weight : bold; /* pour mettre la police en gras */
color: #000; /* couleur de la police */
}

Bonne journée.

[Diabolo34]

Merci dernière question !
Mes boutons ont un gros contour noir comment le retirée s'il vous plait ?
Mettre un contour de 1 px merci d'avance

[quierra]

Coucou, et bien tu rajoutes à chacun des codes cette ligne :

border: none;

si tu ne veux pas de contour, si jamais ça ne prennait pas, tu mets :

border: none !important;

Maintenant si tu veux une bordure d'une autre couleur et style tu mets :

border: 1px dotted #FFF;

Là c'est une bordure de 1 px en pointillé de couleur blanche.

Pour trouver le style de bordure qui te conviendrait regarde ici :

http://fr.html.net/tutorials/css/lesson11.asp

Si tu veux une bordure différente au "hover" (survol), tu mets autres couleurs et style.

Bonne soirée.

[Diabolo34]

Merci Beaucoup