commande pour les catégorie [Elena]

Coucou La Tambouille, j'ai besoin de votre aide pour améliorer le visuel de mon forum. J'aimerai déplacer le titre des catégories au dessus du bloc en le centrant. Supprimer les espaces indésirables ou au contraire augmenter l'espace entre les catégories afin que l'ensemble soit aéré. je suis très mauvaise pour expliquer alors j'espère que ma maquette sera plus claire. Sinon n'hésitez pas à me demander plus d'explication. Merci.



Type de commande (modification de templates, en-tête, qeel, mise en page de messages, pub, autres) :css et template certainement ?
Pour quel forum :https://bridgerton.forumactif.com
Maquette graphique/schéma/croquis :
Informations utiles (couleurs, images, etc, …) : mettre une couleur de base (noire) pour le titre je pense pouvoir me débrouiller pour la changer ensuite. Idem pour la police, Roboto pour la base, 20px.
[Pour les modifications de templates] Version du forum (PhpBB2, PhpBB3, PunBB, Invision, ModernBB ou AwesomeBB) :AwesomeBB
Le code pourra-t-il être mis en libre service ensuite ? Oui

Bonjour

Attention aux consignes du post

Tu peux donc passer une commande en ouvrant un nouveau sujet avec un titre assez explicite et le formulaire suivant.

Je vais donc diviser le sujet pour cette fois mais attention la prochaine fois

Peux-tu me dire ce qui est coché dans ton panneau d'administration dans Affichage > Structure et hiérarchie ?

Bonne soirée

Bonjour Mäven, désolée, je suis étourdie, quand je m'en suis rendue compte il était trop tard je ne pouvais plus effacer.

Séparer les catégories sur l'index : moyen
Merci pour ton retour.

Hello =)

Est-ce que c'est bien ça que tu souhaites ?
https://commandes-maven-tamb.forumactif.com/

Coucou Mäven, dans la base oui c'est bien cela. Néanmoins, un petit correctif. Il faudrait augmenter l'espace entre le titre catégorie et le bloc en dessous. Idem pour le titre du forum, il faudrait espacer celui-ci avec la description.
Sur mon forum, j'ai du css qui me permets de supprimer :
- "voir les messages sans réponses"
- nombre de sujets
- nombre de messages

Je le précise au cas où.



Merci, une belle journée à toi.

Ah pour l'espace comme tu as mis de supprimer l'espace je l'avais enlevé ^^

Pour le reste j'ai juste fait les petites modif' demandées, le reste gardera tes codes actuels.
Sauf si tu as envie de refaire tout le template ?

Le plus simple serait que je te montrer directement sur tes codes de forum. Peux-tu retirer le mode maintenance sur ton forum quelques heures le temps que je fasse et te montre ?

Coucou Mäven, oui j'ai enlevé la maintenance. Je te suis et te fais confiance pour faire au mieux.

Hello =)


Est-ce que ça se rapproche plus de ce que tu veux ?

Coucou Mäven, merci beaucoup c'est parfait. Pour finaliser, peut-on ajouter encore un peu d'espace en dessous du titre de la catégorie ?  Si j'utilise une autre police et surtout avec un px plus important, l'espace en dessous de la catégorie va t-il se réduire ? (vu que la police pourrait être plus grande) Ou s'adapte t-il ?

Les espaces vont s'adapter

Alors du coup pour installer cela, voilà la CSS que tu dois mettre dans ton PA -> Affichage -> Couleur & css -> Feuille de style css

Code:

.titre_categorie{
  text-align:center;
}
.forum-section{
  margin:0 !important;
}

Ensuite dans le template index_box il faut que tu cherches ceci :

Code:

<!-- BEGIN tablehead -->
<div class="forum {catrow.tablehead.TYPE_TABLE_SECTION}">

Tu vas supprimer tout ce qui suit cela jusqu'à

Code:

<!-- END tablehead -->

Et tu vas ajouter, cela à la place :

Code:

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

Tu enregistre et tu publies.
Dis moi ce que tu en penses et on fera les ajustements

Coucou Mäven, j'ai un gros bug. Voici ce que cela donne.

Tu peux me montrer ton template index box stp ?

Oui je l'ai laissé avec la modif.

Code:

