AccueilRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Code index-box pour modifier tablehead

    Cymrod
    Cymrod
    FémininAge : 28Messages : 7

    le Dim 9 Aoû 2020 - 22:00

    Bonjour,

    J'essaye de construire mon thème forum et je bloque vraiment sur la mise en forme des catégories. Malgré de nombreuses recherches, je ne trouve pas quel genre de code entrer pour supprimer le tablehead avec les indications titre catégorie/sujets/message/derniers messages et obtenir un titre de catégorie avec fond intégré à celui des cellules.

    Voilà donc mes barres de catégories actuelles :

    Code index-box pour modifier tablehead Barre_10

    Et, grossièrement, ce que j'aimerais pouvoir faire :

    Code index-box pour modifier tablehead Barre_11

    Vu que je vois ce genre de chose sur presque tous les forums que je visite, je me désole un peu de ne rien trouver, mais toutes mes tentatives n'ont d'autre résultat que celui de déformer toutes les cellules. :sad:

    Mes templates n'ont pas été beaucoup retouchés. Voici le code actuel au besoin :

    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}&nbsp;</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>
       <!-- END tablehead -->
       
       <!-- BEGIN forumrow -->
       <tr>
          <!-- BEGIN inc -->
              <div class="TopCategorie"></div>
      <div class="MidCategorie">
    <table class="forumline" width="80%" border="0" cellspacing="1" cellpadding="0">
        <!-- BEGIN tablefoot -->
    </table>
      </div>
      <div class="FootCategorie"></div>
      <!-- END tablefoot -->
     
          <!-- END inc -->
              <td 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">
                
                {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
             </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">
                <!-- BEGIN ads -->
                <span class="AD_LastPA">
                    <span class="lastpost-avatar"><img src="{catrow.forumrow.ads.IMG}" alt="{catrow.forumrow.ads.TITLE}" /></span>
                    <span class="AD_LastInfos">
                        <b><a href="{catrow.forumrow.ads.LINK}">{catrow.forumrow.ads.TITLE}</a></b><br />
                        {catrow.forumrow.ads.DATE}<br />
                        {catrow.forumrow.ads.LOCATION}
                    </span>
                </span>
                <!-- END ads -->
                <!-- BEGIN avatar -->
                <div style="width: 200px;"></div>
                <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
                <!-- END avatar -->

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

    Je remercie d'avance la personne qui pourra me répondre et m'aider ! :aww:
    Bejoy
    Bejoy
    FémininAge : 47Messages : 7

    le Lun 10 Aoû 2020 - 0:40

    bonjour. Pour tes catégories, il faut juste mettre entre des

    Code:
    <!-- BEGIN catrow --><!-- BEGIN tablehead -->
    <div class="titrecat">{catrow.tablehead.L_FORUM}</div>
    <!-- END tablehead -->

    et le reste du code, tu le mets en-dessous après cette balise là
    Code:
    <!-- BEGIN forumrow -->
    Cymrod
    Cymrod
    FémininAge : 28Messages : 7

    le Lun 10 Aoû 2020 - 11:02

    Merci pour la réponse ! Very Happy
    En conservant aussi la ligne juste avant, ça prend forme !

    Code actuel :
    Code:
     <!-- BEGIN catrow --><!-- BEGIN tablehead -->
      <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
        <div class="titrecat">{catrow.tablehead.L_FORUM}</div>
        <!-- END tablehead -->

    Par contre, le titre de catégorie se décale sur le bord gauche. Que faudrait-il ajouter pour le centrer, l'agrandir ou indiquer une image spécifique à chaque catégorie ?

    J'aimerais aussi pouvoir supprimer les numéros du nombre de sujets et de messages qui continuent de s'afficher et font un peu étranges maintenant que les indications de catégorie ont disparu. scratch

    Code index-box pour modifier tablehead Forum_10

    Je remarque aussi que l’intérieur des forums et des sujets postés gardent cette barre assez laide. Où dois-je aller pour la supprimer afin de tout harmoniser ?

    Code index-box pour modifier tablehead Forum_11



    Merci encore !

    Bejoy
    Bejoy
    FémininAge : 47Messages : 7

    le Lun 10 Aoû 2020 - 12:45

    Bonjour
    hier soir du moins vu l'heure qu'il était, je n'ai pas pris le temps de répondre correctement
    Le Template= l'ossature de ton forum c'est lui que tu dois modifier pour en changer sa forme
    Le CSS = Habillage de ton forum c'est lui qui te permet de changer l'aspect

    Je donne un exemple de formulation de ton template, ensuite à toi de l'adapter avec le CSS

    Code:

    <div class="titrecat">{catrow.tablehead.L_FORUM}</div>

       <!-- END tablehead -->
       <!-- BEGIN cathead -->
       
       <!-- END cathead -->
       <!-- BEGIN forumrow -->
       
    <div class="Cadrecat">
     
      <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
      <div class="sousforum">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
      <div class="icone">
        <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
      </div>

    Ta div cadrecat se fermera à la fin de ton template car c'est lui contient tout l'ensemble de ton forum
    Cymrod
    Cymrod
    FémininAge : 28Messages : 7

    le Lun 10 Aoû 2020 - 15:20

    Pas de soucis, la première réponse m'a déjà bien aidée ! :)

    Pour le reste, je comprends le principe, mais je n'ai vraiment pas assez d'expérience dans le domaine pour savoir comment adapter template et css afin d'obtenir ce que je souhaite. :/
    Bejoy
    Bejoy
    FémininAge : 47Messages : 7

    le Lun 10 Aoû 2020 - 15:39

    Dans ce cas, fait un schéma de ce que tu désires et du thème de ton forum ensuite se sera plus facile pour te guider :)
    Cymrod
    Cymrod
    FémininAge : 28Messages : 7

    le Dim 6 Sep 2020 - 15:17

    Bonjour,

    Désolée du délai de réponse. J'ai essayé plusieurs choses de mon côté mais sans véritable succès pour les catégories car toutes les propositions toutes faites impliquent de changer tout mon template et donc, de modifier la structure de ce que j'ai déjà fait.
    Je voudrais pouvoir modifier l'apparence de chaque catégorie mais rien de ce que j'ajoute à mon CSS n'apparaît jamais. Je suppose qu'il y a des manques dans mon template ?

    J'apprécie la forme assez simple que j'ai définie et ne souhaite pas la changer. J'aimerais que l'on puisse m'indiquer où placer les codes nécessaires pour pouvoir modifier l'apparence des catégories et le bon code à insérer dans le CSS ainsi que replacer (car je suis perdue Sad ) la ligne "nombre de messages et sujets" où je l'ai indiqué, sans que cela fasse disparaître l'avatar du dernier membre à avoir posté. Voir capture d'écran annotée :

    Code index-box pour modifier tablehead Catago10

    Template :
    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">
        <div class="titrecat">{catrow.tablehead.L_FORUM}</div>
        <!-- END tablehead -->
         
          <!-- BEGIN forumrow -->
          <tr>
              <!-- BEGIN inc -->
                  <div class="TopCategorie"></div>
          <div class="MidCategorie">
        <table class="forumline" width="80%" border="0" cellspacing="1" cellpadding="0">
            <!-- BEGIN tablefoot -->
        </table>
          </div>
          <div class="FootCategorie"></div>
          <!-- END tablefoot -->
       
              <!-- END inc -->
                  <td 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><td style="padding-left: 40px; text-align: right;" class="gensmall">{catrow.forumrow.POSTS} messages dans {catrow.forumrow.TOPICS} sujets.</td></tr></tbody></table>
                <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
                <span class="gensmall">
                   
                    {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                </span>
              </td>
              <td class="row3 over" align="center" valign="middle" height="50">
                    <!-- BEGIN ads -->
                    <span class="AD_LastPA">
                        <span class="lastpost-avatar"><img src="{catrow.forumrow.ads.IMG}" alt="{catrow.forumrow.ads.TITLE}" /></span>
                        <span class="AD_LastInfos">
                            <b><a href="{catrow.forumrow.ads.LINK}">{catrow.forumrow.ads.TITLE}</a></b><br />
                            {catrow.forumrow.ads.DATE}<br />
                            {catrow.forumrow.ads.LOCATION}
                        </span>
                    </span>
                    <!-- END ads -->
                    <!-- BEGIN avatar -->
                    <div style="width: 200px;"></div>
                    <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
                    <!-- END avatar -->

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

    Merci encore pour votre aide !
    'Christa
    'Christa
    FémininAge : 35Messages : 136

    le Dim 6 Sep 2020 - 22:09

    Hello!

    Il te faut des bases en conception de tableau pour affronter tout ceci plus facilement ^^ Je t'invite à lire quelques tutoriels sur les tableaux en HTML pour mieux cerner leur fonctionnement, mais de base il est important de savoir qu'un tableau, ça se code comme ça :

    Code:
    <table>
        <tr>
            <td> (une cellule) </td>
            <td> (une cellule) </td>
        </tr>
        <tr>
            <td> (une cellule) </td>
            <td> (une cellule) </td>
        </tr>
    </table>
    Les balises <table> </table> servent à définir une table, les balises <tr> </tr> définissent une ligne, et les balises <td> </td> définissent une cellule dans une ligne de tableau.

    Cette structure est normalisée et doit être respectée. Tu ne peux pas mettre de balise <div> à l'intérieur d'une table, ni d'une ligne, seulement à l'intérieur d'une cellule. C'est un peu comme si, dans excel, tu essayais de placer un élément à l'intérieur de la bordure entre les cellules ou les lignes.

    Les navigateurs se débrouillent généralement pour passer outre, mais les résultats vont généralement varier d'un navigateur à l'autre, ce qui n'est pas optimal.

    Bref, place ta ligne <div class="titrecat"> ... </div> au dessus de la balise de table, pour commencer Wink

    Pour mettre une image à la place du titre, ce n'est pas trop conseillé pour cause d'accessibilité (pour les personnes malvoyantes et lecteurs d'écran, entre autres choses) mais si tu y tiens, il te suffit juste de modifier le titre dans ton panneau d'administration pour y mettre une image (il me semble que le BBCode fonctionne, mais tu peux utiliser la balise <img>)

    En second lieu, la ligne qui contient le nombre de messages et de sujets est la suivante :
    Code:
    {catrow.forumrow.POSTS} messages dans {catrow.forumrow.TOPICS} sujets.
    Et celle qui contient le lien et l'auteur du dernier message est celle ci :
    Code:
     <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
    Tant que tu ne touches pas à la zone délimitée par les commentaires <!-- BEGIN avatar --> et <!-- END avatar -->, ça ne touchera pas à l'avatar ^^
    Cymrod
    Cymrod
    FémininAge : 28Messages : 7

    le Jeu 10 Sep 2020 - 16:39

    Bonjour Christa,

    Merci pour ces explications détaillées, j'arrive doucement à mieux décrypter les HTML. :)
    J'ignore pourquoi ma ligne s'est retrouvée au mauvais endroit, mais c'est normalement corrigé je crois !
    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 -->
     <div class="titrecat">{catrow.tablehead.L_FORUM}</div>
          <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
            <!-- END tablehead -->
           
              <!-- BEGIN forumrow -->
              <tr>
                  <!-- BEGIN inc -->
                      <div class="TopCategorie"></div>
              <div class="MidCategorie">
            <table class="forumline" width="80%" border="0" cellspacing="1" cellpadding="0">
                <!-- BEGIN tablefoot -->
            </table>
              </div>
              <div class="FootCategorie"></div>
              <!-- END tablefoot -->
         
                  <!-- END inc -->
                      <td 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><td style="padding-left: 40px; text-align: right;" class="gensmall">{catrow.forumrow.POSTS} messages dans {catrow.forumrow.TOPICS} sujets.</td></tr></tbody></table>
                    <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
                    <span class="gensmall">
                     
                        {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                    </span>
                  </td>
                  <td class="row3 over" align="center" valign="middle" height="50">
                        <!-- BEGIN ads -->
                        <span class="AD_LastPA">
                            <span class="lastpost-avatar"><img src="{catrow.forumrow.ads.IMG}" alt="{catrow.forumrow.ads.TITLE}" /></span>
                            <span class="AD_LastInfos">
                                <b><a href="{catrow.forumrow.ads.LINK}">{catrow.forumrow.ads.TITLE}</a></b><br />
                                {catrow.forumrow.ads.DATE}<br />
                                {catrow.forumrow.ads.LOCATION}
                            </span>
                        </span>
                        <!-- END ads -->
                        <!-- BEGIN avatar -->
                        <div style="width: 200px;"></div>
                        <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
                        <!-- END avatar -->

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


    Quand je parle d'image de catégorie, c'est surtout que je veux pouvoir modifier le titre pour qu'il soit plus grand car avec le template actuel, je ne sais pas comment lui donner une apparence différente. Si je peux déjà changer la police du titre, sa taille voire le centrer, ce serait bien. L'autre possibilité serait de mettre une image différente par catégorie dans le sens : un titre travaillé par photoshop sur fond transparent. Je vois des tutoriels proposer ce genre d'effets mais en comprenant toute la structure du forum.
    Je vois souvent ce genre de ligne de code mais je ne comprends pas où la placer :
    Code:
    <span>TITRE DU FORUM</span><img src="URL DE L'IMAGE" alt="Titre" />

    Concernant le nombre de messages et de sujets d'un message, je vois les lignes et comprends qu'elle peut être placée dans le template au-dessus de la ligne du dernier message posté. Malheureusement, toutes mes tentatives n'ont rien données pour avoir un résultat concluant sans avoir un texte qui devient énorme ou déforme tout le forum. Les tutoriels que j'ai trouvé à ce sujet ne correspondent pas à mon template. :/
    'Christa
    'Christa
    FémininAge : 35Messages : 136

    le Jeu 10 Sep 2020 - 22:00

    Hello :)

    Pour changer l'apparence du titre des catégories, il te faut utiliser la classe CSS .titrecat. Comme CSS actif génère le titre entouré de balises de titre de niveau 2 (h2), ça peut potentiellement demander à ce que tu cibles ce titre plutôt que juste la classe.

    Dans ta feuille de styles CSS, ça ressemblerait donc à ça :
    Code:

    .titrecat h2 {
      /* tes propriétés CSS */
    }

    La ligne de code que tu as citée mais que tu ne sais pas où placer est simplement ce que tu dois mettre dans ton panneau admin à la place du nom du forum/de la catégorie. Il y a des réglages à faire en amont cependant parce que si tu mets une image dans un titre, elle apparaitra partout où le nom du forum est affiché (en particulier dans le fil d'ariane).

    Note que c'est assez difficile de t'aider si on n'a pas ton code ni ton CSS résultant de tes essais ^^ Par exemple, dans le code que tu partages ci dessus, je vois que tu n'as pas tenté de déplacer
    Code:
    {catrow.forumrow.POSTS} messages dans {catrow.forumrow.TOPICS} sujets.
    juste au dessus de
    Code:
    <span class="gensmall">{catrow.forumrow.LAST_POST}</span>

    Peut-être que le résultat sera moche, mais l'important c'est d'apprendre quel est le résultat, qu'est-ce qui cloche, comment améliorer ce rendu, etc. Tu gagnerais également à apprendre à utiliser l'inspecteur de code de ton navigateur (touche F12), si tu ne le sais pas déjà, c'est très utile pour étudier le code généré par FA.

    Avoir des bases en HTML et CSS est évidemment un plus ^^ Je sais que beaucoup de gens qui veulent personnaliser leurs forums sur Forumactif y vont un peu à l'aveuglette et apprennent sur le tas, mais sérieusement, prendre quelques heures pour apprendre les bases sera toujours très utile sur le long terme.

    Pour en revenir à tes problèmes, je n'arrive pas à trouver de tutoriel probant sur NU, mais je sais qu'il y avait quelques tutoriels répondant à tes soucis sur CSS Actif du temps de son activité. Vu que l'année avant sa fermeture, on avait remis au goût du jour pas mal de tutoriels pour qu'ils soient un peu plus clairs/propres, même si ça remonte à 8 ans et que le code a évolué depuis, le thème phpbb2 n'a pas tellement évolué, les explications devraient être à peu près claires.

    • Modifier l'apparence des titres de catégories
    • Messages & sujets indiqués au dessus du dernier message posté
    • Modifier l'emplacement du nombre de sujets & messages d'un forum

    Sur un autre forum, il y a aussi ce tutoriel pour les catégories en images. Il est plus récent donc il sera peut-être plus facile à comprendre si tu en as besoin.

    A toi de faire des expériences ensuite !
    Cymrod
    Cymrod
    FémininAge : 28Messages : 7

    le Ven 11 Sep 2020 - 0:02

    Merci pour la précision concernant la ligne de code au sujet des catégories et d'avoir pris le temps de rédiger ce message !

    J'ai bien tenté de déplacer le code indiqué comme suit
    Code:
    {catrow.forumrow.POSTS} messages dans {catrow.forumrow.TOPICS} sujets.
                    <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
    mais, comme précisé dans mon dernier message, le résultat n'a pas été concluant.
    Spoiler:
    Code index-box pour modifier tablehead Pb_for10
    L'écriture devient très grosse et modifie le reste de la structure du forum. :/

    Je m'étais déjà aidée des tutoriels de CSS Actif (merci pour la recherche et désolée de ne pas les avoir cités) mais aucune tentative de manipulation des codes conseillés ne donne quoique ce soit avec mon template. C'est toujours un désastre. scratch

    De même pour les catégories, j'en reviens au même point qu'à l'ouverture de ce sujet Sad . J'ai également suivi le tutoriel. Mais, quand j'ajoute le css de base conseillé, ou tout autre css pour habiller les catégories, il ne se passe rien du tout. C'est comme si je n'avais rien ajouté.

    J'ai déjà passé un certain nombre d'heures sur le problème, mais il y a à ce stade des éléments qui bloquent dans mon code que je n'arrive pas à identifier. Bien sûr, j'imagine que ça vient des divers bricolages que j'ai fait au fur et à mesure de mes modifications de template et de css, mais j'aimerais trouver l'origine du problème afin de pouvoir garder mes paramétrages sur ce template.

    Voici le CSS en complément, si cela peut aider :

    Code:
     .lastpost-avatar {
        float: left;
        padding: 2px;
        }
        .lastpost-avatar img {
        width: 60px;
        height: 90px;
        border-radius: 1px;
        -moz-border-radius: 1px;
        -webkit-border-radius: 1px;
        }

    .bodyline
        {
        width: 950px;
        padding: 0;
        background: #c0c0c0;
        border-left: 5px solid #4c4842;
        border-right: 5px solid #4c4842;
        box-shadow: 0px 0px 10px #000000;
        -moz-box-shadow: 0px 0px 10px #000000;
        -o-box-shadow: 0px 0px 10px #000000;
        -htm-box-shadow: 0px 0px 10px #000000;
        -webkit-box-shadow: 0px 0px 10px #000000;
        }
          #i_logo
        {
          border-bottom: 1px solid #095279;
          width: 900px;
          height: 429px;
     
        }

        .forumline {padding:20px;
        background:#eeeeee;
        border:1px solid #bbbbbb;
        border-radius:20px;
        -moz-border-radius:20px;
        -webkit-border-radius:20px;}

        .bodylinewidth
        {
        width: 950px;
      margin-left: auto;
     margin-right: auto;
     margin-top: -9px;
     margin-bottom: -9px;
        }
        .bodyline
        {
        width: 800px;
        padding: 0;
        background: #c0c0c0;
        }

        .forumline
        {
        width: 98%;
        margin: auto;
        }
        table
        {
        width: 98%;
        margin: auto;
        }
    'Christa
    'Christa
    FémininAge : 35Messages : 136

    le Ven 11 Sep 2020 - 1:05

    Hello :3

    La raison pour laquelle les différents codes CSS proposés dans les tutos ne marchent pas forcément, c'est parce qu'ils ciblent des éléments précis du code.

    Par exemple celui du tuto que tu viens de citer :
    Code:
    .secondarytitle h2 {
     text-align: center; /*alignement du texte par rapport au bloc qui le contient */
     letter-spacing:2px; /* espacement entre les lettres */
     font-variant:small-caps; /* texte en petites majuscules */
      color:#ffffff; /* couleur du texte */
      font-family: Geneva, Tahoma, Verdana, sans-serif;
      font-size:16px;
    }

    Le sélecteur .secondarytitle h2 veut dire qu'il va sélectionner un titre <h2> à l'intérieur d'un bloc de classe .secondarytitle.

    Maintenant, regarde le code source par défaut dans le template index_box de phpbb2 correspondant à l'affichage du nom de la catégorie :

    Code:
    <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM}&nbsp;</th>
    C'est une cellule (th veut dire "table head", check la doc pour en savoir plus) qui comporte plein d'attributs divers, mais celui qui nous préoccupe est la classe qui lui est attribuée : class="secondarytitle".

    Compte tenu du fait que je t'ai expliqué plus haut que Forumactif remplace {catrow.tablehead.L_FORUM} par <h2> TON TITRE DE CATEGORIE </h2>, le style CSS cible donc spécifiquement les titres de catégorie d'un forum avec le thème phpbb2 de base.

    Dans ton cas très spécifique, puisque tu as mis ceci pour ta catégorie :
    Code:
     <div class="titrecat">{catrow.tablehead.L_FORUM}</div>
    Alors ton CSS doit impérativement ressembler à ceci (j'ai récupéré le code du tuto sur CSSActif)
    Code:
    /* Mise en forme du "bloc" qui contient le titre */
    .titrecat {
        background: #DEE3E7; /*fond*/
        /* Des coins arrondis */
        border-radius: 50px 50px 0 0;
        width: 500px;  /*largeur à modifier selon vos goûts*/
        margin: auto; /* on centre le bloc */
        padding: 2px; /*espace entre la bordure et le texte*/
        border: 2px solid #006699;
        border-bottom: 0px;
    }

    /* mise en forme du titre lui-même */
    .titrecat h2 {
        margin: 0; /* le titre a des marges par défaut, pour éviter de 'casser' nos réglages, on remet à zéro ici */
        text-align: center; /*alignement du texte par rapport au bloc qui le contient */
        letter-spacing: 2px; /* espacement entre les lettres */
        font-variant: small-caps; /* texte en petites majuscules */
        color: #006699; /* couleur du texte */
        font-family: Geneva, Tahoma, Verdana, sans-serif;
        font-size: 16px;
    }
    Note que j'ai remplacé le .TitreCategorie de l'exemple par .titrecat

    Pour la question de l'affichage des statistiques, naturellement que le texte devient gros, il faut simplement le mettre en forme Wink

    Tu peux, par exemple, lui mettre une classe spécifique. Ou réutiliser la classe .gensmall utilisée pour le dernier message, comme ça (et tant qu'à faire, rajoute un saut de ligne html entre les deux !) :
    Code:
    <span class="gensmall">{catrow.forumrow.POSTS} messages dans {catrow.forumrow.TOPICS} sujets.</span>
    <br />
    <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
    (La classe gensmall est une classe de base du thème phpbb2, elle fixe la taille du texte de certains éléments.)

    Copier coller du texte brut ne suffira pas à régler tes problèmes, tu dois jongler entre le CSS et le HTML pour avoir le rendu que tu souhaites. En principe, cette "solution" que je propose ne règle pas le problème de la colonne dans laquelle se trouvaient les statistiques, il te faut également trouver comment la retirer. C'est expliqué dans les tutoriels que j'ai cités ^^

    J'ai l'impression que tu es le genre de personne à effacer aussitôt un code qui "ne marche pas" ce qui rend toute assistance difficile. Du coup pour tes prochains essais, il te faudra partager le code exact que tu as essayé (CSS et HTML), et une capture d'écran du résultat, pour que je t'explique où sont tes erreurs. Pour le moment je suis beaucoup dans la supposition. Je ne compte pas te donner de code tout fait pour le résultat que tu souhaites, je ne fais que te guider, mais c'est dur de te guider si je ne sais pas ce que tu fais exactement :p


    Edit : Note également que ton code comporte beaucoup d'éléments étranges maintenant que je le lis sur un support plus adapté.

    Comme je l'ai expliqué récemment à quelqu'un d'autre dans un sujet de cette section, la structure basique d'un template index_box est la suivante :
    Code:
        <!-- BEGIN catrow -->
          <!-- BEGIN tablehead -->Tête de table<!-- END tablehead -->
          <!-- BEGIN cathead -->Zone supérieure d'une catégorie<!-- END cathead -->
          <!-- BEGIN forumrow -->Affichage d'un forum<!-- END forumrow -->
          <!-- BEGIN catfoot -->(oublie celle là)<!-- END catfoot -->
          <!-- BEGIN tablefoot -->Pied de table<!-- END tablefoot -->
        <!-- END catrow -->
    Ces commentaires ne sont pas là pour la décoration, ce sont des instructions qui servent à dire au template quel code charger à quel moment et combien de fois. Tout n'est pas obligatoire, mais globalement :
    • L'instruction catrow, well, c'est l'instruction qui dit "pour chaque catégorie, je veux que tu répètes tout le code entre BEGIN et END"
    • l'instruction tablehead affiche son contenu (l'en-tête du tableau des catégories) en haut d'une catégorie (c'est là qu'on ouvre la balise <table>),
    • L'instruction cathead affiche cette ligne si ton index est réglé sur "conserver les catégories sur l'index"
    • l'instruction forumrow affiche son contenu autant de fois qu'il y a de forums présents dans la catégorie,
    • l'instruction catfoot n'affiche RIEN (non, je ne sais pas pourquoi ça n'a toujours pas été retiré du template par défaut)
    • l'instruction tablefoot affiche son contenu en fin de catégorie (c'est là qu'on ferme la balise </table>).
    • L'instruction inc sert basiquement à dire au template "si le niveau de compression de l'index est réglé sur 'Aucun' alors affiche le code inclus entre les commentaires <!-- BEGIN inc --> et <!-- END inc -->". Dans les faits, ça rajoute une cellule pour décaler l'affichage des sous-forums.


    Bref, ce que je vois dans ton code, en bref, c'est ça :

    Code:
    <!-- BEGIN catrow -->
        <!-- BEGIN tablehead --><!-- END tablehead -->
        <!-- BEGIN forumrow -->
            <!-- BEGIN inc -->
                <!-- BEGIN tablefoot --><!-- END tablefoot -->
            <!-- END inc -->
        <!-- END forumrow -->
        <!-- BEGIN catfoot --><!-- END catfoot -->
        <!-- BEGIN tablefoot --><!-- END tablefoot -->
    <!-- END catrow -->
    Il se passe des trucs louches, non ?

    De sucroit, ce fameux bout de code avec les instructions inc et tablefoot suspectes :
    Code:
        <tr>
          <!-- BEGIN inc -->
          <div class="TopCategorie"></div>
          <div class="MidCategorie">
            <table class="forumline" width="80%" border="0" cellspacing="1" cellpadding="0">
                <!-- BEGIN tablefoot -->
            </table>
          </div>
          <div class="FootCategorie"></div>
          <!-- END tablefoot -->

          <!-- END inc -->
    La ligne contenant les différentes cellules s'ouvre juste avant. Or, qu'est-ce que je vois? Des <div>, pas des cellules ! Qu'est-ce que j'ai dit à propos de mettre des <div> dans les tableaux ? @o@
    Contenu sponsorisé


      La date/heure actuelle est Dim 27 Sep 2020 - 12:58