boutons et survol de la souris

[emc2]

Détails techniques

Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://forumfrance.forumactif.fr/

Description du problème

Bonjour,

Existe t-il une solution pour modifier l'apparence des boutons du forum lorsque l'on passe la souris dessus sans même devoir cliquer ?
Les boutons concernés sont tous ceux qu'un forum propose:
(répondre, verrouillé, nouveau, citer, éditer, effacer, etc ...)
Mo, objectif serait d'harmoniser l'ensemble des boutons dans leur apparence statique et dynamique.
Merci par avance.

[stefou]

Bonjour,
Il te faudra créer un bouton dynamique pour chaque boutons concernés.
Ensuite, même principe que ton menu, retrouver tous les id de tes boutons concernés et utilisé le même code que ton menu en ajoutant les id et images dynamiques pour chaque boutons concernés.
Je pense de mémoire que le bouton "citation multiple" à un id différant à chaque message, il faudra donc un autre code pour ceux là.

[emc2]

J'ai compris le principe. Ou est-ce que l'on peut retrouver les id de chaque bouton ?

[stefou]

Sous Chrome,
Click droit sur le bouton, inspecter l'élément.
Tu y trouvera en surlignement la ligne du code pour le bouton ou ce trouve soit l'id soit la class
Si c'est un id tu utiliseras dans ton code css

Code:

