Affichage des catégories en parvenant à retirer la structure normal phpbb2 ( par template )

[Sasu Uchiwa]

Bonjour, récemment j'avais posté un autre sujet tout a fais le même sur ce Forum, demandant de l'aide pour un affichage des catégories. Sauf, qu'étant donné que j'étais partie en vacance depuis le 16, je n'ai pas pu poster et mon sujet a été mis dans la corbeille (En tout cas, je remercie Tupac pour son aide).
Donc, j'aurais besoin de votre aide.

J'ai fais un schéma du mieux possible pour vous montrer ce que j'aimerais que sa donne:

Spoiler:

Pour le moment, sa donne sa:

Spoiler:

Et là mon 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 --><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="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">
            <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>
            <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
            <span class="gensmall">
                <!-- BEGIN switch_moderators_links -->
                {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                <!-- END switch_moderators_links -->
                {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
            </span>
          </td>
 
      <td class="row3 over" align="center" valign="middle" height="50"><div style="width: 150px;"></div>
  <div class="sujet_message">
<span class="gensmall">{catrow.forumrow.POSTS} messages dans {catrow.forumrow.TOPICS} sujets.<br>
        <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
    </div>
 
          </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 -->

J'aimerais, en rajoutant, dans la présentation des catégories, que quand on passe la souris sur "New" & "Description du sujet", que sa s'illumine :

A voir ici:

Je remercie d'avance celui qui se proposera pour m'aider, car j'avoue que dans ma demande, je demande beaucoup de chose =S

[Sasu Uchiwa]

UP! Désolé du double post.

Si jamais personne peut m'aider, connaîtrez-vous un Forum où l'on pourrait m'aider?

[SoraNoHime]

Bonsoir

puis-je avoir également votre css, et il me faudrait connaitre votre hiérarchie dans structures et hiérarchie.

Cordialement.

[Sasu Uchiwa]

Code:

.sujet_message{
  border: 1px solid #000;
  background: #fff;
  margin-top: 35px;
  padding: 5px;
  -moz-border-radius:20px;
  -webkit-border-radius:20px;
  -border-radius:20px;
}


.fleche {
    background-image : url("http://nsa27.casimages.com/img/2011/08/15/110815010014151158.gif");
    width: 20px;
    height :20px;
    position : relative;
    top :70px;
    left :-16px;  }
       
.bulle{
    background-color : #ffffff;
    border : 1px solid #6c3b0a;
    -moz-border-radius: 20px ;
    -webkit-border-radius:20px;
    -border-radius:20px;
    -khtml-border-radius:20px;
    padding : 5px;
}



.description{
  border: 1px solid #fff;
  background: #000000;
  padding: 5px;
    opacity : 0.50;
    -moz-opacity : 0.50;   
    -ms-filter: "alpha(opacity=10)"; /* IE 8 */
    filter : alpha(opacity=10); /* IE < 8 */
}

.description:hover{
    opacity : 0.95;
      -moz-opacity : 0.95;
      -ms-filter: "alpha(opacity=10)"; /* IE 8 */
      filter : alpha(opacity=10); /* IE < 8 */
}

Voici : ) !

[SoraNoHime]

Vous avez oublié de me donné votre hiérarchie ^^. PA > Affichage > Structure & Hiérarchie.

Cordialement.

[Sasu Uchiwa]

Ah, oups, désolé, oublié ^^"

J'ai mis l'image pour avoir plus simple:

[SoraNoHime]

Commencez par repérez :

Code:

<tr>
                  <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
                  <th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></th>
              </tr>

et changez le ainsi :

Code:

<tr>
                  <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
                  </tr>

puis repérez :

Code:

<!-- 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>
            <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
            <span class="gensmall">
                <!-- BEGIN switch_moderators_links -->
                {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                <!-- END switch_moderators_links -->
                {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
            </span>
          </td>
 
      <td class="row3 over" align="center" valign="middle" height="50"><div style="width: 150px;"></div>
  <div class="sujet_message">
<span class="gensmall">{catrow.forumrow.POSTS} messages dans {catrow.forumrow.TOPICS} sujets.<br>
        <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
    </div>
 
          </td>
      </tr>
      <!-- END forumrow -->

et changez le ainsi :

Code:

 <!-- BEGIN forumrow -->
              <tr><td class="row1 over" colspan="2"><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>
<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="row1 over" valign="top" width="100%" height="50"><table><tr><td>
                    <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">
                    <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
                    <span class="gensmall">
                        <!-- BEGIN switch_moderators_links -->
                        {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                        <!-- END switch_moderators_links -->
                        {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                    </span>
                  </td></tr></table></td>
       
              <td class="row3 over" align="center" valign="middle" height="50"><div style="width: 150px;"></div>
          <div class="sujet_message">
        <span class="gensmall">{catrow.forumrow.POSTS} messages dans {catrow.forumrow.TOPICS} sujets.<br>
                <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
            </div>
       
                  </td>
              </tr>
              <!-- END forumrow -->

Niveau structure cela se rapproche-t-il de ce que vous avez demandé ? nous allons voir ensuite pour la css s'il n'y a pas de problèmes.

Cordialement.

[Sasu Uchiwa]

Oui, je crois bien que c'est sa niveau structure, sa donne sa (juste pour montrer)

Spoiler:

[Sasu Uchiwa]

UP! Désolé du double post :X

[SoraNoHime]

Dans votre template repérez :

Code:

<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">

changez le cellspacing="1" par cellspacing="0"

Puis repérez :

Code:

<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />

et changez le ainsi :

Code:

<div class="iconnew"><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></div>

Puis ceci :

Code:

<span class="genmed">{catrow.forumrow.FORUM_DESC}</span>

à changez ainsi :

Code:

<div class="description"<span class="genmed">{catrow.forumrow.FORUM_DESC}</span></div>

ENfin dans votre css ajoutez :

Code:

.iconnew img {
margin-left : 20px;
          border: 1px solid #fff;
          background: #000000;
          padding: 5px;
            opacity : 0.50;
            -moz-opacity : 0.50; 
            -ms-filter: "alpha(opacity=10)"; /* IE 8 */
            filter : alpha(opacity=10); /* IE < 8 */
}

.iconnew img:hover {
margin-left : 20px;
            opacity : 0.95;
              -moz-opacity : 0.95;
              -ms-filter: "alpha(opacity=10)"; /* IE 8 */
              filter : alpha(opacity=10); /* IE < 8 */
}

Que nous reste-t-il à changer ?

[Sasu Uchiwa]

Merci beaucoup =D !
Il reste plus qu'un petit bug avec la case "Date du dernier message, ..."

Spoiler:

Elle est en bas, et qu'elle devrait être centrée au même niveau que l'image ><

[SoraNoHime]

Dans votre css:

.sujet_message{
border: 1px solid #000;
background: #fff;
margin-top: 35px;
padding: 5px;
-moz-border-radius:20px;
-webkit-border-radius:20px;
-border-radius:20px;
}

Retirez la partie en rouge ^^

[Sasu Uchiwa]

Han merci beaucoup =D !
Il n'y a plus de problème. Je mets donc résolu.