Problème avec les catégories (Oui, encore 1... XD)

[Feu Ardent]

Bonjour
Je sais que vous avez énormément de topics en cours à ce sujet et j'ai bien fait mes recherches avant de venir poster. J'ai longtemps hésité à poster et puis finalement, je me suis dit que je n'avais rien à y perdre.

J'ai suivi à la lettre ce topic: https://forum.forumactif.com/t312155-changer-apparence-categorie
C'était plus où moins ce qu'il me fallait (merci à L'Assistactif(ve) qui a aidé la personne à l'origine du sujet) néanmoins, à la fin de ce tutoriel, les catégories restent écrites sur la barre qui fait toute la largeur du forum. Ce que j'ai ensuite essayé de faire, c'était de mettre le nom des catégories au dessus d'une image qui ferait la largeur du forum, et qu'ensuite, les forums soient regroupés en dessous comme ceci:

https://2img.net/r/ihimizer/img197/1736/esquisseo.png

En gros, il me suffisait de mettre les catégories sur une image et de rajouter les liens vers les sous forums. Deux choses que je ne sais absolument pas faire, voyez le résultat vous mêmes:

http://liberty-island-rpg.forumgratuit.org/

Je comprendrais si cette demande d'aide sera rejetée mais il fallait que je tente quand même ^^"

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="0" cellpadding="0">
          <tr>
              <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
         
         
          <!-- END tablehead -->
          <!-- BEGIN cathead -->
          <tr>
              <!-- BEGIN inc -->

              <!-- END inc -->

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

<center><img src="http://img36.imageshack.us/img36/1981/barqu.png"></center>

  </tr>

<center><div style="margin-left: 100px; font-size: 25pt; position: absolute; font-family: times new roman; color: #367d7c; font-style: italic; text-transform: lowercase; text-shadow: 1px 1px 2px black; font-weight: bold; letterspacing: -2px;">{catrow.cathead.CAT_TITLE}</div></center>
<div style="width: 690px; margin: auto; margin-top: -50px; height: 130px; background: #ffffff; border: 1px solid black; -moz-border-radius-bottomleft: 70px; -moz-border-radius-topright: 50px;">


<div style="margin-top: 20px; font-size: 13pt; font-face: Times New Roman; color: #367d7c; font-style: italic; text-transform: lowercase; text-shadow: 1px 1px 2px black;">
        <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
 text</div>


<td class="row1" width="100%"><table class="catcadre">  <tr><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">
                  <center> <span class="forumlink">
                      <center><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></center>

                    </span></center>
                </h{catrow.forumrow.LEVEL}>
                <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>
                      <td class="row3 over" align="center" valign="middle" height="50"><div style="width:150px;" class="dersuj">
                        <span class="gensmall">{catrow.forumrow.LAST_POST}
{catrow.forumrow.POSTS} Message | {catrow.forumrow.TOPICS} Sujets</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 -->

CSS:

Code:


        .catcadre {
            border : 1px solid #FF9900;
            -moz-border-radius: 20px ;
            -webkit-border-radius:20px;
            -border-radius:20px;
            -khtml-border-radius:20px;
            padding : 5px;
        }



        .dersuj {
            border : 1px solid #FF9900;
            -moz-border-radius: 20px ;
            -webkit-border-radius:20px;
            -border-radius:20px;
            -khtml-border-radius:20px;
            padding : 5px;
        }

Merci d'avance de prendre le temps de me répondre,

~ Feu Ardent

[SoraNoHime]

Bonjour

3ème personne qui a un souci avec ce sujet je vais commencer à me poser des questions...

Revenons à vous. ^^ Pour afficher les liens vers les sousforums aller dans PA > Affichage > Structures & hiérarchie et activer les liens vers les niveaux inférieurs.

Pour votre image dans le titre des forums et non des catégories, cela va me prendre un peu plus de temps. Permettez vous que je fasse des tests avec votre image ?

Cordialement.

[Feu Ardent]

Pour les sous-forums, ça marche, merci. ^^

Quand à l'image, bien sûr, amusez-vous avec ^^

https://2img.net/r/ihimizer/img36/1981/barqu.png

Par contre, je ne la veux pas sous le nom des forums mais bien sous le nom des catégories.

[SoraNoHime]

Pourtant les liens des sous forums apparaissent bien dans votre template

Code:

{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}

donc elles devraient apparaitre. oui 'avais bien saisi, mais il me faut aussi régler le fais que l'image se superpose sur le tour qui contiendra les forums. Je me suis juste mal exprimée. ^^

[Feu Ardent]

D'accord. ^^ Donc oui, je ne comprends pas pourquoi ça s'affiche pas, mais moi et les templates, on s'aime pas trop... x')

[SoraNoHime]

Nous allons plutot repartir d'un template par défaut, le votre est trop brouillon ^^ j'ai du mal à m'y repérer. et enlevez la css que vous avez trouver dans l'autre post.

Donc une fois que votre template par défaut est remis repérez ceci :

Code:

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

et changez le ainsi :

Code:

<!-- BEGIN catrow --><!-- BEGIN tablehead -->
      <center><div class="secondarytitle">{catrow.tablehead.L_FORUM}
   </div><table class="catcadre" width="730" border="0" cellspacing="0" cellpadding="0">
   <!-- END tablehead -->