#nom_de_l'id:hover {
    background-image: url('Adresse de l'image')!important;}

Si c'est une class tu utilises

Code:

.nom_de_la_class:hover {
    background-image: url('Adresse de l'image')!important;}

Pour le bouton citation multiple il faut un autre code.
Si tu veux je regarde dans la journée pour te le donner.
Ont a le temps tu as déjà pas mal de boulot pour les autres

[emc2]

C'est clair ! Je vais déjà attaquer sur ceux là.
Merci. Je reviens ici dès que j'ai testé le truc.

... Bizarrement, ça ne fonctionne pas. (C'est une class) et en plus, ça a supprimé l'icône qui suit le speudo du dernier posteur pour renvoyé au dernier message posté.

screen:

[emc2]

Désolé de poster à nouveau aussi rapidement, mais c'est une véritable cata ! Les annonces défilantes ne fonctionnent plus (elles restent fixes sur la gauche de la page), les icônes de derniers message ne s'affichent pas, la toolbar a disparue, les bbcodes également ont disparus. D'ailleurs ils n'apparaissent pas non plus sur ce forum (forum des forum). Je me demande bien ce qui ce passe !

Je mets mon CSS en complet ici:

Code:

/* encadrement charte et lois */
.charte{
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
box-shadow: 10px 10px 10px #615f5f;
border: 5px solid #0e0ef5;
background-color: #c9cbf0;
}
/* encadrement regle de jeu */
.jeu{
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
box-shadow: 0px 0px 0px #615f5f;
border: 3px solid #7cba2c;
background-color: #ececec;
}
.hljs {
  display: inline-block;
  padding: 0.5em;
  color: #333;
  background: #f8f8f8;
}
 
.hljs-comment,
.hljs-template_comment,
.diff .hljs-header,
.hljs-javadoc {
  color: #998;
  font-style: italic;
}
 
.hljs-keyword,
.css .rule .hljs-keyword,
.hljs-winutils,
.javascript .hljs-title,
.nginx .hljs-title,
.hljs-subst,
.hljs-request,
.hljs-status {
  color: #333;
  font-weight: bold;
}
 
.hljs-number,
.hljs-hexcolor,
.ruby .hljs-constant {
  color: #099;
}
 
.hljs-string,
.hljs-tag .hljs-value,
.hljs-phpdoc,
.tex .hljs-formula {
  color: #d14;
}
 
.hljs-title,
.hljs-id,
.coffeescript .hljs-params,
.scss .hljs-preprocessor {
  color: #900;
  font-weight: bold;
}
 
.javascript .hljs-title,
.lisp .hljs-title,
.clojure .hljs-title,
.hljs-subst {
  font-weight: normal;
}
 
.hljs-class .hljs-title,
.haskell .hljs-type,
.vhdl .hljs-literal,
.tex .hljs-command {
  color: #458;
  font-weight: bold;
}
 
.hljs-tag,
.hljs-tag .hljs-title,
.hljs-rules .hljs-property,
.django .hljs-tag .hljs-keyword {
  color: #000080;
  font-weight: normal;
}
 
.hljs-attribute,
.hljs-variable,
.lisp .hljs-body {
  color: #008080;
}
 
.hljs-regexp {
  color: #009926;
}
 
.hljs-symbol,
.ruby .hljs-symbol .hljs-string,
.lisp .hljs-keyword,
.tex .hljs-special,
.hljs-prompt {
  color: #990073;
}
 
.hljs-built_in,
.lisp .hljs-title,
.clojure .hljs-built_in {
  color: #0086b3;
}
 
.hljs-preprocessor,
.hljs-pragma,
.hljs-pi,
.hljs-doctype,
.hljs-shebang,
.hljs-cdata {
  color: #999;
  font-weight: bold;
}
 
.hljs-deletion {
  background: #fdd;
}
 
.hljs-addition {
  background: #dfd;
}
 
.diff .hljs-change {
  background: #0086b3;
}
 
.hljs-chunk {
  color: #aaa;
}
/*IMAGE ACCUEIL*/
#i_icon_mini_index{
  background-image:url(http://i39.servimg.com/u/f39/19/00/20/97/button10.png);/*image si la souris ne survole pas*/
  width:80px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
  background-position: 0;
}
#i_icon_mini_index:hover{
  background-image:url(http://i39.servimg.com/u/f39/19/00/20/97/button11.png); /*image si la souris survole*/
  width:80px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
}
/*IMAGE CALENDRIER*/
#i_icon_mini_calendar{
  background-image:url(http://i39.servimg.com/u/f39/19/00/20/97/button12.png); /*image si la souris ne survole pas*/
  width:100px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
  background-position: 0;
}
#i_icon_mini_calendar:hover{
  background-image:url(http://i39.servimg.com/u/f39/19/00/20/97/button13.png); /*image si la souris survole*/
  width:100px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
}
/*IMAGE gallery*/
#i_icon_mini_gallery{
  background-image:url(http://i39.servimg.com/u/f39/18/86/39/02/galeri10.png);/*image si la souris ne survole pas*/
  width:64px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
  background-position: 0;
}
#i_icon_mini_gallery:hover{
  background-image:url(http://i39.servimg.com/u/f39/19/04/22/29/galeri10.png); /*image si la souris survole*/
  width:64px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
}
/*IMAGE FAQ*/
#i_icon_mini_faq{
  background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button14.png'); /*image si la souris ne survole pas*/
  width:42px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
  background-position: 0;
}
#i_icon_mini_faq:hover{
  background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button15.png'); /*image si la souris survole*/
  width:42px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
}
/*IMAGE RECHERCHE*/
#i_icon_mini_search{
  background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button16.png'); /*image si la souris
ne survole pas*/
  width:102px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
  background-position: 0;
}
#i_icon_mini_search:hover{
  background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button17.png'); /*image si la souris survole*/
  width:102px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
}
/*IMAGE MEMBRES*/
#i_icon_mini_members{
  background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button18.png'); /*image si la souris ne survole pas*/
  width:84px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
  background-position: 0;
}
#i_icon_mini_members:hover{
  background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button19.png'); /*image si la souris survole*/
  width:84px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
}
/*IMAGE GROUPES*/
#i_icon_mini_groups{
  background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button21.png'); /*image si la souris ne survole pas*/
  width:72px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
  background-position: 0;
}
#i_icon_mini_groups:hover{
  background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button22.png'); /*image si la souris survole*/
  width:72px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
}
/*IMAGE PROFIL*/
#i_icon_mini_profile{
  background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button23.png'); /*image si la souris ne survole pas*/
  width:60px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
  background-position: 0;
}
#i_icon_mini_profile:hover{
  background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button24.png'); /*image si la souris survole*/
  width:60px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
}
/*IMAGE MP (pas de nouveaux messages)*/
#i_icon_mini_message{
  background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button25.png'); /*image si la souris ne survole pas*/
  width:90px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
  background-position: 0;
}
#i_icon_mini_message:hover{
  background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button26.png'); /*image si la souris survole*/
  width:90px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
}
/*IMAGE MP (nouveaux messages)*/
#i_icon_mini_new_message{
  background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button27.png'); /*image si la souris ne survole pas*/
  width:90px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
  background-position: 0;
}
#i_icon_mini_new_message:hover{
  background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button28.png'); /*image si la souris survole*/
  width:90px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
}
/*IMAGE DECONEXION*/
#i_icon_mini_logout{
  background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button29.png'); /*image si la souris ne survole pas*/
  width:116px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
  background-position: 0;
}
#i_icon_mini_logout:hover{
  background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button30.png'); /*image si la souris survole*/
  width:116px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
}
/*IMAGE S'ENREGISTRER*/
#i_icon_mini_register{
  background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button31.png'); /*image si la souris ne survole pas*/
  width:88px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
  background-position: 0;
}
#i_icon_mini_register:hover{
  background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button32.png'); /*image si la souris survole*/
  width:88px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
}
/*IMAGE CONNEXION*/
#i_icon_mini_login{
  background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button33.png'); /*image si la souris ne survole pas*/
  width:96px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
  background-position: 0;
}
#i_icon_mini_login:hover{
  background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button34.png'); /*image si la souris survole*/
  width:96px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
}
div#fa_toolbar {
    background-color: #050f66;  /* Couleur de fond */
    border-radius: 0 0 50px 50px;  /* Arrondis les bords de la toolbar */
    box-shadow: 0 0 30px #050f66;  /* Affiche une ombre */
    margin: auto;  /* Centre la toolbar */
    width: 98%;  /* Modifie la longueur de la toolbar */
}
 
