Doursin a écrit:

Bonjour,

Pour accéder aux photos, il faut pour l'instant cliquer sur la vignette ou le nom de la catégorie. J'aurai voulut avoir le lien "{categories.category.URL}" sur l'ensemble du rectangle de chaque catégorie.

J'ai bien essayé de modifier mainpage_categories.tpl mais je n'ai fait que mettre le lien sur la description en ajoutant :

<p><a href="{categories.category.URL}">{categories.category.CAPTION_NB_IMAGES}&nbsp;</a></p>
<p><a href="{categories.category.URL}">{categories.category.DESCRIPTION}&nbsp;</a></p>

?

remplace le contenue de ton fichier mainpage_categories.tpl par

<!-- BEGIN categories -->
<!-- $Id: mainpage_categories.tpl 2023 2007-05-23 20:13:49Z vdigital $ -->
<ul class="thumbnailCategories">
  <!-- BEGIN category -->
  <li>
    <div class="thumbnailCategory">
        <a href="{categories.category.URL}">{categories.category.NAME}
          <div class="illustration">
          <img src="{categories.category.SRC}" alt="{categories.category.ALT}" title="{categories.category.TITLE}">
          </div>
         <div class="description">
            <h3>
              {categories.category.ICON}
            </h3>
            <p>{categories.category.CAPTION_NB_IMAGES} </p>
            <p>{categories.category.DESCRIPTION} </p>
          </div>
        </a>
    </div>
  </li>
  <!-- END category -->
</ul>
<!-- END categories -->

Pour cela je te conseil d'utiliser le plugin LocalFiles Editor

Doursin a écrit:

Bonjour,
j'ai besoin de la mascotte de la SG..... Quelqu'un sait ou se trouve la commande pour changer de couleur le fond du rectangle ?

les règles du forum ! un question par post :)

Dans ton fichier template/yoga/local-layout.css

DIV.thumbnailCategory
{
   background :red
}

tu peux bien sur choisir une autre couleur !

Je vais peut être y jeter un oeil pour changer le curseur.

J'ai trouvé !

<a href="{categories.category.URL}" style="cursor:pointer">

Bon finalement c'est assez simple les modifications...

Encore merci pour tout

Arf...j'ai parlé trop vite.

Une dernière modification concernant l'image car il n'y a pas de lien dessus. Voici mon fichier mainpage_categories.tpl :

<!-- BEGIN categories -->
<!-- $Id: mainpage_categories.tpl 2023 2007-05-23 20:13:49Z vdigital $ -->
<ul class="thumbnailCategories">
  <!-- BEGIN category -->
  <li>
    <div class="thumbnailCategory">
    <a href="{categories.category.URL}" style="cursor:pointer" />
      <div class="illustration">
      <a href="{categories.category.URL}" style="cursor:pointer" /> <img src="{categories.category.SRC}" alt="{categories.category.ALT}" title="{categories.category.TITLE}">
      </div>
      <div class="description">
        <h3>
        {categories.category.NAME}
          {categories.category.ICON}
        </h3>
        <p>{categories.category.CAPTION_NB_IMAGES}&nbsp;</p>
        <p>{categories.category.DESCRIPTION}&nbsp;</p>
      </div>
    </div>
  </li>
  <!-- END category -->
</ul>
<!-- END categories -->

C'est enfin terminé...

Un bug dynamique : le survol d'une catégorie fait parfois changer la couleur de la descrition d'une autre catégorie(couleur lorsque le lien est survolé)

Dernière modification par Doursin (2008-12-16 18:11:34)

ddtddt a écrit:

Regarde bien ma première proposition.

Il faut "fermer" les </a> pour que cela marche correctement

Effectivement, cela marche bien. Par contre, j'ai remarqué que la zone en-dessous de la vignette n'est pas valide pour le lien :

Lorsque la vignette fait toute la hauteur du rectangle, aucun soucis, mais si elle est plus petite, une zone sans lien apparait.

.....Avec ce que j'ai refait :

<!-- BEGIN categories -->
<!-- $Id: mainpage_categories.tpl 2023 2007-05-23 20:13:49Z vdigital $ -->
<ul class="thumbnailCategories">
  <!-- BEGIN category -->
  <li>
    <div class="thumbnailCategory">
    <a href="{categories.category.URL}" style="cursor:pointer" >
      <div class="illustration">
      <a href="{categories.category.URL}" style="cursor:pointer" /> <img src="{categories.category.SRC}" alt="{categories.category.ALT}" title="{categories.category.TITLE}">
    </div>
      <div class="description">
        <h3>
          {categories.category.NAME}
          {categories.category.ICON}
        </h3>
        <p>{categories.category.CAPTION_NB_IMAGES}&nbsp;</p>
        <p>{categories.category.DESCRIPTION}&nbsp;</p>
      </div>
    </a>
    </div>
  </li>
  <!-- END category -->
</ul>
<!-- END categories -->

A noter que j'ai gardé ma déclaration du lien au niveau de l'image.

Dernière modification par Doursin (2008-12-22 18:04:01)

ddtddt a écrit:

Toujours 1 seul <a> de fermé :)

Si je le ferme avec "</a>", le lien ne fonctionne plus sur la description de la catégorie.
Donc je le ferme directement après l'affichage de l'image avec "/>"

Y-a-t-il une autre erreur sous jacente ?

VDigital a écrit:

C'est plus simple encore, non?

Attention: cela interdit de mettre des liens dans les descriptions....

Ce n'est pas ce que j'ai proposé dans mon 2ème message ?