ForumEntraideAstucesSF-BBFAQRechercherInscriptionConnexionNewsColorerPlus ! 
Ce sujet est verrouillé, vous ne pouvez pas éditer les messages ou faire de réponses.
Poster un nouveau sujetCe sujet est verrouillé, vous ne pouvez pas éditer les messages ou faire de réponses.
phpbb2: refonte de l'Affichage des sujets

nirupan (Membre)

Voir le profil de l'utilisateurhttp://www.tamilfriends.forumpro.fr/
Masculin Age: 18
Nombre de messages: 598
Localisation: Paris
Emploi/loisirs: sans emploie
Humeur: ca peut aller
Date d'inscription: 18/07/2008

MessageSujet: phpbb2: refonte de l'Affichage des sujets 31/1/2010, 19:00
Par : nirupan
#9428

Hello,
Pour ce tuto, je vais vous apprendre a faire un affichage qui ressemble à celui-ci :


Ouvrez votre template, topics_list_box, et remplacez tout par :
Code:
<!-- BEGIN topics_list_box --><!-- BEGIN row --><!-- BEGIN header_table --><!-- BEGIN multi_selection -->
<script type="text/javascript">
function check_uncheck_main_{topics_list_box.row.header_table.BOX_ID}() {
   var all_checked = true;
   for (i = 0; (i < document.{topics_list_box.FORMNAME}.elements.length) && all_checked; i++) {
   if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
      all_checked = document.{topics_list_box.FORMNAME}.elements[i].checked;
   }
   }
   document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked = all_checked;
}
function check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}() {
   for (i = 0; i < document.{topics_list_box.FORMNAME}.length; i++) {
   if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
      document.{topics_list_box.FORMNAME}.elements[i].checked = document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked;
   }
   }
}
</script>
<!-- END multi_selection -->

<table class="" width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr height="28">
      <th width="100%" height="28" style="background-image: url('http:ADRESS_DE_VOTRE_IMAGE'); background-position: top left; padding: 1px;" align="center" colspan="2"><span class="copyright"> {topics_list_box.row.L_TITLE} </span></th>
      
   
      <!-- BEGIN multi_selection -->
      <th align="center" nowrap="nowrap" width="20"><input onclick="check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_list_box.row.header_table.BOX_ID}" value="0" /></th>
   <!-- END multi_selection -->
   </tr>
   <tr>
      <td style="border-bottom: 1px solid #couleur; border-right: 5px solid #couleur; border-left: 5px solid #couleur; padding: 1px;" class="row1" colspan="3" align="right"><span class="gensmall">{PAGINATION}</span></td>
   </tr>
   <!-- END header_table --><!-- BEGIN header_row -->
   <tr>
      <td  style="border-bottom: 1px solid #couleur; padding: 1px;" class="row3" colspan="3"><span class="gensmall"> <b>{topics_list_box.row.L_TITLE}</b></span></td>
   </tr>
<!-- END header_row -->

<!-- BEGIN topic -->
{topics_list_box.row.END_TABLE_STICKY}
   <tr class="mycel">
      <!-- BEGIN single_selection -->
      <td  style="background-color: #couleur; border-bottom: 1px solid #couleur; padding: 1px;" class="{topics_list_box.row.ROW_CLASS}" align="center" valign="middle" width="20"><input type="radio" name="{topics_list_box.FIELDNAME}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></td>
      <!-- END single_selection -->
      
      
   
      
<td  style="border-bottom: 1px solid #couleur; border-right: 1px dashed #couleur; border-left: 5px solid #740000; padding: 3px;" width="440" height="55"><img title="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" src="{topics_list_box.row.TOPIC_FOLDER_IMG}" alt="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" /><div class="topictitle">
         {topics_list_box.row.NEWEST_POST_IMG}{topics_list_box.row.PARTICIPATE_POST_IMG}{topics_list_box.row.TOPIC_TYPE}Le sujet
            "<h2 class="topic-title">
               <a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a>
            </h2>"
         </div>
 <span class="postdetails"> a reçu  {topics_list_box.row.REPLIES} messages</span><span class="postdetails"> et a été vu  {topics_list_box.row.VIEWS} fois</span><!-- 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>