div#fa_toolbar div, div#fa_toolbar span {
    margin: 0 15px;  /* Repositionne correctement le contenu de la toolbar */
}
/* Icônes couleur dans la palette */
 
.color-option {
display: inline-block !important;
width: 15px !important;  /* largeur de l'icône couleur */
height: 15px !important;  /* hauteur de l'icône couleur */
border: 2px solid #fff !important;  /* cadre blanc sur l'icône couleur */
margin: 3px !important;  /* espace entre chaque icône */
box-shadow: 0 0 2px #778899;  /* ombre */
cursor: pointer !important;
}
.color-option span{
display: block !important;
width: 15px !important;  /* largeur de l'icône couleur */
height: 15px !important;  /* hauteur de l'icône couleur */
}
.color-option, .color-option span {
border-radius: 2px;  /* arrondi */ 
}
 
/* Palette complète - la largeur influence le nombre d'icônes affichées */
.sceditor-dropdown.sceditor-color-picker {
width: 200px !important;  /* largeur de la palette complète */
height: 100px !important;  /* hauteur de la palette complète */
padding: 5px !important;
border-radius: 5px !important;
}

Le lien du forum: http://forumfrance.forumactif.fr/

[stefou]

Cela vient de chez toi.
Car chez moi tout est ok

Par contre pour l'icone peux-tu me donner le code que tu as placé

[emc2]

Pour nouveau: j'ai mis " i_post "
pour répondre, j'ai mis " i_reply "
pour citer: " i_icon_quote "

[stefou]

J'ai testé cela fonctionne.

