[MODERNBB] Modification des catégories et des sous-catégories ( Thème ModernBB )

Hello Timothée,
je serais absent jusqu'à Dimanche.
Avant toute intervention de ma part.
Tu veux simplement déposer tes catégories à l'horizontal?

Pour cela comment as tu configuré la compression sur l'index ?:

Affichage/Page d'acceuil/ Structure et hiérarchie/Niveau de compression de l'index

Hello Timothée,
juste avant de me sauver,
en partant d'avoir une compression de l'index :
Séparer les catégories sur l'index coché sur "Complet" :

Avec ce template modifié:

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="index_fc">

          <div class="categorie">{catrow.tablehead.L_FORUM}</div>
      <!-- END tablehead -->
      <!-- BEGIN forumrow -->
          <div class="forum">
                    <div class="forum_case">
                        <div class="description">{catrow.forumrow.FORUM_DESC}</div>
                        <div class="bottom_section"></div>
                        <div class="bottom_border"></div>                 
                        <div class="forum_name"><a class="forum_link" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div>
                        <div class="tnm">{catrow.forumrow.POSTS} messages dans {catrow.forumrow.TOPICS} sujets</div>
                    </div>
               
          </div>
  <!-- END forumrow -->
<!-- BEGIN tablefoot -->
 
    </div>
<!-- END tablefoot -->
 <!-- END catrow -->


Et cette C.S.S:
(donc supprimer celle que tu as fournie).

Code:

.index_fc{width:40%;display: inline-block;margin:5%;background-color: #111418;}

    .categorie {
      position: relative;
      clear: both;
      height: 50px;
      position: relative;
      margin-top: 50px;
      margin-bottom: -18px;
      margin-left: 35px;
      z-index: 2;
    }

    .categorie_txt {
      position: relative;
      font-size: 40px;
      font-family: 'Josefin Slab', Georgia, serif;
      color: #fff;
      text-shadow: 1px 1px 2px #000;
      text-align: right;
    }

    .forum {
     
      margin: auto !important;
    }

    .forum_case {
   
   
      height: 245px;
     
    }

    .description {
      position: relative;
      width:100%;
      height: 245px;
      margin: 0 !important;
      padding: 0 !important;
    }

    .bottom_section {
      position: relative;
      margin-top: -40px;
      width:100%;
      height: 40px;
      background-color: #fff;
      opacity: 0.3;
    }

    .bottom_border {
      position: relative;
      margin-top: -40px;
    width:100%;
      height: 40px;
      border-top: 1px solid #fff;
    }

    .tnm {
      position: relative;
      margin-top: -30px;
      height: 30px;
      width:90%;
      margin-right: 11px;
      text-align: right;
      font-size: 12px;
      color: #ffffff;
      text-shadow: 1px 1px 2px #000;
      font-family: Georgia, Arial, serif;
    }

    .forum_name {
      position: relative;
      margin-top: -30px;
      height: 30px;
      width:90%;
      margin-left: 10px;
      z-index: 2;
    }

    .forum_link {
      color: #fff !important;
      text-shadow: 1px 1px 2px #000;
      font-variant: small-caps !important;
      text-decoration: none;
      font-size: 16px;
      font-family: Georgia, Arial, serif;
    }

    .description_img {
      position: relative;
      width: 490px;
      height: 245px;
      margin-top: -245px;
      -webkit-transition: 1s;
      transition: 1s;
      -webkit-transform: all;
      transform: all;
    }

    .description_img:hover {
      position: relative;
      width: 490px;
      height: 245px;
      margin-top: -245px;
      -webkit-transition: 1s;
      transition: 1s;
      -webkit-transform: all;
      transform: all;
      opacity: 0.2;
    }

    .description_txt {
      position: relative;
      width:90%;
      height: 215px;
      padding: 15px;
      color: #fff;
      text-shadow: 1px 1px 2px #000;
      font-size: 12px;
      font-family: Georgia, Arial, serif;
      text-align: justify;
    }

On obtient les catégories côte à côte
Il faudra faire des ajustements mais il est impératif de travailler en pourcentage.
Dans ce cas les pixels sont a proscrire.

A Dimanche.

Hello Phill !

Avant tout, merci pour ton aide ! :)

Pour le niveau de compression, je suis en Moyen dans la section " Séparer les catégories sur l'index ". C'est celle qui correspond le mieux à ce que je recherche.

Pour être plus exacte, j'aimerai pouvoir afficher les forums des catégories, les uns à côté des autres ( toujours avec 980px en largeur malgré la séparation  et 245px en hauteur ) :



Ensuite, pour la deuxième modification. Si c'est possible, j'aimerai que, quand je clique sur un des forums, les sous-forum soient dans le même style que les forum décrit juste avant, mais seuls. Et cette fois ci n'ont pas les un à côté des autres, mais les uns en dessous des autres.


Je suppose que c'est possible, peut être en reprenant l'idée des catégories...


