Derniers sujets
» [TOUTES VERSIONS] Afficher une barre des tâches façon Windows 10 sur votre forum
par 1bernard1 Aujourd'hui à 1:53

» [TOUTES VERSIONS] Créer un générateur d'image cliquable
par 1bernard1 Aujourd'hui à 1:02

» [PHPBB3] Avatar coulissant + affichage profil différent.
par 1bernard1 Aujourd'hui à 0:40

» [PHPBB3] Faire un menu déroulant dans le titre d'un forum ou d'un sous forum
par 1bernard1 Aujourd'hui à 0:32

» [PHPBB2]Afficher/Masquer le profil avec miniature de l'avatar
par FaGu Lun 18 Fév 2019 - 0:49

» [PHPBB3]Afficher/Masquer le profil avec miniature de l'avatar
par FaGu Lun 18 Fév 2019 - 0:39

» [PHPBB2] Afficher le profil des messages façon Invision et bien plus..
par ThunderTB Dim 17 Fév 2019 - 16:42

» [PHPBB2] Afficher l'auteur du sujet dans la liste des sujets
par ThunderTB Sam 16 Fév 2019 - 5:10

» Supprimer le bouton MP a un membre spécifique
par fred9545 Jeu 14 Fév 2019 - 19:36

» Mettre des Paillettes derrière le Curseur
par choupette60 Jeu 14 Fév 2019 - 14:42

» [PHPBB2] Menu Rechercher en haut à gauche effet survol
par Ambroise Mar 12 Fév 2019 - 13:33

» Lecture du premier message des derniers sujets traités sur votre forum
par soleda Lun 11 Fév 2019 - 11:47

» [EDGE]Afficher la majeure partie des variables avec un bouton sur l'éditeur
par clost Dim 10 Fév 2019 - 20:49

» [PHPBB2] Avoir un aperçu en infobulle du brouillon enregistré
par fred9545 Dim 10 Fév 2019 - 20:47

» [EDGE] Afficher/Masquer les catégories avec un effet
par clost Dim 10 Fév 2019 - 20:34

» [PHPBB2] Coloriser individuellement les catégories
par choupette60 Dim 10 Fév 2019 - 19:31

» [AWESOMEBB] Coloriser les cases Annonces & Notes
par fred9545 Dim 10 Fév 2019 - 12:15

» [PHPBB2] Afficher le logo devant les Pseudos index et sous forums, façon mini avatar
par Ptite_Perle Dim 10 Fév 2019 - 12:02

» [TOUTES VERSIONS] Afficher l'avatar des messages au survol de la cellule
par Ptite_Perle Dim 10 Fév 2019 - 11:57

» [AWESOMEBB]Afficher les pricipaux boutons de l'éditeur de sur la réponse rapide
par Splash Dim 10 Fév 2019 - 2:59

Remplacer le champ description par un champ image

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

fascicularia
fascicularia
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
Teten85
Milouzien

MessageTeten85

  • 16px
  • 24px
  • Zoom
Faut que j'essaye, merci super 
Milouze14
Milouze14
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
msfeettoes
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