Membre(s) du Staff connecté(s)
Qui est en ligne?
Invités: 0
Invisibles: 0
Enregistrés: 0
Membres en ligne
Actualisez..

Description sur une seule ligne et affichage de l'ensemble avec une infobulle

Poster un nouveau sujet   Répondre au sujet

Voir le sujet précédent Voir le sujet suivant Aller en bas

fascicularia
Administrateur


fascicularia


Messagefascicularia

  • 16px
  • 24px
  • Zoom
Bonjour à tous,
Après avoir eu le cas de deux membres qui confondaient la case description avec le corps du message, j'ai modifié mon template topic_list_box pour remédier à ce petit désagrément.
L'affichage de la description ne se fait que sur une ligne et l'affichage complet se fait sous forme d'une infobulle.

Attention , le nombre de caractères est limités à 255 (ce qui est déjà pas mal).

Une image pour expliquer plus simplement



On commence :
Dans le template topic_list_box Cherchez :

Code:
{topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}

et remplacer le par

Code:
<span class="topicdescription" title="{topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}">{topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}</span>

rajouter ce css qui positionnera l'infobulle
Code:
.topicdescription {
          display: block;
          white-space: nowrap;
          overflow: hidden;
          width: 520px;
          margin-bottom: -12px;
        }
Milouze14
Fondateur


Milouze14


MessageMilouze14

  • 16px
  • 24px
  • Zoom
coucou Stéphane,

bonne astuce mais je voudrais apporter une petite touche sans passer via la css:

Recherchez ceci:
Code:

<!-- BEGIN switch_description -->
         <span class="genmed">
            <br />
            {topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
         </span>
<!-- END switch_description -->

Supprimer simplement la variable


Code:
{topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}

Pour n'avoir que ceci:
Code:

<!-- BEGIN switch_description -->
         <span class="genmed">
            <br />
            
         </span>
<!-- END switch_description -->


Ensuite recherchez ceci:
Code:

<h2 class="topic-title">
<a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a>
</h2>

et remplacer par ceci:

Code:

<h2 class="topic-title">
<a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}"
title="{topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}">{topics_list_box.row.TOPIC_TITLE}</a>
</h2>


impeccable







-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums



Voir le sujet précédent Voir le sujet suivant Revenir en haut

Créer un compte ou se connecter pour répondre

Vous devez être membre pour répondre.

S'enregistrer

Rejoignez notre communauté ! C'est facile !


S'enregistrer

Connexion

Vous êtes déjà membre ? Aucun soucis, cliquez ici pour vous connecter.


Connexion

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum