Derniers sujets
» [PHPBB2]Supprimer le tag "Re" sur les messages
par moonc44 Aujourd'hui à 14:26

» [PHPBB3]Supprimer le tag "Re" sur les messages
par McLeod Aujourd'hui à 9:57

» Personnaliser les hastags
par fred9545 Hier à 20:57

» [PHPBB2] Mettre un module de membres connectés en haut à gauche
par fred9545 Hier à 19:31

» [PHPBB2] Menu déroulant et Profil Rechercher et Nouveau M.P séparé
par fred9545 Hier à 19:29

» [PHPBB2] Supprimer visuellement les messages des invités
par fred9545 Hier à 19:04

» [PHPBB2] Afficher son profil avec transitions
par fred9545 Hier à 19:01

» [PHPBB2] Afficher le posteur du sujet dans les réponses
par fred9545 Hier à 18:38

» [MODERNBB]Outils de modération sur la liste des sujets
par Benjamin.d Hier à 17:01

» [MODERNBB] Afficher une réponse automatique style staff
par Benjamin.d Hier à 16:58

» [TOUTES VERSIONS]Message de confirmation de fermeture de la page pour les membres distraits
par Benjamin.d Lun 14 Jan 2019 - 18:01

» [TOUTES VERSIONS] Changer les boutons Nouveau MP et Répondre au MP par du texte
par fred9545 Lun 14 Jan 2019 - 17:31

» [TOUTES VERSIONS] Afficher une partie des MPS reçus
par kristhyane Lun 14 Jan 2019 - 11:25

» Personnaliser les MPS non lus
par Kaeyla Dim 13 Jan 2019 - 16:31

» [TOUTES VERSIONS] Trouver l'identifiant d'un membre spécifique
par soleda Jeu 10 Jan 2019 - 19:10

» [TOUTES VERSIONS] Cacher une partie d'un message à un membre spécifique
par soleda Jeu 10 Jan 2019 - 19:08

» [TOUTES VERSIONS] Citation avec envoi direct sur le message rapide
par badaboum Mer 9 Jan 2019 - 18:05

» [INVISION] Masquer tous les widgets du forum sauf le premier et au survol....
par fred9545 Mar 8 Jan 2019 - 18:35

» [MODERNBB]Supprimer le tag "Re" sur les messages
par oneandone Lun 7 Jan 2019 - 19:12

» Rajout d'un bouton pour la citation partielle
par Milouze14 Lun 7 Jan 2019 - 18:35

Remplacer le champ description par un champ image

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

fascicularia
avatar
Administrateur

Messagefascicularia

  • 16px
  • 24px
  • Zoom
Bonjour à tous,
Un petit tutoriel  qui vous permettra de modifier le champ description pour le tranformer en champ image. Vos membres pourront ainsi mettre une miniature devant les titres des sujets.
Ce champ n'accepte que les liens des images cad sous cette forme
Code:
http://i36.servimg.com/u/f36/11/93/85/24/sans_t32.jpg


En image
visuel de la modification:

visuel de la fenêtre de saisie


Visuel dans la liste des sujets



Prérequis :
Activer la description des sujets ( PA> Général> Messagerie et e-mail - Configuration> Afficher la description des sujets: Oui )

On commence
Template  posting_body

Rechercher
Code:


    <!-- BEGIN switch_description -->
    <tr>
    <td class="row1" width="22%"><span class="gen"><b>{L_DESCRIPTION}</b></span></td>
    <td class="row2" width="78%">
    <span class="gen">
    <input class="post" style="width:450px" type="text" name="description" value="{DESCRIPTION}" maxlength="{TOPIC_DESCRIPTION_MAXLENGTH}" onkeypress="if (event.keyCode==13){return false}" />
    </span>
    </td>
    </tr>
    <!-- END switch_description -->

et le remplacer par
Code:


    <!-- BEGIN switch_description -->
    <tr class="addtopimg">
    <td class="row1" width="22%"><span class="gen"><b>Mini hoto sur le thème</b></span></td>
    <td class="row2" width="78%">
    <span class="gen">
    <input class="post" style="width:450px" type="text" name="description" value="{DESCRIPTION}" maxlength="1000" onkeypress="if (event.keyCode==13){return false}" />
    </span><br /><span class="gen">Lien de l'image!</span>
    </td>
    </tr>
    <!-- END switch_description -->


template topics_list_box