puis repérez :

Code:

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

et changez le ainsi :

Code:

 <td class="row3 over" align="center" valign="middle" height="50"><div style="width:150px;">
         <span class="gensmall">{catrow.forumrow.LAST_POST}</span></div>
      </td>

repérez ensuite :

Code:

</table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

et changez le ainsi :

Code:

</table><img src="{SPACER}" alt="" height="5" width="1" /></center><!-- END tablefoot --><!-- END catrow -->

et dans la css ajoutez:

Code:

.secondarytitle {
background-image: url('http://img36.imageshack.us/img36/1981/barqu.png');
background-repeat: no-repeat;
height:100px;
width:730px;
text-align : center;
   vertical-align : bottom;
position : relative;
top : 30px;
}

.secondarytitle h2{
position : relative;
top : 40px;
}

.catcadre {
background-color : #ffffff;
  -khtml-border-radius-topright: 40px;
  -khtml-border-radius-bottomleft: 40px;
  -moz-border-radius-topright: 40px;
  -moz-border-radius-bottomleft: 40px;
  -webkit-border-top-right-radius: 40px;
  -webkit-border-bottom-left-radius: 40px;
  border-top-right-radius: 40px;
  border-bottom-left-radius: 40px;
border : 2px solid #000000;
padding-top : 30px;
padding-left : 5px;
padding-right : 10px;
padding-bottom : 10px;
}

Nous devrions nous apporcher du résultat voulu. Il y a encore un léger soucis sur la largeur du cadre blanc que je vais revoir, puis un changement au niveau du nom et de la description. Est-ce dans ce que vous vouliez déjà ?

[Feu Ardent]

:**: Ça commence à prendre forme, merci! *w*

Par contre, l'image n'apparaît qu'une fois. En fait, ce que je voudrais, c'est exactement la même chose, mais avec le "Who Knew Birth Was So Painful?", le "Live Life, Love Life" et le "Don't Try To Run Away From The Flood" au dessus d'une copie de l'image.

Sinon, je ne sais pas comment vous avez fait mais merci, c'est mieux réussi que ce que j'aurais pu faire x')

[SoraNoHime]

Mettez déà votre hiérarchie sur Moyen : séparer les catégorie de l'index ^^

Pour mon secret, j'ai simplement créer une div ou j'ai replacer le titre des catégories et votre image au dessus du tableau d'origine, puis j'ai repositionner le tout pour qu'ils soient l'un sur l'autre.

Je modifie encore le reste pour le moment ^^

[Feu Ardent]

:O Ça marche beaucoup mieux ainsi, en effet! :3 Merciiii! :3 Vous me sauvez la vie là \o/

[SoraNoHime]

Repérez ceci :

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>
      <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}>
         <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;">
         <span class="gensmall">{catrow.forumrow.LAST_POST}</span></div>
      </td>

et changez le ainsi :

Code:

<td 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 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="descript"><span class="genmed">{catrow.forumrow.FORUM_DESC}</span></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 -->
<span class="gensmall" id="subforums"><div class="soufo">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span><script type="text/javascript">
    jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,' ')).removeAttr('id');
    </script>
         </div></span>
      </td>
      <td align="center" valign="middle" height="50"><div style="width:150px;">
         <span class="gensmall">{catrow.forumrow.LAST_POST}</span></div>
      </td>

puis mettez dans votre css :

Code:

.soufo a {
  color: #000000;
  font-size: 11px;
  background-color: #ff0000;
  margin-right : 3px;
   font-variant : small-caps;
}

.descrip {
border-top : 1px solid #000000;
border-bottom : 1px solid #000000;
}

à personnaliser.

Que nous reste-t-il à faire ?

[Feu Ardent]

*-* C'est magique. (a)

Je croyais pouvoir finir la suite, mais visiblement, j'arrive pas à changer la police ni la taille du texte. T___T

Si vous pouviez juste me dire comment ou où mettre des div's pour pouvoir:

1- Personnaliser le nom des catégories
2- Personnaliser le nom des forums
3- Régler la hauteur maximale des descriptions des sous forums
4- Créer une ligne entre la description et les sous forums et les sous forums et le forum suivant
5- Réduire un peu la largeur du cadre sous l'image entourant les forums

Je saurais me débrouiller avec ça (A)

Merci encore pour tout, c'est magnifique, vraiment. *-*

[SoraNoHime]

1. Déjà pour le titre des catégories, le code css est .secondarytitle h2
2. pour le nom des forum a.forumlink
3. un max-height dans .sousfo devrait le faire idem avec 5

Code:

text-align : center;

. si .soufo ne marche pas faite le dans .sousfo a
4. Normalement la première ligne existe

.descrip {
border-top : 1px solid #000000;
border-bottom : 1px solid #000000;
}

pour celle entre les sous forums et le forum suivant mettez un border-bottom à .soufo

[Feu Ardent]

Finalement, j'ai pas fait la border-bottom car ça rendait mal.

En tout cas, merci\, c'est absolument ce que je cherchais à faire, vous m'avez SAuVÉ la vie. (A) Tout est absolument parfait, merci encore. :3

PS: Vous avez été crédité sur la PA comme il le faut ^^