les Boutons

[tyane]

Bonjour
j'ai un forum PHPBB3
et les Boutons comme ce forme:



J'ai aimé les boutons située dans le Forum forum.forumactif.com
et je veux le code css pour ces les boutons



s'il vous plaît

[Psyaliah]

Bonjour,
Pour faire ces boutons, il faut en créer le fond, et donc remplacé l'image de votre forum, par l'image d'un fond similaire.
Cependant, ce qui est sur FA, appartient à FA.

[tyane]

mais comment s'il vous plait

[Psyaliah]

Dans votre CSS, il faut mettre ceci:

Code:

input {
background-image: url("lien de l'image de fond");
border: solid 1px #b6b6b6; /* Remplacer le code couleur par celui voulu */
height: 30px; /* Hauteur de l'image de fond */
color: #ffffff; /* Couleur du texte */
}

input:hover { /* Survol du boutton *§
color: #b6b6b6; /* Couleur du texte quand on survole */
border: solid 1px #ff0066; /* Couleur de la bordure au survol */
}

[tyane]

pas encor ma soeur

[Psyaliah]

Pouvez vous copier votre code CSS s'il vous plait ?
Et ma famille est déja complète, merci.

[tyane]

voilà

Code:

    #quick_reply #text_editor_controls {
        background-color: #E5F1F9;
        border-radius: 8px 8px 8px 8px;
        height: 22px;
        margin-left: auto;
        margin-right: auto;
        padding: 5px;
        width: 490px;
    }
    #quick_reply #text_editor_controls .button2 {
        background-color: transparent;
        background-image: none;
        border: 0 none;
        border-radius: 7px 7px 7px 7px;
        opacity: 0.7;
        padding: 1px !important;
    }
    #quick_reply a.button2:hover, #quick_reply button.button2:hover {
        background-color: #DCEAF5 !important;
        border: 0 none;
        opacity: 1 !important;
    }
    #quick_reply button.bbcode.button2 {
        background-color: #E3CED2 !important;
        box-shadow: 0 0 10px #E3ADAD;
        opacity: 1;
    }
    #quick_reply button.bbcode:hover {
        background-color: #E3CED2;
    }
    #servimg_upload_gui p {
        margin: 0 !important;
    }
    #servimg_upload_gui iframe {
        border: 0 none;
        margin: 0;
    }
    #servimg_upload_gui, div#color.select, div#img.select, div#other.select, div#sel_smilies.select, div#url.select {
        box-shadow: 0 0 4px;
    }


.post {
        background-image: url(http://2img.net/i/fa/optimisation_fdf/fr/bg_post_staff.png);
        background-repeat: no-repeat;
        background-position: bottom center;
        }


.navbar ul{border-bottom:none;}

input {
        background-image: url(http://i41.servimg.com/u/f41/16/61/53/37/12-05-12.png);
        border: solid 1px color: #0099CC;
        height: 20px;
        color: #767676;
        }

  input:hover {
        color: #0099CC;
        border: solid 1px #767676;
        }


[tyane]

le seul que va changer c'est text box

[Psyaliah]

Vous vous êtes trompé dans la taille, c'est 22 et non 20.
De plus, vous avez rajouter un "color:" inutile dans la propriété input.

Code:

input {
        background-image: url(http://i41.servimg.com/u/f41/16/61/53/37/12-05-12.png);
        border: solid 1px #0099CC;
        height: 22px;
        color: #767676;
        }
 
  input:hover {
        color: #0099CC;
        border: solid 1px ##767676;
        }

Avec ce code, ça fonctionne très bien sur mon forum test.

[tyane]

je crois j'ai un problème dans mon forum.

[Psyaliah]

Essayez ceci:

Code:

input.button1 {
        background-image: url(http://i41.servimg.com/u/f41/16/61/53/37/12-05-12.png);
        border: solid 1px #0099CC;
        height: 22px;
        color: #767676;
        }
 
  input.button1:hover {
        color: #0099CC;
        border: solid 1px ##767676;
        }

[tyane]

un peut

[tyane]

Code:

border: solid 1px ##767676;

j'ai suppr #

ça marche pour le bouton Envoyer mais les reste par encor

[Psyaliah]

Bah oui mais vous avez déja un css pour les "button 2"
Et la bordure n'a rien à voir avec le problème.

Code:

input.button1.button2 {
        background-image: url(http://i41.servimg.com/u/f41/16/61/53/37/12-05-12.png);
        border: solid 1px #0099CC;
        height: 22px;
        color: #767676;
width: auto;
        }
 
  input.button1.button2:hover {
        color: #0099CC;
        border: solid 1px ##767676;
        }

[tyane]

merci