Rechercher
Code:


    <td class="{topics_list_box.row.ROW_CLASS}" onmouseover='this.className="row2"' onmouseout='this.className="{topics_list_box.row.ROW_CLASS}"' width="100%">
    <div class="topictitle">
    {topics_list_box.row.NEWEST_POST_IMG}{topics_list_box.row.PARTICIPATE_POST_IMG}{topics_list_box.row.TOPIC_TYPE}
    <h2 class="topic-title">
    <a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a>
    </h2>
    </div>
    <!-- BEGIN switch_description -->
    <span class="genmed">
    <br />
    {topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
    </span>
    <!-- END switch_description -->
    <span class="gensmall">{topics_list_box.row.TOPIC_ANNOUNCES_DATES}{topics_list_box.row.TOPIC_CALENDAR_DATES}</span>
    <span class="gensmall">{topics_list_box.row.GOTO_PAGE}<!-- BEGIN nav_tree -->{topics_list_box.row.TOPIC_NAV_TREE} <!-- END nav_tree --></span>
    </td>


et le remplacer par
Code:


    <td class="{topics_list_box.row.ROW_CLASS}" onmouseover='this.className="row2"' onmouseout='this.className="{topics_list_box.row.ROW_CLASS}"' width="100%">
    <table border="0" class="temtab"><tr>
    <td><!-- BEGIN switch_description --><img src={topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION} class="temico" alt="image devant les titres des sujets" /><!-- END switch_description --></td>
    <td><div class="topictitle">
    {topics_list_box.row.NEWEST_POST_IMG}{topics_list_box.row.PARTICIPATE_POST_IMG}
    <h2 class="topic-title">
    <a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a>
    </h2>
    </div>
    <br /><span class="gensmall">{topics_list_box.row.TOPIC_TYPE}</span><br />
    <span class="gensmall">{topics_list_box.row.TOPIC_ANNOUNCES_DATES}{topics_list_box.row.TOPIC_CALENDAR_DATES}</span>
    <span class="gensmall">{topics_list_box.row.GOTO_PAGE}<!-- BEGIN nav_tree -->{topics_list_box.row.TOPIC_NAV_TREE} <!-- END nav_tree --></span></td>
    </tr></table>
    </td>


Nota : n'oubliez pas d'enregistrer vos modifications .

La css


   
Code:
.temico {
    width: 90px;
    height: auto;
    border: 2px solid #fff;
    margin: 1px 2px 2px 1px;
    -moz-box-shadow: 2px 2px 0px rgba(83, 83, 83, 0.5);
    -webkit-box-shadow: 2px 2px 0px rgba(83, 83, 83, 0.5);
    box-shadow: 2px 2px 0px rgba(83, 83, 83, 0.5);
    }
   
    .temtab td {
    vertical-align: top;
    text-align: left;
    }

Pour modifier la taille de l'image c'est dans cette partie
Code:
.temico {  width: 90px; }


Dernière édition par fascicularia le Lun 15 Juil 2013 - 19:33, édité 4 fois



Administrateur des forums



Teten85
avatar
Milouzien

MessageTeten85

  • 16px
  • 24px
  • Zoom
Faut que j'essaye, merci super 
Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
coucou  ,

merci pour le partage Stéphane tape la 



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

Fondateur des forums





msfeettoes
avatar
Milouzien

Messagemsfeettoes

  • 16px
  • 24px
  • Zoom
re
je n'ai pas cette partie dans mon template 

Code:


    <td class="{topics_list_box.row.ROW_CLASS}" onmouseover='this.className="row2"' onmouseout='this.className="{topics_list_box.row.ROW_CLASS}"' width="100%"> 
    <div class="topictitle"> 
    {topics_list_box.row.NEWEST_POST_IMG}{topics_list_box.row.PARTICIPATE_POST_IMG}{topics_list_box.row.TOPIC_TYPE} 
    <h2 class="topic-title"> 
    <a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a> 
    </h2> 
    </div> 
    <!-- BEGIN switch_description --> 
    <span class="genmed"> 
    <br /> 
    {topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION} 
    </span> 
    <!-- END switch_description --> 
    <span class="gensmall">{topics_list_box.row.TOPIC_ANNOUNCES_DATES}{topics_list_box.row.TOPIC_CALENDAR_DATES}</span> 
    <span class="gensmall">{topics_list_box.row.GOTO_PAGE}<!-- BEGIN nav_tree -->{topics_list_box.row.TOPIC_NAV_TREE} <!-- END nav_tree --></span> 
    </td>

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