Merci encore et bon weekend à vous !!

Hello Timothée,

alors pour toutes tes demandes, il est impératif de travailler en pourcentage comme je l'ai mentionnais plus haut.
Ensuite, tu mentionnes de déposer chaque catégorie avec un forum à l’intérieur et les autres à côté:



Comment fais-ton si tu as plus de 2 forums dans une catégorie ?

Pour la compression il faut aussi qu'elle soit sur complet.
Malheureusement on ne pourra avoir la même apparence sur les sous fofos et les catégories, leurs structures et totalement différentes...
Les pixels sont à proscrire.
Pour être certain d'obtenir quelque chose de correcte il faut mettre

Hello Phil !


En fait, avec le code que je t'ai passé, les forums dans les catégories se mettent automatiquement les uns en dessous de autres :



Donc en moyen comme mode de compression, je peux en ajouter autant que je veux, ils se mettront toujours les uns en dessous des autres.

Quand tu dis qu'il est impératif de travailler en pourcentage, tu veux dire que les dimensions que j'ai précisé dans mon premier en post en px, doivent être converti en % ? IL y a un truc que je dois mal comprendre puisque si je me fie à ce site( https://nekocalc.com/fr/px-a-pourcentage-convertisseur ), mes 980px donnent 6125% ! ^^"


Merci encore de prendre le temps de m'aider et bonne fin de week end ! :)

Hello Timothée,
tu peux tester ce style en remplacement du tien:

Code:

.index_fc
{
width: 80%;
margin-left: 10%;
}
.forum
{
margin-top:30px; 
}


    .forum_case {
      float: left;
      width: 45%;
      height: 245px;
      background-color: #111418;
  padding-left:2%;
    }



.index_fc::after {
      clear: both;
      content: "";
      display:block;
    }

    .categorie {
      position: relative;
      clear: both;
      height: 50px;
      position: relative;
      margin-top: 50px;
      margin-bottom: -18px;
      margin-left: 35px;
      z-index: 2;
    }

    .categorie_txt {
      position: relative;
      font-size: 40px;
      font-family: 'Josefin Slab', Georgia, serif;
      color: #fff;
      text-shadow: 1px 1px 2px #000;
      text-align: right;
    }

 


    .description {
      position: relative;
      width: 95%;
      height: 245px;
      margin: 0 !important;
      padding: 0 !important;
    }

    .bottom_section {
      position: relative;
      margin-top: -40px;
      width: 95%;
      height: 40px;
      background-color: #fff;
      opacity: 0.3;
    }

    .bottom_border {
      position: relative;
      margin-top: -40px;
    width: 95%;
      height: 40px;
      border-top: 1px solid #fff;
    }

    .tnm {
      position: relative;
      margin-top: -30px;
      height: 30px;
    width: 90%;
      margin-right: 11px;
      text-align: right;
      font-size: 12px;
      color: #ffffff;
      text-shadow: 1px 1px 2px #000;
      font-family: Georgia, Arial, serif;
    }

    .forum_name {
      position: relative;
      margin-top: -30px;
      height: 30px;
    width: 95%;
      margin-left: 10px;
      z-index: 2;
    }

    .forum_link {
      color: #fff !important;
      text-shadow: 1px 1px 2px #000;
      font-variant: small-caps !important;
      text-decoration: none;
      font-size: 16px;
      font-family: Georgia, Arial, serif;
    }

    .description_img {
      position: relative;
      width: 95%;
      height: 245px;
      margin-top: -245px;
      -webkit-transition: 1s;
      transition: 1s;
      -webkit-transform: all;
      transform: all;
    }

    .description_img:hover {
      position: relative;
      width: 95%;
      height: 245px;
      margin-top: -245px;
      -webkit-transition: 1s;
      transition: 1s;
      -webkit-transform: all;
      transform: all;
      opacity: 0.2;
    }

    .description_txt {
      position: relative;
    width: 95%;
      height: 215px;
      padding: 15px;
      color: #fff;
      text-shadow: 1px 1px 2px #000;
      font-size: 12px;
      font-family: Georgia, Arial, serif;
      text-align: justify;
    }


Il faut travailler en pourcentage.

La class index_fc regroupe toutes tes catégories et forum.
Il faut lui attribuer une largeur 80% puis on décale de 10% de la gauche pour centrer les forums.

La class forum_case concerne les forums qui est dans la class index_fc.
On a donc deux forums et chacun d'entre eux auront à peine le moitié car il faut compter les espaces.


On lui donne la largeur 45% et un padding-left de 2% .

Pour deux forums:

On arrive donc 45X 2 = 90 et 2 padding-left a 2% =99%

On ne pourra guère faire mieux.

Hello Phil !

Désolé pour la réponse tardive !

C'est niquel pour moi ! Merci beaucoup !


Bonne soirée ! :)

Hello Timothée,

de rien cher ami.