Code:

      .i_post{
            background-image: url('Adresse de l'image statique')!important;}
      .i_post:hover{
            background-image: url('Adresse de l'image dynamique')!important;}

Ne pas oublier de retirer l'image placé dans le panneau admin --> affichage--> images

[Xoomi34]

Cela dépend comment tu veux les changer, tu peux les changer par une autre image au survol, ou encore même avec une opacité, etc ...
Ce n'est pas très compliqué, pour tes boutons, ils ont tous une images ?
Pour chaque bouton, il y a une class :

Spoiler:

Il suffit de rajouter dans votre CSS ceci par exemple:

Code:

.i_post:hover {
contenu CSS lors du survol
}

[emc2]

Ok, je vais tenter cela dans la soirée après le dîner, et je reviendrais ici pour donner le résultat.
Pour les autres problèmes, effectivement, c'est revenu à la normal quand je me suis déconnecté et reconnecté.
Pour les images, j'ai une image sans survol, et une autre avec survol.
L'image sans survol étant mise par défaut dans le TA et la gestion des images "bouton du forum"

... Je reviens tout à l'heure.

[emc2]

Verdict:
Ca ne fonctionne toujours pas.
Dans le meilleur des cas, j'ai l'image "statique" et quand je passe la souris dessus, elle reste, et le bouton est opérant.
Et lorsque je supprime l'image dans TA> affichage > image, le bouton "Nouveau" disparaît et il n'est plus accessible sur le forum.
Je n'ai pas essayé avec les autres boutons car je suppose que c'est la même chose. je pense que j'ai un truc qui ne va pas sur mon CSS.

Code:

/* encadrement charte et lois */
.charte{
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
box-shadow: 10px 10px 10px #615f5f;
border: 5px solid #0e0ef5;
background-color: #c9cbf0;
}
/* encadrement regle de jeu */
.jeu{
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
box-shadow: 0px 0px 0px #615f5f;
border: 3px solid #7cba2c;
background-color: #ececec;
}
.hljs {
  display: inline-block;
  padding: 0.5em;
  color: #333;
  background: #f8f8f8;
}
 
.hljs-comment,
.hljs-template_comment,
.diff .hljs-header,
.hljs-javadoc {
  color: #998;
  font-style: italic;
}
 
.hljs-keyword,
.css .rule .hljs-keyword,
.hljs-winutils,
.javascript .hljs-title,
.nginx .hljs-title,
.hljs-subst,
.hljs-request,
.hljs-status {
  color: #333;
  font-weight: bold;
}
 
.hljs-number,
.hljs-hexcolor,
.ruby .hljs-constant {
  color: #099;
}
 
.hljs-string,
.hljs-tag .hljs-value,
.hljs-phpdoc,
.tex .hljs-formula {
  color: #d14;
}
 
.hljs-title,
.hljs-id,
.coffeescript .hljs-params,
.scss .hljs-preprocessor {
  color: #900;
  font-weight: bold;
}
 
.javascript .hljs-title,
.lisp .hljs-title,
.clojure .hljs-title,
.hljs-subst {
  font-weight: normal;
}
 
.hljs-class .hljs-title,
.haskell .hljs-type,
.vhdl .hljs-literal,
.tex .hljs-command {
  color: #458;
  font-weight: bold;
}
 
.hljs-tag,
.hljs-tag .hljs-title,
.hljs-rules .hljs-property,
.django .hljs-tag .hljs-keyword {
  color: #000080;
  font-weight: normal;
}
 
.hljs-attribute,
.hljs-variable,
.lisp .hljs-body {
  color: #008080;
}
 
.hljs-regexp {
  color: #009926;
}
 
.hljs-symbol,
.ruby .hljs-symbol .hljs-string,
.lisp .hljs-keyword,
.tex .hljs-special,
.hljs-prompt {
  color: #990073;
}
 
.hljs-built_in,
.lisp .hljs-title,
.clojure .hljs-built_in {
  color: #0086b3;
}
 
.hljs-preprocessor,
.hljs-pragma,
.hljs-pi,
.hljs-doctype,
.hljs-shebang,
.hljs-cdata {
  color: #999;
  font-weight: bold;
}
 
.hljs-deletion {
  background: #fdd;
}
 
.hljs-addition {
  background: #dfd;
}
 
.diff .hljs-change {
  background: #0086b3;
}
 
.hljs-chunk {
  color: #aaa;
}
/*IMAGE ACCUEIL*/
#i_icon_mini_index{
  background-image:url(http://i39.servimg.com/u/f39/19/00/20/97/button10.png);/*image si la souris ne survole pas*/
  width:80px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
  background-position: 0;
}
#i_icon_mini_index:hover{
  background-image:url(http://i39.servimg.com/u/f39/19/00/20/97/button11.png); /*image si la souris survole*/
  width:80px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
}
/*IMAGE CALENDRIER*/
#i_icon_mini_calendar{
  background-image:url(http://i39.servimg.com/u/f39/19/00/20/97/button12.png); /*image si la souris ne survole pas*/
  width:100px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
  background-position: 0;
}
#i_icon_mini_calendar:hover{
  background-image:url(http://i39.servimg.com/u/f39/19/00/20/97/button13.png); /*image si la souris survole*/
  width:100px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
}
/*IMAGE gallery*/
#i_icon_mini_gallery{
  background-image:url(http://i39.servimg.com/u/f39/18/86/39/02/galeri10.png);/*image si la souris ne survole pas*/
  width:64px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
  background-position: 0;
}
#i_icon_mini_gallery:hover{
  background-image:url(http://i39.servimg.com/u/f39/19/04/22/29/galeri10.png); /*image si la souris survole*/
  width:64px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
}
/*IMAGE FAQ*/
#i_icon_mini_faq{
  background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button14.png'); /*image si la souris ne survole pas*/
  width:42px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
  background-position: 0;
}
#i_icon_mini_faq:hover{
  background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button15.png'); /*image si la souris survole*/
  width:42px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
}
/*IMAGE RECHERCHE*/
#i_icon_mini_search{
  background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button16.png'); /*image si la souris
ne survole pas*/
  width:102px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
  background-position: 0;
}
#i_icon_mini_search:hover{
  background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button17.png'); /*image si la souris survole*/
  width:102px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
}
/*IMAGE MEMBRES*/
#i_icon_mini_members{
  background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button18.png'); /*image si la souris ne survole pas*/
  width:84px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
  background-position: 0;
}
#i_icon_mini_members:hover{
  background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button19.png'); /*image si la souris survole*/
  width:84px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
}
/*IMAGE GROUPES*/
#i_icon_mini_groups{
  background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button21.png'); /*image si la souris ne survole pas*/
  width:72px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
  background-position: 0;
}
#i_icon_mini_groups:hover{
  background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button22.png'); /*image si la souris survole*/
  width:72px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
}
/*IMAGE PROFIL*/
#i_icon_mini_profile{
  background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button23.png'); /*image si la souris ne survole pas*/
  width:60px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
  background-position: 0;
}
#i_icon_mini_profile:hover{
  background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button24.png'); /*image si la souris survole*/
  width:60px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
}
/*IMAGE MP (pas de nouveaux messages)*/
#i_icon_mini_message{
  background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button25.png'); /*image si la souris ne survole pas*/
  width:90px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
  background-position: 0;
}
#i_icon_mini_message:hover{
  background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button26.png'); /*image si la souris survole*/
  width:90px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
}
/*IMAGE MP (nouveaux messages)*/
#i_icon_mini_new_message{
  background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button27.png'); /*image si la souris ne survole pas*/
  width:90px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
  background-position: 0;
}
#i_icon_mini_new_message:hover{
  background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button28.png'); /*image si la souris survole*/
  width:90px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
}
/*IMAGE DECONEXION*/
#i_icon_mini_logout{
  background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button29.png'); /*image si la souris ne survole pas*/
  width:116px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
  background-position: 0;
}
#i_icon_mini_logout:hover{
  background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button30.png'); /*image si la souris survole*/
  width:116px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
}
/*IMAGE S'ENREGISTRER*/
#i_icon_mini_register{
  background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button31.png'); /*image si la souris ne survole pas*/
  width:88px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
  background-position: 0;
}
#i_icon_mini_register:hover{
  background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button32.png'); /*image si la souris survole*/
  width:88px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
}
/*IMAGE CONNEXION*/
#i_icon_mini_login{
  background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button33.png'); /*image si la souris ne survole pas*/
  width:96px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
  background-position: 0;
}
#i_icon_mini_login:hover{
  background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button34.png'); /*image si la souris survole*/
  width:96px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
}
.i_post:hover {
contenu CSS lors du survol
}
.i_post{
            background-image: url('http://i74.servimg.com/u/f74/18/86/39/02/nouvea10.png')!important;}
