Changement dans l'apparence des catégorie

[Crystal Shadow]

voila j'aimerais un peu d'aide pour modifier l'apparence de mes catégories pour le moment elle ressemble a ça :



Et j'aimerais qu'elle ressemble a ça :



Avec un fond en image qui change quand on passe la souris dessus (au niveau des description des catégories) J'aimerais part contre gardait dans mon templates la partie concernant le haut et le bas des catégorie afin de pouvoir après mettre d'autre image.

Mon forum est en Phbb2 et j'ai des templates modifier et un css personnaliser

Css :

Code:

.bodyline{ background: url('http://illiweb.com/fa/pbucket.gif');}
        body.chatbox {
        background-image:url("http://img15.hostingpics.net/pics/749327fondimage.png");
        background-repeat:no-repeat;
        }

/* ligne messages et sujets */
        .messa_suj{
  font-family: Trajan pro;
            font-size: 10px;
            border: 1px solid #D6BC8B;
            background-color:#000000;
            -moz-border-radius:  10px 0px 0px;
            -webkit-border-radius: 10px 10px 0px 0px;
            border-radius: 10px 10px 0px 0px;
            color: #ffffff;
            margin-top: 20px;
            padding: 3px;
filter:alpha(opacity=80);
    -moz-opacity: 0.80;
    -khtml-opacity: 0.80;
    opacity: 0.80;


        }
       
        /* dernier message posté */
        .der_post{
  font-family: Trajan pro;
            font-size: 10px;
            border: 1px solid #D6BC8B;
            background-color: #000000;
            -moz-border-radius: 0px 0px 10px 10px;
            -webkit-border-radius: 0px 0px 10px 10px;
            border-radius: 0px 0px 10px 10px;
            color: #ffffff;
            padding: 3px;
filter:alpha(opacity=80);
    -moz-opacity: 0.80;
    -khtml-opacity: 0.80;
    opacity: 0.80;


        }
       
        /* couleur dernier message posté */
        .der_post a{ color: #ffffff;
 }
       
        /* cadre et fond description */
        .description{

            border: 1px solid #D6BC8B;
            background-color: #000000;
            -moz-border-radius:10px;
            -webkit-border-radius:10px;
            border-radius:10px;
            color: #ffffff;
            padding: 5px;
filter:alpha(opacity=80);
    -moz-opacity: 0.80;
    -khtml-opacity: 0.80;
    opacity: 0.80;
  font-family: Trajan pro;
            font-size: 10px;
        }
        /* couleur sous-forum */
        .sousforum a {
          font-family: Trajan pro;
            font-size: 14px;
              color: #ffffff;
        }


.profbouton {
background-color : #947571;
-moz-border-radius: 8px;
-webkit-border-radius: 8 px;
-border-radius: 8 px;
-khtml-border-radius: 8 px;
padding : 10px;
margin : 10px;
text-align : center;
}
.profavatar img {
background-color : #947571;
-moz-border-radius: 3px;
-webkit-border-radius: 3 px;
-border-radius: 3 px;
-khtml-border-radius: 3 px;
padding : 3px;
margin-top : - 3px;
margin-bottom : - 3px;
margin-left : 3px;
margin-right : 3px;
}

            .statistiques{
                border:1px;
                background-image: url("http://illiweb.com/fa/pbucket.gif");
                background-repeat: no-repeat;
                background-position: center;
                height:400px;
        padding-right:250px;
}
             
                .groupes{
 font-family: Trajan pro;
            font-size: 9px;
                background-color:#;border: 1px #300000 solid;
                -moz-border-radius : 5px 5px 5px 5px;
                height:35px;padding-right:9px;padding-left:9px;padding-bottom:3px;
                font-size:15px;font-weight: bold;text-align:center;font-family: Trajan pro;
                text-decoration: none, important;
          }

/
 
a.forumlink {
    font-family: Trajan pro;
            font-size: 20px;
           
            text-shadow: #300000 1px 1px 1px;
        text-transform: lowercase;
        text-decoration: none;
        letter-spacing: -3px;
        font-weight : bold;
display : block;

}

.forumline {
background-image: url('http://illiweb.com/fa/pbucket.gif');}

