Vous n'êtes pas connecté. Connectez-vous ou enregistrez-vous

[ ↓ ]

Voir le sujet précédent Voir le sujet suivant Message [Page 1 sur 1]

fascicularia


Administrateur

fascicularia

Message posté: le Lun 15 Juil 2013 - 18:52
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 Milouze14
- Contact par MP -



Teten85


Membre

Teten85

Message posté: le Lun 15 Juil 2013 - 19:25
Faut que j'essaye, merci super 

Milouze14


Fondateur

Milouze14

Message posté: le Mar 16 Juil 2013 - 7:37
coucou  ,

merci pour le partage Stéphane tape la 





Fondateur des forums Milouze14

- Contact par MP -



Voir le sujet précédent Voir le sujet suivant Message [Page 1 sur 1]

[ ↑ ]

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

 
  • © PunBB | Signaler un abus