.i_post:hover{
            background-image: url('http://i74.servimg.com/u/f74/19/04/22/29/nouvea10.png')!important;}
div#fa_toolbar {
    background-color: #050f66;  /* Couleur de fond */
    border-radius: 0 0 50px 50px;  /* Arrondis les bords de la toolbar */
    box-shadow: 0 0 30px #050f66;  /* Affiche une ombre */
    margin: auto;  /* Centre la toolbar */
    width: 98%;  /* Modifie la longueur de la toolbar */
}
 
div#fa_toolbar div, div#fa_toolbar span {
    margin: 0 15px;  /* Repositionne correctement le contenu de la toolbar */
}
/* Icônes couleur dans la palette */
 
.color-option {
display: inline-block !important;
width: 15px !important;  /* largeur de l'icône couleur */
height: 15px !important;  /* hauteur de l'icône couleur */
border: 2px solid #fff !important;  /* cadre blanc sur l'icône couleur */
margin: 3px !important;  /* espace entre chaque icône */
box-shadow: 0 0 2px #778899;  /* ombre */
cursor: pointer !important;
}
.color-option span{
display: block !important;
width: 15px !important;  /* largeur de l'icône couleur */
height: 15px !important;  /* hauteur de l'icône couleur */
}
.color-option, .color-option span {
border-radius: 2px;  /* arrondi */ 
}
 