<ul class="action-bar action-bar-top">
   <!-- BEGIN switch_user_logged_in -->
   <li>
      <a href="{U_SEARCH_NEW}">
         <i class="material-icons">new_releases</i> {L_SEARCH_NEW}
      </a>
   </li>
   <li>
      <a href="{U_SEARCH_SELF}">
         <i class="material-icons">account_box</i> {L_SEARCH_SELF}
      </a>
   </li>
   <!-- END switch_user_logged_in -->
   <li>
      <a href="{U_SEARCH_UNANSWERED}">
         <i class="material-icons">chat_bubble_outline</i> {L_SEARCH_UNANSWERED}
      </a>
   </li>
   <!-- BEGIN switch_user_logged_in -->
   <li class="rightside">
      <a href="{U_MARK_READ}" accesskey="m">
         <i class="material-icons">done_all</i> {L_MARK_FORUMS_READ}
      </a>
   </li>
   <!-- END switch_user_logged_in -->
</ul>

<!-- BEGIN catrow -->
 <div class="titre_categorie">{catrow.tablehead.L_FORUM}</div>

   <!-- BEGIN forumrow -->
   <div class="forum-section {catrow.forumrow.FOLDER_CLASSNAME} {catrow.forumrow.TYPE_SECTION}">
      <div class="forum-icon" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}">
         <i class="material-icons">forum</i>
      </div>
      <div class="forum-content">
         <div class="forum-description">
            <h3><a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></h3>
            <p>{catrow.forumrow.FORUM_DESC}</p>
            {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
         </div>
         <div class="forum-statistics">
            <span class="forum-statistics-topics">{catrow.forumrow.TOPICS} <span>{L_TOPICS}</span></span>
            <span class="forum-statistics-posts">{catrow.forumrow.POSTS} <span>{L_POSTS}</span></span>
         </div>
         <div class="forum-lastpost">
            <div class="avatar-default">
               <!-- BEGIN avatar -->
               {catrow.forumrow.avatar.LAST_POST_AVATAR}
               <!-- END avatar -->
               <!-- BEGIN ads -->
               <img src="{catrow.forumrow.ads.IMG}" alt="{catrow.forumrow.ads.TITLE}"/>
               <!-- END ads -->
            </div>
            <div class="forum-lastpost-inner">
               <!-- BEGIN switch_topic_title -->
               <a class="topic-title" href="{catrow.forumrow.U_LATEST_TOPIC}"
                 title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a>
               <!-- END switch_topic_title -->
               <!-- BEGIN ads -->
               <a class="topic-title" href="{catrow.forumrow.ads.LINK}"
                 title="{catrow.forumrow.ads.TITLE}">{catrow.forumrow.ads.TITLE}</a>
               <!-- END ads -->
               <span>
                     <!-- BEGIN ads -->
                        <span class="forum-lastpost-location">
                           <i class="material-icons">place</i>{catrow.forumrow.ads.LOCATION}
                        </span>
                  <!-- END ads -->
                     <span class="forum-lastpost-author">
                        <i class="material-icons">person</i>{catrow.forumrow.USER_LAST_POST}
                                <!-- BEGIN ads -->
                                {catrow.forumrow.ads.ALIAS}
                                <!-- END ads -->
                     </span>
                     <span class="forum-lastpost-time">
                        <i class="material-icons">access_time</i><a href="{catrow.forumrow.U_LATEST_TOPIC_POST}">{catrow.forumrow.LAST_POST_HOUR}</a>
                        <!-- BEGIN ads -->
                                {catrow.forumrow.ads.DATE}
                                <!-- END ads -->
                     </span>
                  </span>
            </div>
         </div>
      </div>
   </div>
   <!-- END forumrow -->

   <!-- BEGIN tablefoot -->
</div><!-- <div class="forum" /> -->
<!-- END tablefoot -->
<!-- END catrow -->

<!-- BEGIN switch_forum_images -->
<div class="forum">
   <div class="forum-header">
      <div class="category-title">
         <i class="material-icons">mms</i>
         <span>{switch_forum_images.TITLE}</span>
      </div>
   </div>
   <div class="container-imgs-list" style="max-height: 500px; margin-top: 8px" id="imageList">
        {switch_forum_images.SCRIPTS}
   </div>
</div>
<!-- END switch_forum_images -->

<!-- BEGIN switch_on_index -->
<ul class="action-bar action-bar-bottom">
   <li>
      <a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a>
   </li>
   <li>
      <a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a>
   </li>
   <li class="last">
      <a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a>
   </li>
   <!-- BEGIN switch_delete_cookies -->
   <li class="rightside">
      <a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" rel="nofollow">
         <i class="material-icons">delete</i>&nbsp;{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}
      </a>
   </li>
   <!-- END switch_delete_cookies -->
</ul>
<!-- END switch_on_index -->

<script type="text/javascript">
   //<![CDATA[
   $(document).ready(function () {
      var curid = '{CUR_ID}';

      var btn_collapse = $('<div/>', {
         class: 'forum-hide',
         html: '<div class="forum-hide-icon-a"></div><div class="forum-hide-icon-b"></div>',
      });

      var collapsed = [];

      if (readCookie('collapsed') != null && readCookie('collapsed') != '') {
         collapsed = readCookie('collapsed').split(',');
      }

      $(document).on('click', '.forum-hide', function () {
         $(this).toggleClass('forum-show');
         $(this).parents('.forum').toggleClass('forum-hidden');

         if (readCookie('collapsed') != null && readCookie('collapsed') != '') {
            collapsed = readCookie('collapsed').split(',');
         }

         if (!$(this).parents('.forum').hasClass('forum-hidden')) {
            removeFromArray(curid + '.' + $(this).parents('.forum').data('cindex'), collapsed);

            createCookie('collapsed', collapsed);
         } else {
            collapsed.push(curid + '.' + $(this).parents('.forum').data('cindex'));

            createCookie('collapsed', collapsed);
         }
      });

      $('.forum').each(function (i) {
         $(this).data('cindex', '' + i);

         $(btn_collapse)
            .clone()
            .attr('id', 'forum' + i)
            .appendTo($(this).find('.forum-header'));

         if ($.inArray(curid + '.' + i, collapsed) > -1) {
            $(this).find('.forum-hide').toggleClass('forum-show');
            $(this).toggleClass('forum-hidden');
         }

         if ($(this).find('.type-classified').length) {
            $(this)
               .addClass('type-table-classified')
               .find('.type-classified')
               .find('.forum-statistics-posts').remove();
         }
      });
   });

   function removeFromArray(item, array) {
      var i = array.indexOf(item);

      if (i > -1) {
         array = array.splice(i, 1);
      }
   }

   function createCookie(name, value, days) {
      var expires;

      if (days) {
         var date = new Date();
         date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
         expires = "; expires=" + date.toGMTString();
      } else {
         expires = "";
      }
      document.cookie = encodeURIComponent(name) + "=" + encodeURIComponent(value) + expires + "; path=/";
   }

   function readCookie(name) {
      var nameEQ = encodeURIComponent(name) + "=";
      var ca = document.cookie.split(';');
      for (var i = 0; i < ca.length; i++) {
         var c = ca[i];
         while (c.charAt(0) === ' ') c = c.substring(1, c.length);
         if (c.indexOf(nameEQ) === 0) return decodeURIComponent(c.substring(nameEQ.length, c.length));
      }
      return null;
   }

   //]]>
</script>


Ah oui tu as supprimé un peu trop

Si tu regardes mon message je te disais de laisser deux petites choses.
Voilà ton template corrigé

Code:

<ul class="action-bar action-bar-top">
  <!-- BEGIN switch_user_logged_in -->
  <li>
      <a href="{U_SEARCH_NEW}">
        <i class="material-icons">new_releases</i> {L_SEARCH_NEW}
      </a>
  </li>
  <li>
      <a href="{U_SEARCH_SELF}">
        <i class="material-icons">account_box</i> {L_SEARCH_SELF}
      </a>
  </li>
  <!-- END switch_user_logged_in -->
  <li>
      <a href="{U_SEARCH_UNANSWERED}">
        <i class="material-icons">chat_bubble_outline</i> {L_SEARCH_UNANSWERED}
      </a>
  </li>
  <!-- BEGIN switch_user_logged_in -->
  <li class="rightside">
      <a href="{U_MARK_READ}" accesskey="m">
        <i class="material-icons">done_all</i> {L_MARK_FORUMS_READ}
      </a>
  </li>
  <!-- END switch_user_logged_in -->
</ul>

<!-- BEGIN catrow -->
<!-- BEGIN tablehead -->
<div class="forum {catrow.tablehead.TYPE_TABLE_SECTION}">
 <div class="titre_categorie">{catrow.tablehead.L_FORUM}</div>
   <!-- END tablehead -->
  <!-- BEGIN forumrow -->
  <div class="forum-section {catrow.forumrow.FOLDER_CLASSNAME} {catrow.forumrow.TYPE_SECTION}">
      <div class="forum-icon" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}">
        <i class="material-icons">forum</i>
      </div>
      <div class="forum-content">
        <div class="forum-description">
            <h3><a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></h3>
            <p>{catrow.forumrow.FORUM_DESC}</p>
            {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
        </div>
        <div class="forum-statistics">
            <span class="forum-statistics-topics">{catrow.forumrow.TOPICS} <span>{L_TOPICS}</span></span>
            <span class="forum-statistics-posts">{catrow.forumrow.POSTS} <span>{L_POSTS}</span></span>
        </div>
        <div class="forum-lastpost">
            <div class="avatar-default">
              <!-- BEGIN avatar -->
              {catrow.forumrow.avatar.LAST_POST_AVATAR}
              <!-- END avatar -->
              <!-- BEGIN ads -->
              <img src="{catrow.forumrow.ads.IMG}" alt="{catrow.forumrow.ads.TITLE}"/>
              <!-- END ads -->
            </div>
            <div class="forum-lastpost-inner">
              <!-- BEGIN switch_topic_title -->
              <a class="topic-title" href="{catrow.forumrow.U_LATEST_TOPIC}"
                title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a>
              <!-- END switch_topic_title -->
              <!-- BEGIN ads -->
              <a class="topic-title" href="{catrow.forumrow.ads.LINK}"
                title="{catrow.forumrow.ads.TITLE}">{catrow.forumrow.ads.TITLE}</a>
              <!-- END ads -->
              <span>
                    <!-- BEGIN ads -->
                        <span class="forum-lastpost-location">
                          <i class="material-icons">place</i>{catrow.forumrow.ads.LOCATION}
                        </span>
                  <!-- END ads -->
                    <span class="forum-lastpost-author">
                        <i class="material-icons">person</i>{catrow.forumrow.USER_LAST_POST}
                                <!-- BEGIN ads -->
                                {catrow.forumrow.ads.ALIAS}
                                <!-- END ads -->
                    </span>
                    <span class="forum-lastpost-time">
                        <i class="material-icons">access_time</i><a href="{catrow.forumrow.U_LATEST_TOPIC_POST}">{catrow.forumrow.LAST_POST_HOUR}</a>
                        <!-- BEGIN ads -->
                                {catrow.forumrow.ads.DATE}
                                <!-- END ads -->
                    </span>
                  </span>
            </div>
        </div>
      </div>
  </div>
  <!-- END forumrow -->

  <!-- BEGIN tablefoot -->
</div><!-- <div class="forum" /> -->
<!-- END tablefoot -->
<!-- END catrow -->

<!-- BEGIN switch_forum_images -->
<div class="forum">
  <div class="forum-header">
      <div class="category-title">
        <i class="material-icons">mms</i>
        <span>{switch_forum_images.TITLE}</span>
      </div>
  </div>
  <div class="container-imgs-list" style="max-height: 500px; margin-top: 8px" id="imageList">
        {switch_forum_images.SCRIPTS}
  </div>
</div>
<!-- END switch_forum_images -->

<!-- BEGIN switch_on_index -->
<ul class="action-bar action-bar-bottom">
  <li>
      <a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a>
  </li>
  <li>
      <a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a>
  </li>
  <li class="last">
      <a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a>
  </li>
  <!-- BEGIN switch_delete_cookies -->
  <li class="rightside">
      <a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" rel="nofollow">
        <i class="material-icons">delete</i>&nbsp;{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}
      </a>
  </li>
  <!-- END switch_delete_cookies -->
</ul>
<!-- END switch_on_index -->

<script type="text/javascript">
  //<![CDATA[
  $(document).ready(function () {
      var curid = '{CUR_ID}';

      var btn_collapse = $('<div/>', {
        class: 'forum-hide',
        html: '<div class="forum-hide-icon-a"></div><div class="forum-hide-icon-b"></div>',
      });

      var collapsed = [];

      if (readCookie('collapsed') != null && readCookie('collapsed') != '') {
        collapsed = readCookie('collapsed').split(',');
      }

      $(document).on('click', '.forum-hide', function () {
        $(this).toggleClass('forum-show');
        $(this).parents('.forum').toggleClass('forum-hidden');

        if (readCookie('collapsed') != null && readCookie('collapsed') != '') {
            collapsed = readCookie('collapsed').split(',');
        }

        if (!$(this).parents('.forum').hasClass('forum-hidden')) {
            removeFromArray(curid + '.' + $(this).parents('.forum').data('cindex'), collapsed);

            createCookie('collapsed', collapsed);
        } else {
            collapsed.push(curid + '.' + $(this).parents('.forum').data('cindex'));

            createCookie('collapsed', collapsed);
        }
      });

      $('.forum').each(function (i) {
        $(this).data('cindex', '' + i);

        $(btn_collapse)
            .clone()
            .attr('id', 'forum' + i)
            .appendTo($(this).find('.forum-header'));

        if ($.inArray(curid + '.' + i, collapsed) > -1) {
            $(this).find('.forum-hide').toggleClass('forum-show');
            $(this).toggleClass('forum-hidden');
        }

        if ($(this).find('.type-classified').length) {
            $(this)
              .addClass('type-table-classified')
              .find('.type-classified')
              .find('.forum-statistics-posts').remove();
        }
      });
  });

  function removeFromArray(item, array) {
      var i = array.indexOf(item);

      if (i > -1) {
        array = array.splice(i, 1);
      }
  }

  function createCookie(name, value, days) {
      var expires;

      if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toGMTString();
      } else {
        expires = "";
      }
      document.cookie = encodeURIComponent(name) + "=" + encodeURIComponent(value) + expires + "; path=/";
  }

  function readCookie(name) {
      var nameEQ = encodeURIComponent(name) + "=";
      var ca = document.cookie.split(';');
      for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) === ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) === 0) return decodeURIComponent(c.substring(nameEQ.length, c.length));
      }
      return null;
  }

  //]]>
