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

2 participants

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 Lun 14 Juin 2010 - 1: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

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 Mer 16 Juin 2010 - 11: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

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 Jeu 17 Juin 2010 - 16:46

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

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 Sam 19 Juin 2010 - 18:49

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

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

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

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 Dim 20 Juin 2010 - 23: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

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

- Sujets similaires

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