/* Palette complète - la largeur influence le nombre d'icônes affichées */
.sceditor-dropdown.sceditor-color-picker {
width: 200px !important;  /* largeur de la palette complète */
height: 100px !important;  /* hauteur de la palette complète */
padding: 5px !important;
border-radius: 5px !important;
}
.post {
border: 3px solid #050f66;
  border-radius: 12px;
}

Les codes concernant le bouton "nouveau" se trouve après le codage de la barre de navigation.

Merci pour votre aide précieuse !

[Scoubifitz]

bonjour,

il faut bien faire disparaitre le bouton "nouveau" dans le TA ...

ensuite , l'erreur est de mettre juste le background de la nouvelle image , sans lui donner les nouvelles dimensions ...

#i_icon_mini_login:hover{
background-image:url('https://i.servimg.com/u/f39/19/00/20/97/button34.png'); /*image si la souris survole*/
width:96px; /*Largeur de l'image*/
height:30px; /*Hauteur de l'image*/
}
.i_post:hover {
contenu CSS lors du survol
}
.i_post{
background-image: url('https://i.servimg.com/u/f74/18/86/39/02/nouvea10.png')!important;}
.i_post:hover{
background-image: url('https://i.servimg.com/u/f74/19/04/22/29/nouvea10.png')!important;}
div#fa_toolbar {
background-color: #050f66; /* Couleur de fond */
border-radius: 0 0 50px 50px; /* Arrondis les bords de la toolbar */
box-shadow: 0 0 30px #050f66; /* Affiche une ombre */
margin: auto; /* Centre la toolbar */
width: 98%; /* Modifie la longueur de la toolbar */
}

supprimez la partie en rouge , et remplacez la partie en orange par ceci :

Code:


.i_post{
background-image: url('http://i74.servimg.com/u/f74/18/86/39/02/nouvea10.png');
  width:72px; /* Largeur de l'image */
  height:30px; /* Hauteur de l'image */
}
.i_post:hover{
background-image: url('http://i74.servimg.com/u/f74/19/04/22/29/nouvea10.png');
 /* Largeur et hauteur déjà définie dans i-post */
}

[emc2]

Effectivement, ça marche parfaitement bien. Je vais pouvoir travailler sur les autres boutons. Merci à tout le monde de s'être penché sur le problème.
Je balise en "résolu".