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

Voir le sujet précédent Voir le sujet suivant Aller en bas

L'auteur de ce message est actuellement banni du forum - Voir le message

Résolu Re: Personnalisé les boutons " Valider , Envoyer , Prévisualiser "...

Message par quierra le Dim 13 Juin - 23:30

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.

quierra
****

Féminin
Messages : 278
Inscrit(e) le : 22/08/2007

http://themes-fa.com
quierra a été remercié(e) par l'auteur de ce sujet.

L'auteur de ce message est actuellement banni du forum - Voir le message

L'auteur de ce message est actuellement banni du forum - Voir le message

Résolu Re: Personnalisé les boutons " Valider , Envoyer , Prévisualiser "...

Message par quierra le Mer 16 Juin - 9:37

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.

quierra
****

Féminin
Messages : 278
Inscrit(e) le : 22/08/2007

http://themes-fa.com
quierra a été remercié(e) par l'auteur de ce sujet.

L'auteur de ce message est actuellement banni du forum - Voir le message

Résolu Re: Personnalisé les boutons " Valider , Envoyer , Prévisualiser "...

Message par quierra le Jeu 17 Juin - 14:46

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

quierra
****

Féminin
Messages : 278
Inscrit(e) le : 22/08/2007

http://themes-fa.com
quierra a été remercié(e) par l'auteur de ce sujet.

L'auteur de ce message est actuellement banni du forum - Voir le message

L'auteur de ce message est actuellement banni du forum - Voir le message

Résolu Re: Personnalisé les boutons " Valider , Envoyer , Prévisualiser "...

Message par quierra le Sam 19 Juin - 16:49

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.

quierra
****

Féminin
Messages : 278
Inscrit(e) le : 22/08/2007

http://themes-fa.com
quierra a été remercié(e) par l'auteur de ce sujet.

L'auteur de ce message est actuellement banni du forum - Voir le message

Résolu Re: Personnalisé les boutons " Valider , Envoyer , Prévisualiser "...

Message par quierra le Dim 20 Juin - 21:31

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.

quierra
****

Féminin
Messages : 278
Inscrit(e) le : 22/08/2007

http://themes-fa.com
quierra a été remercié(e) par l'auteur de ce sujet.

L'auteur de ce message est actuellement banni du forum - Voir le message

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum