Code CSS pour modifier la bannière

[brumedor]

Bonjour
Je recherche le code CSS à entrer pour modifier la bannière au passage de la souris ?
(par exemple, je veux que ma bannière aie une coloration verte au passage de la souris ou qu'elle pivote de quelques degrés.)

Merci d'avance

[brumedor]

Deuxième question dans la foulée :
Comment agrandir la police des sous forum ?? J'ai cherché sur le forum, j'ai trouvé des réponses mais rien ne marche.

Templates :

Code:

<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
   <tr>
      <td valign="bottom">
         <!-- BEGIN switch_user_logged_in -->
         <span class="gensmall">{LAST_VISIT_DATE}<br />
         {CURRENT_TIME}<br />
         </span>
         <!-- END switch_user_logged_in -->
         <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
      </td>
      <td class="gensmall" align="right" valign="bottom">
         <!-- BEGIN switch_user_logged_in -->
         <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
         <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
         <!-- END switch_user_logged_in -->
         <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
      </td>
   </tr>
</table>
<!-- BEGIN catrow --><!-- BEGIN tablehead --><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <tr>
      <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
      <th nowrap="nowrap" width="50">{L_TOPICS}</th>
      <th nowrap="nowrap" width="50">{L_POSTS}</th>
      <th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></th>
   </tr>
   <!-- END tablehead -->
   <!-- BEGIN cathead -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
         <h{catrow.cathead.LEVEL} class="hierarchy">
            <span class="cattitle">
               <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
            </span>
         </h{catrow.cathead.LEVEL}>
      </td>
      <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td>
   </tr>
   <!-- END cathead -->
   <!-- BEGIN forumrow -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
      <!-- END inc -->
      <td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
         <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
      </td>
      <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
         <h{catrow.forumrow.LEVEL} class="hierarchy">
            <span class="forumlink">
               <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
            </span>
         </h{catrow.forumrow.LEVEL}>
         <div class="desc">{catrow.forumrow.FORUM_DESC}</div>
         <span class="gensmall">
            <!-- BEGIN switch_moderators_links -->
            {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
            <!-- END switch_moderators_links -->
            <div class=sousforum style="text-align: center;">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
         </span>
      </td>
      <td class="row3" align="center" valign="middle" height="50">
         <span class="gensmall">{catrow.forumrow.TOPICS}</span>
      </td>
      <td class="row2" align="center" valign="middle" height="50">
         <span class="gensmall">{catrow.forumrow.POSTS}</span>
      </td>
      <td class="row3 over" align="center" valign="middle" height="50">
         <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
      </td>
   </tr>
   <!-- END forumrow -->
   <!-- BEGIN catfoot -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
   </tr>
   <!-- END catfoot -->
   <!-- BEGIN tablefoot -->
</table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

CSS:

Code:

.sousforum {
font-size: 14px!important;
margin-top: 10px;
font-family: georgia;
border-bottom: 1px solid #dae8c5; }

[brumedor]

Personne pour m'aider ??

[Lixyr]

Bonjour. Techniquement, ce sujet parle de votre bannière, pas des sous-forums. Donc je vais répondre pour la bannière pour l'instant.
Vous êtes en phpbb2 ?

Vous voulez quoi exactement comme modification de votre bannière ?

[brumedor]

Merci pour votre réponse.
Je suis sous PHPBB2.
Je voudrais que, lorsque ma souris passe sur la bannière, celle-ci se teinte d'une autre couleur et qu'elle "bouge" avec un angle de 20°.

[Lixyr]

Bonsoir.

Je peux déjà vous aider pour la rotation :

mettez ça dans votre css :

Code:

#i_logo:hover{
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);}


Seulement, pour changer la teinte de la bannière, je ne sais pas... .
J'ai bien cherché mais je n'ai rien trouvé.

Vous avez un forum exemple ?

[brumedor]

Merci beaucoup Lixyr ! C'est super

Pour l'exemple : ici http://heartva.purforum.com/
La bannière retrouve ses couleurs originales au passage de la souris. Moi je voudrais l'inverse (elle se teinte au passage de la souris).

[Invité]

Salut,
afin d'être plus réactif:
peux tu donner l'adresse de ton forum stp
a++

[Lixyr]

Je sais faire comme sur le forum exemple, c'est à dire mettre une opacité, que ce soit dans le sens

- l'image est opaque et retrouve ses couleurs d'origine au passage de la souris
ou
-
- l'image a sa couleur d'origine et devient opaque au passage de la souris

Mais teinté l'image, à moins de mettre une deuxième image par dessus la première au passage de la souris, je ne vois pas ... Ca ne marche pas avec la bannière.

L'inverse du code du forum que vous avez indiqué, ce serait :

Code:

    #i_logo{
  background-image:url(URL DE VOTRE BANNIERE);
}

    #i_logo:hover{
    -webkit-transform: rotate(-20deg);
    -moz-transform: rotate(-20deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

filter:alpha(opacity=75);
-moz-opacity:0.75;
-khtml-opacity:0.75;
opacity: 0.75;}

donc l'inverse de ce qu'il se produit sur le forum exemple, avec en prime une rotation.

[brumedor]

WAOUh bah merci beaucoup Lixyr c'est vraiment très gentil

[Lixyr]

Ah donc c'était ça que vous vouliez ?
Je pensais que vous vouliez que votre bannière change de couleur.

Ben c'est super alors, si c'était ça que vous vouliez. Je suis ravie d'avoir pu vous aider. ^^

Cordialement.

[brumedor]

Oui c'était ça ^^
Impeccable encore merci !