je te conseille mon travail pour calquer : [extension by flop25] flop_style

Dans tes templates tu en a un qui s'appelle mainpage_categories.tpl avec quelquechose du genre

  <li>
    <div class="thumbnailCategory" >
      <div class="illustration">
      <a href="{$cat.URL}">
        <img src="{$cat.TN_SRC}" alt="{$cat.TN_ALT}" title="{$cat.NAME|@replace:'"':' '} - {'hint_category'|@translate}">
      </a>
      </div>
      <div class="description">
        <h3>
          <a href="{$cat.URL}">{$cat.NAME}</a>
          {$cat.ICON_TS}
        </h3>
        <div class="text">
            {if isset($cat.INFO_DATES) }
            <p class="dates">{$cat.INFO_DATES}</p>
            {/if}
            <p class="Nb_images">{$cat.CAPTION_NB_IMAGES}</p>
            {if not empty($cat.DESCRIPTION)}
            <p>{$cat.DESCRIPTION}</p>
            {/if}
        </div>
      </div>
    </div>
  </li>

je pense que tu devrais t'approcher de ce que tu veux en le modifiant ainsi

  <li>
    <div class="thumbnailCategory" >
      <div class="illustration">
      <a href="{$cat.URL}">
        <img src="{$cat.TN_SRC}" alt="{$cat.TN_ALT}" title="{$cat.NAME|@replace:'"':' '} - {'hint_category'|@translate}">
      </a>
      </div>
      <div class="description">
        <h3>
          <a href="{$cat.URL}">{$cat.NAME}</a>
          {$cat.CAPTION_NB_IMAGES}
        </h3>
        <div class="text">
            {if not empty($cat.DESCRIPTION)}
            <p>{$cat.DESCRIPTION}</p>
            {/if}
        </div>
      </div>
    </div>
  </li>

Reste l'espace entre la vignette et la description, un <div class="illustration" style="margin-right:5px"> fera peut être l'affaire !

Mais ça, c'est du hors normes, idéalement tu devrais créer un perso_mainpage_categories.tpl dans templates_extensions que tu gères ensuite dans ton administration des templates.

Heu : je n'ai pas testé, j'ai copié le code et modifié comme je l'aurais fait pour un 1er essai, peut être que ça ne correspondra pas exactement à tes besoins !

Ok, alors merci de vos réponses. Yannco, j'ai utilisé ton code qui fonctionne très bien. J'ai rajouté 2 pages dans le template_entension en remplaçant les fichiers de flop25. J'ai juste diminué la taille de police de "xx images", je le voulais plus petit que le nom de la catégorie.

Ensuite pour l'espace entre l'image et le texte, ce que tu proposes <div class="illustration" style="margin-right:5px">, rajoute 5 pixels en plus de l'espace déjà présent. En revanche, j'ai utilisé une méthode pas très clean mais qui fonctionne, c'est un nombre de pixels négatif <div class="illustration" style="margin-right:-28px">.

Bref, j'obtiens exactement ce que je voulais et je remercie tout le monde de m'avoir aidé ;)

Maxime

EDIT : j'ai une autre petite question en rapport avec les catégories. J'ai augmenté le cadre des catégories en hauteur pour avoir encore un peu plus de place. Et je pensais que je pouvais donc écrire à côté de la miniature et en dessous de la miniature. Mais non ! Quand je veux décrire ma catégorie dans "Catégories > Gérer >...", tout ce qu'il y a en trop (c'est-à-dire tout ce qui devrait s'afficher sous la miniature) n'apparaît pas. Donc j'ai juste réglé la hauteur du cadre visuellement. Une idée d'où je pourrais modifier ça ?

Dernière modification par lofo7 (2009-08-09 13:51:35)