<td style="border-bottom: 1px solid #couleur; border-right: 5px solid #couleur; padding: 3px;" width="440" height="55">
<span class="postdetails"> Derniers messages posté {topics_list_box.row.LAST_POST_TIME} par {topics_list_box.row.LAST_POST_AUTHOR} {topics_list_box.row.LAST_POST_IMG}</span> </td>


<!-- BEGIN multi_selection -->
      <td class="row2" align="center" valign="middle"><span class="postdetails"><input onclick="javascript:check_uncheck_main_{topics_list_box.row.BOX_ID}();" type="checkbox" name="{topics_list_box.FIELDNAME}[]{topics_list_box.row.BOX_ID}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></span></td>
   <!-- END multi_selection -->
   </tr>
   <!-- END topic --><!-- BEGIN no_topics -->
   <tr>
      <td class="row1" colspan="{topics_list_box.row.COLSPAN}" align="center" valign="middle" height="30"><span class="gen">{topics_list_box.row.L_NO_TOPICS}</span></td>
   </tr>
   <!-- END no_topics --><!-- BEGIN bottom -->
   <tr>
      <td class="" colspan="{topics_list_box.row.COLSPAN}" valign="middle">
         <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
               <td style="border-left: 5px solid #couleur; border-top: 1px solid #740000; background-color: #couleur"> <span class="gensmall">{PAGINATION}</span></td>
               <td style="border-right: 5px solid #couleur; border-top: 1px solid #740000; background-color: #couleur" align="right"><a href="#top">{L_BACK_TO_TOP}</a> </td>
            </tr>
         </table><img src="http:ADRESS_DE_VOTRE_IMAGE" height="6" width="888" />
      </td>
   </tr>
<!-- END bottom --><!-- BEGIN footer_table -->
</table><!-- END footer_table --><!-- BEGIN spacer --><br class="gensmall" /><!-- END spacer --><!-- END row --><!-- END topics_list_box -->

Il ne reste plus qu'a changer les tailles, les images et les couleurs selon vos besoin et voilà^^
Si vous voulez ajouter un effet de phpbb3, collez ça dans votre css :
Code:
.mycel {
background-color: #couleur;
background-image: url('');
background-repeat: repeat-y;
background-position: right;
}
.mycel:hover {
background-color: #couleur;
background-image: url('');
background-repeat: repeat-y;
background-position: left;
}

C'est tout,
bye

EDIT : Seul petit inconvénient, vous ne pourrez plus séparer les post-it et annonces par les tableaux

Zeco (Absent pour la semaine)

Voir le profil de l'utilisateurhttp://www.sos-forum.com/
Masculin Age: 17
Nombre de messages: 3386
Localisation: Ici
Emploi/loisirs: Peindre en noir...
Humeur: Ca va...
Date d'inscription: 30/07/2007

MessageSujet: Re: phpbb2: refonte de l'Affichage des sujets 31/1/2010, 21:53
Par : Zeco
#9430

Hello...

Merci pour l'astuce !
Pourrait on avoir un peu plus de précisions concernant les images ?

nirupan (Membre)

Voir le profil de l'utilisateurhttp://www.tamilfriends.forumpro.fr/
Masculin Age: 18
Nombre de messages: 598
Localisation: Paris
Emploi/loisirs: sans emploie
Humeur: ca peut aller
Date d'inscription: 18/07/2008

MessageSujet: Re: phpbb2: refonte de l'Affichage des sujets 6/2/2010, 19:16
Par : nirupan
#9468

re,
C'est simplement un effet de hover qu'on donne aux différents <td> de la <tr>, soit on peut le laisser sans image, soit avec des dégradé ...

Voir le sujet précédent Voir le sujet suivant Revenir en haut
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
SOS-FORUM :: A consulter ! :: Astuces pour forums-
Poster un nouveau sujetCe sujet est verrouillé, vous ne pouvez pas éditer les messages ou faire de réponses.
Ouvrir

Projet GimpLa Mode Sans Fil

Accueil­FAQ­Rechercher­Groupes­Membres­S'enregistrer­Connexion
Forum gratuit  | © phpBBForum gratuit d'entraide| Statistiques | Signaler un abus  | Créer un forum | Contrat CC