</script>

Merci beaucoup, tu es une petite fée. Un ajustement stp, il faudrait augmenter l'espace en dessous du titre. C'est trop collé au bloc.

Hello !

Dans ta CSS, au niveau où tu as mis

Code:

.titre_categorie {
    text-align: center;
}

Tu vas ajouter un margin-bottom : 10px;
Ce qui te donne :

Code:

.titre_categorie {
    text-align: center;
    margin-bottom: 10px;
}

Et si ça n'est pas assez, tu peux augmenter le 10

Coucou Mäven c'est parfait. Merci beaucoup. Il me reste un soucis sur la police d'écriture. j'ai inséré font-family dans ton code css et pas moyen de modifier la police. (j'ai un JS pour les polices sur le forum.) De plus elle se met en gras. Tu pourrais me dire comment faire stp ?
(j'ai essayé via le PA/les couleurs/police titre mais le problème c'est que le changement de police se répercute sur d'autres éléments et qu'elle reste en gras de toute façon). Merci.

Sans avoir de visualisation sur le résultat, je ne saurais pas te dire s'il s'agit d'un import mal fait ou un de la syntaxe dans la css.
Il faudrait que tu retire une nouvelle fois la maintenance stp

Coucou Mäven, voilà c'est fait. De mon côté j'ai essayé de voir pourquoi la police en gras. J'ai juste réussi à mettre la police en ajoutant un font-family dans ton code en ayant au préalable supprimer les polices dans le PA. Pas sure que cela soit réglementaire. Pour le gras par contre pas moyen.

Hello !

Le gras vient du fait qu'il s'agit d'un h2
Tu peux ajouter ceci dans ta CSS pour qu'il ne soit plus en gras :

Code:

.titre_categorie h2 {
    font-weight: normal;
}

Pour le font-family ça a l'air d'être ok non ?

Coucou Mâven, c'est tout bon pour moi. Un grand merci pour ton aide, tu peux archiver.

Ca marche, j'archive =)