body
{

 cursor: url(http://sd-1.archive-host.com/membres/up/97803206325747094/baguette.cur), auto;
}

        .postbody {
            background-color:#dbd0a2;
            font-size: 14px;
            font-family: Trajan pro;
            color : #000000;
  -moz-border-radius: 5px 5px 5px 5px;
            -webkit-border-radius: 5px 5px 5px 5px;
            border-radius: 5px 5px 5px 5px;
 border: 2px solid #ffffff;

        }
        .img_titre{
            margin-top: -70px;
            margin-right:-500px;
            width: 413px;
            height: 201px;
          }
          .barre_nav{
        font-family: Trajan pro;
          background-color: #;
        padding: 10px;
        text-align: center;
        top: 0px;
        left: 0px;
        right: 0px;
        width: 100%;
        z-index: 999;
  }
        a.mainmenu {
        font-size : 14px;
   
        }
        /* couleur liens */
        .barre_nav a{
        color:#000000;
        }
        /* couleur liens au survol */
        .barre_nav a:hover{
        color:#000000;
        }

        /*PSEUDOS PROFIL*/
        .pseudo { font-family: Trajan pro }
a {
cursor: url(http://sd-1.archive-host.com/membres/up/97803206325747094/oth247.cur), auto;
}



       
        .infobulle{
        position: relative;
        z-index: 0;}
       
        .infobulle:hover{
        background-color: transparent;
        z-index: 50;}
       
        .infobulle span{
        position: absolute;
        background-color: #000000;
        padding: 5px;
        left: -1000px;
        visibility: hidden;
        color: #FFFFFF;}
       
        .infobulle span img{
        border: 2px;
        padding: 5px;}
       
        .infobulle:hover span{
        visibility: visible;
        top: 150px;
        left: 0px;
        width: 200px ;
        color:#FF0000;
        border: 2px solid #0000FF;}

a.forumlink:link, a.forumlink:active, a.forumlink:visited {

font-size: 22px;
font-family: Georgia;
text-align: center;
text-transform : uppercase;
font-weight: lighter;
display: block;
border-bottom: 3px double #892110;
}


et la template index-box :

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}
     
                {CURRENT_TIME}
     
                </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>
     
                <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a>
     
                <!-- END switch_user_logged_in -->
                <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
              </td>
          </tr>
        </table>
        <!-- BEGIN catrow --><!-- BEGIN tablehead --><img src="http://illiweb.com/fa/pbucket.gif" alt=""height="150" width="930" /><table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
                <th colspan="3" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
          </tr>
          <!-- END tablehead -->
          <!-- BEGIN cathead -->
          <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">
                      <table width="100%"><tbody><tr><td><h{catrow.forumrow.LEVEL} class="hierarchy">
                            <span class="forumlink">
                              <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
           
                            </span>
        </h{catrow.forumrow.LEVEL}></td></tr></tbody></table>
                <table class="description" width="100%">
                  <tr>
                    <td align="center" width="80%"><span class="genmed">{catrow.forumrow.FORUM_DESC}</span></td>
                    <td valign="top" width="20%"><div align="center" class="sous_forum"><span class="sousforum" id="subforums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div></span><script type="text/javascript">
        jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,'<br />')).removeAttr('id');
        </script>
                </td>
                </tr>
                </table>
              <span class="gensmall">
                <!-- BEGIN switch_moderators_links -->
                {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                <!-- END switch_moderators_links -->
                </span>
              </td>
                  <td class="row3 over" align="center" valign="middle" height="50"><div style="width:150px;"></div>
                        <span class="gensmall">
                                        <div class="messa_suj">{catrow.forumrow.POSTS} messages dans {catrow.forumrow.TOPICS} sujets.</div><br>
                                        <div class="der_post">{catrow.forumrow.LAST_POST}</div></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="http://illiweb.com/fa/pbucket.gif" alt="" height="80" width="100%" />
        <!-- END tablefoot --><!-- END catrow -->

Je suis prête a repartir de zéro si il le faut. Je remercie d'avance celui ou celle qui prendra le temps de m’aider dans ce projet.

[Crystal Shadow]

Up

[Crystal Shadow]

Up s'il vous plait

[Crystal Shadow]

Up

[Crystal Shadow]

Up.

[Crystal Shadow]

Up avec un peux d'avance Je voulais savoir si il y avait un soucis avec ma demande.

[Crystal Shadow]

Up svp

[Invité]

Bonjour,

Je parviens pour le moment à ce résultat:


Avec ce template où j'ai juste modifier la place des éléments que vous avez intégrés:

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}
   
                {CURRENT_TIME}
   
                </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>
   
                <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a>
   
                <!-- END switch_user_logged_in -->
                <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
              </td>
          </tr>
        </table>
        <!-- BEGIN catrow --><!-- BEGIN tablehead --><img src="http://illiweb.com/fa/pbucket.gif" alt=""height="150" width="930" /><table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
                <th colspan="3" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
          </tr>
          <!-- END tablehead -->
          <!-- BEGIN cathead -->
          <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">
                      <table width="100%"><tbody><tr><td><h{catrow.forumrow.LEVEL} class="hierarchy">
                            <span class="forumlink">
                              <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
         
                            </span>
        </h{catrow.forumrow.LEVEL}></td></tr></tbody></table>
                <table width="100%">
                  <tr>
                    <td valign="middle" width="20%"><div align="center" class="sous_forum"><span class="sousforum" id="subforums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span></div><script type="text/javascript">
        jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,'<br />')).removeAttr('id');
        </script>
                </td>
                    <td  class="description" align="center" width="80%"><span class="genmed">{catrow.forumrow.FORUM_DESC}</span><br />
                     
              <span class="gensmall">
                <!-- BEGIN switch_moderators_links -->
                {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                <!-- END switch_moderators_links -->
                </span>
                      </td>
                  <td class="row3 over" align="center" valign="middle" height="50"><div style="width:150px;"></div>
                      <div class="{catrow.forumrow.INC_CLASS}" align="center">
                <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
              </div>
                    <span class="gensmall">
                      <div class="messa_suj">{catrow.forumrow.POSTS} messages dans {catrow.forumrow.TOPICS} sujets.</div><br />
                                        <div class="der_post">{catrow.forumrow.LAST_POST}</div></span>
                    </td>
                </tr>
                </table>
            </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="http://illiweb.com/fa/pbucket.gif" alt="" height="80" width="100%" />
        <!-- END tablefoot --><!-- END catrow -->

et ce CSS :

Code:

.bodyline {
   background:url('http://illiweb.com/fa/pbucket.gif');
}
body.chatbox {
   background-image:url("http://img15.hostingpics.net/pics/749327fondimage.png");
   background-repeat: no-repeat;
}
/* ligne messages et sujets */
.messa_suj {
   font-family:Trajan pro;
   font-size:10px;
   border:1px solid #D6BC8B;
   background-color:#000000;
   -moz-border-radius:10px 0px 0px;
   -webkit-border-radius:10px 10px 0px 0px;
   border-radius:10px 10px 0px 0px;
   color:#ffffff;
   margin-top:20px;
   padding:3px;
   filter:alpha(opacity=80);
   -moz-opacity:0.80;
   -khtml-opacity:0.80;
   opacity: 0.80;
}
/* dernier message posté */
.der_post {
   font-family:Trajan pro;
   font-size:10px;
   border:1px solid #D6BC8B;
   background-color:#000000;
   -moz-border-radius:0px 0px 10px 10px;
   -webkit-border-radius:0px 0px 10px 10px;
   border-radius:0px 0px 10px 10px;
   color:#ffffff;
   padding:3px;
   filter:alpha(opacity=80);
   -moz-opacity:0.80;
   -khtml-opacity:0.80;
   opacity: 0.80;
}
/* couleur dernier message posté */
.der_post a {
   color: #ffffff;
}
/* cadre et fond description */
.description {
   border:1px solid #D6BC8B;
   background-color:#000000;
   -moz-border-radius:10px;
   -webkit-border-radius:10px;
   border-radius:10px;
   color:#ffffff;
   padding:5px;
   filter:alpha(opacity=80);
   -moz-opacity:0.80;
   -khtml-opacity:0.80;
   opacity:0.80;
   font-family:Trajan pro;
   font-size: 10px;
}
/* couleur sous-forum */
.sousforum a {
   font-family:Trajan pro;
   font-size:14px;
   color:#ffffff;
}
.profbouton {
   background-color:#947571;
   -moz-border-radius:8px;
   -webkit-border-radius:8 px;
   -border-radius:8 px;
   -khtml-border-radius:8 px;
   padding:10px;
   margin:10px;
   text-align:center;
}
.profavatar img {
   background-color:#947571;
   -moz-border-radius:3px;
   -webkit-border-radius:3 px;
   -border-radius:3 px;
   -khtml-border-radius:3 px;
   padding:3px;
   margin-top:- 3px;
   margin-bottom:- 3px;
   margin-left:3px;
   margin-right:3px;
}
.statistiques {
   border:1px;
   background-image:url("http://illiweb.com/fa/pbucket.gif");
   background-repeat:no-repeat;
   background-position:center;
   height:400px;
   padding-right:250px;
}
.groupes {
   font-family:Trajan pro;
   font-size:9px;
   background-color:#;
   border:1px #300000 solid;
   -moz-border-radius:5px 5px 5px 5px;
   height:35px;
   padding-right:9px;
   padding-left:9px;
   padding-bottom:3px;
   font-size:15px;
   font-weight:bold;
   text-align:center;
   font-family:Trajan pro;
   text-decoration: none,important;
}
/
a.forumlink {
   font-family:Trajan pro;
   font-size:20px;
   text-shadow:#300000 1px 1px 1px;
   text-transform:lowercase;
   text-decoration:none;
   letter-spacing:-3px;
   font-weight:bold;
   display:block;
}
.forumline {
   background-image:url('http://illiweb.com/fa/pbucket.gif');
}
body {
   cursor:url(http://sd-1.archive-host.com/membres/up/97803206325747094/baguette.cur),auto;
}
.postbody {
   background-color:#dbd0a2;
   font-size:14px;
   font-family:Trajan pro;
   color:#000000;
   -moz-border-radius:5px 5px 5px 5px;
   -webkit-border-radius:5px 5px 5px 5px;
   border-radius:5px 5px 5px 5px;
   border:2px solid #ffffff;
}
.img_titre {
   margin-top:-70px;
   margin-right:-500px;
   width:413px;
   height:201px;
}
.barre_nav {
   font-family:Trajan pro;
   background-color:#;
   padding:10px;
   text-align:center;
   top:0px;
   left:0px;
   right:0px;
   width:100%;
   z-index:999;
}
a.mainmenu {
   font-size: 14px;
}
/* couleur liens */
.barre_nav a {
   color: #000000;
}
/* couleur liens au survol */
.barre_nav a:hover {
   color: #000000;
}
/*PSEUDOS PROFIL*/
.pseudo {
   font-family:Trajan pro
}
a {
   cursor:url(http://sd-1.archive-host.com/membres/up/97803206325747094/oth247.cur),auto;
}
.infobulle {
   position:relative;
   z-index:0;
}
.infobulle:hover {
   background-color:transparent;
   z-index:50;
}
.infobulle span {
   position:absolute;
   background-color:#000000;
   padding:5px;
   left:-1000px;
   visibility:hidden;
   color:#FFFFFF;
}
.infobulle span img {
   border:2px;
   padding:5px;
}
.infobulle:hover span {
   visibility:visible;
   top:150px;
   left:0px;
   width:200px;
   color:#FF0000;
   border:2px solid #0000FF;
}
a.forumlink:link,a.forumlink:active,a.forumlink:visited {
   font-size:22px;
   font-family:Georgia;
   text-align:center;
   text-transform:uppercase;
   font-weight:lighter;
   display:block;
   border-bottom:3px double #892110;
}
.sous_forum {
   border:1px solid #D6BC8B;
   background-color:#000000;
   -moz-border-radius:10px;
   -webkit-border-radius:10px;
   border-radius:10px;
   color:#ffffff;
   padding:5px;
   filter:alpha(opacity=80);
   -moz-opacity:0.80;
   -khtml-opacity:0.80;
   opacity:0.80;
   font-family:Trajan pro;
   font-size: 10px;
}

Il ne reste plus qu'à trouver comment superposer les sous-forums à la description, et pour le moment je bloque. Je ne dois pas m'y prendre de la bonne manière.

Cordialement.

[Crystal Shadow]

Merci beaucoup pour le code c'est gentil a vous d'avoir pris le temps de m'aider. Il y a juste un petit souci j'ai deux fois les icônes de message.

[Invité]

J'ai oublié d'en enlever un bout!
Repérez et supprimez ceci dans votre template (ligne 52 à 54):

Code:

<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>

Cordialement.

[Crystal Shadow]

Merci beaucoup sa fonctionne parfaitement maintenant Je ne vais pas vous embêtez plus je vais tenter de faire quelque recherche pour trouver la solution si jamais je ne trouve pas je re-posterais un message.

Merci encore a vous et passer une très bonne journée.