Apparence des catégories

[Giudizio]

Bonjour,

Je ne suis sûrement pas la première à vous le demander, ni sans doute la dernière x) j'aimerais modifier l'apparence de mes catégories, j'ai fouillé sur Forumactif mais je n'ai rien trouvé qui me convenait, je ne veux pas un truc trop compliqué, je vous ai fais un schéma :

Spoiler:

J'aimerais qu'il n'y ai pas de bordures autour de l'icon (vérouillé, new ou no new), dites moi si j'ai oublié quelque chose sur le schéma.

Je suis l'administrateur du forum, en version phpbb2, voici le lien : http://rebornorigins-mafia.forumactif.com/
Je n'ai pas modifié mon template index_box, il est donc par défaut et j'ai un CSS personnalisé.

Je vous remercie de m'avoir lu et merci à la personne qui prendra le temps de me répondre (:

[Elissa]

Bonjour,

Vous savez que le template concerné est l'Index_box, c'est un très bon début
Je veux bien vous aider, mais j'aimerai que vous me donniez une "base", en chipotant avec votre template, par exemple (la template est utilisée pour la mise en place des éléments, les cadres et autres décorations seront faits avec le CSS).

[Giudizio]

Je ne suis pas certaine d'avoir compris ce que vous vouliez dire par "base", je vous donne donc mon index_box, vous parliez peut-être d'une partie de l'index_box en question ?

Spoiler:

[Giudizio]

Up !

[Elissa]

Bonjour,

Une base dans le sens où j'aimerai que vous travailliez un peu votre template vous même, afin d'obtenir le résultat que vous souhaitez. Disons que c'est un peu facile de donner un code tout fait, vous n'apprenez rien... D'où le fait que je vous demande d'essayer de votre côté en premier

[Invité]

Bonjour,

Cela vous aidera peut-être:
Dans le template Index_box, vous avez ceci:

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

en vert la cellule du titre de catégories
en violet la cellule du titre des sujets
en bleu la cellule du titre des messages
en rouge la cellule du titre du dernier message

Qui correspondent aux cellules de contenus:

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

La partie non colorée correspond aux images des catégories/forum (nouveau, pas nouveau, verrouillé).

Les variables:
{catrow.forumrow.FORUM_NAME} => le nom du forum
{catrow.forumrow.FORUM_DESC} => description du forum
{catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS} => affichage des modérateurs
{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS} => liens vers les niveaux inférieurs
{catrow.forumrow.TOPICS} => nombre de sujets
{catrow.forumrow.POSTS} => nombre de messages
{catrow.forumrow.LAST_POST} => dernier message.

Avec l'aide de quelques div, du CSS et en réorganisant les variables dans le tableau éxistant, vous pourrez réaliser ce que vous souhaitez.

Il y a aussi:
--> https://forum.forumactif.com/t261562-

Bien sincèrement.

[Giudizio]

Merci beaucoup Azami pour ton aide, je pense que grâce à ce que tu m'a donné j'ai pu m'en sortir !

Elissa voici ce que j'ai travaillez sur mon template :

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>
   </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">
                      <table> <tr> <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}"><div style="padding-left: 40px;">{catrow.forumrow.FORUM_NAME}</div></a> </tr>
        </span>
                      <tr> </h{catrow.forumrow.LEVEL}></td><td style="padding-left: 40px; text-align: left;" class="gensmall">{catrow.forumrow.POSTS} balles dans {catrow.forumrow.TOPICS} cibles.</td></tr></tbody></table> </tr>
                                  <tr><td><div class="wordsdesc"><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 -->
            {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                                    </span></td>
      </td>
      <td class="post" align="center" valign="middle" height="50">
         <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
                  </td>  </tr></table>
   </tr>
   <!-- END forumrow -->

On peut voir le rendu sur le forum : http://rebornorigins-mafia.forumactif.com/

Mais j'aimerai que la description des forums soit dans un cadre fixe et enlever la séparation des cellules si possible

[Giudizio]

Up !

[Invité]

Bonjour,

Dans votre CSS, pour votre class wordsdesc, ajoutez 2 propriétés:

Code:

height: HAUTEUR FIXE VOULUE;
overflow-y: auto;

Pour les séparations, essayez ceci dans le CSS:

Code:

.forumline{
border-spacing: 0;}

J'ai vu beaucoup de rouge vif dans votre code, ce n'est j'amais très bon, , essayez comme 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>
  </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%"><tr><td colspan="2">
                    <h{catrow.forumrow.LEVEL} class="hierarchy">
                      <div style="padding-left: 40px;"><span class="forumlink"><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></span></div></h{catrow.forumrow.LEVEL}>
                  </td></tr>
       
                      <tr><td style="padding-left: 40px; text-align: left;" colspan="2" class="gensmall">{catrow.forumrow.POSTS} balles dans {catrow.forumrow.TOPICS} cibles.
                        </td></tr>
                                  <tr><td><div class="wordsdesc"><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 -->
            {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                                    </span></td>
      <td class="post" align="center" valign="middle" height="50">
        <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
                                    </td></tr>
                  </table>
    </td>
  </tr>
  <!-- END forumrow -->

Bien sincèrement.

[Giudizio]

Merci beaucoup, ça fait moins brouillon dans mon template x)

Et j'aimerais savoir comment faire pour que les liens menant au sous-forums ne soit pas collé au cadre, qu'il y est un espace.

Et je me suis aussi rendu compte qu'en ajoutant le css des bordures pour wordsdesc & post, cela avait également influé sur la taille de la zone d'écriture des messages & de ma chatbox et des champs du profil, est-ce normal ?

[Invité]

La class "post" existe déjà dans certains template, c'est pour cela que cela agit sur vos messages . Modifiez le nom que vous avez choisi pour les derniers messages et tout devrait rentrer dans l'ordre .

Ajoutez la propriété margin-bottom: Xxpx à votre paragraphe wordsdesc pour espacer les sous-forums .

Bien sincèrement.

[Giudizio]

Merci beaucoup, tout ça marche

Il me reste juste une dernière petite question >< je n'arrive pas à régler la hauteur pour les derniers messages, je voudrais qu'il soit de 85px comme la description des forums mais j'ai beau le rajouter dans mon CSS, ça ne marche pas, et là j'avoue je suis perdue o_o

[Invité]

Vous avez appliqué la class sur la cellule du tableau, c'est pour cela que vous ne pouvez pas en faire ce que vous voulez. Placez une div à l'intérieur de la cellule avec la class, et ça devrait fonctionner.

Au lieu de:

Code:

<td class="XYZ" align="center" valign="middle" height="50">
        <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
                                    </td>

Essayez:

Code:

<td align="center" valign="middle" height="50"><div class="XYZ">
        <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
                                  </div> </td>

Bien sincèrement.

[Giudizio]

Ah bah oui, c'est tout con, je l'avais fait pour wordsdesc & pas pour l'autre --' merci !
Par contre ça me fait un décalage entre les deux, pas énorme, mais y-a-til un moyen pour qu'il n'y en est plus ?

[Invité]

Bonjour ,

Le décalage est certainement causé par l'alignement vertical:

<td align="center" valign="middle" height="50"><div class="lastpost">

Remplacez middle par top, et pour enfoncer le clou, ajoutez valign="top" à la cellule(td) contenant la description.

Après c'est juste un ajustement via le CSS entre les padding, les margin et les height .

Bien sincèrement.

[Giudizio]

Merci, cela marche !

Et un grand merci à vous pour le temps que vous avez pris pour m'aider, j'ai pu apprendre comme ça ! Le sujet est résolu