Ajoutez des widgets en tête du forum, ou faire des catégories

[Rokeur318]

Détails techniques

Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : 12/11/2013
Lien du forum : https://dbrp.forumactif.com/

Description du problème

Bonjour à tous !

Je me tourne encore vers vous pour un énorme souci. Probablement la plus grosse de mes demandes ! J'aimerai en effet ajouter plusieurs widgets/catégories en entête de mon forum, sous la bannière, à la place de "l'heure" et la "date". Comme par exemple, le staff, le contexte, de courtes infos, les derniers messages, et les derniers messages d'une catégorie choisie. Mais après beaucoup de recherche et de test, rien ne va et ne fonctionne...

Je vous remercie d'avance !

Ce que je souhaite précisément:

[creange]

Bonjour Rockeur318 
le mieux c'est de créer des widgets personnalisés et de créer une page html 
pour les placer à l'endroit voulu et de faire une redirection vers la page d'accueil 
c'est ce que je fais quand je veux une page personnalisée et ça marche 

j'espère que ça pourra t'aider

[Rokeur318]

Merci creange pour le conseil ! Malheureusement je n'y connais rien donc ça risque d'être compliqué

[creange]

Non ce n'est pas compliqué tu vas créer un widget avec une série d'images cliquables
avec les liens que tu souhaites mettre sur la page d'accueil 
pour ne pas les perdres enregistres les en ne laissant les permissions qu'à l'administrateur
puis direction le PA ==> Modules ==>  Gestions des Pages HTML  ==> Ajouter une page 
et colle tes codes de widgets 
coche le Utiliser le haut et le bas du forum et enregistres  et prévisualisation pour voir le résultat
après dans la liste des pages html
 tu as possiblité  en utilisant le mode Simple (WISIWIG)
pour déplacer tes images sans toucher aux codes 

un petit ex de code pour placer les images lien de tes catégories

Code:


<div>
                                                                        <strong><span style="color: rgb(51, 0, 102); font-size: 16px;">ici tu peux mettre un commentaire si tu le souhaites</span></strong><strong></strong> <a title="titre du lien " target="blank" href="adresse 1er lien"><img "="" border="O" alt="adresse 1er lien" src="adresse image 1er lien" /></a>          <a title="titre 2eme lien" target="blank" href=" adresse 2eme lien"><img "="" border="O" alt=" iadresse 2eme lien" src="image 2eme lien" />              </a><a title="Retrouve Ton Mémo" target="blank" href="adresse 3eme lien"><img "="" border="O" alt="adresse 3eme lien" src="image 3eme lien" /></a>                <a title="titre 4eme lien" target="blank" href="adresse 4eme lien"><img border="O" alt="adresse 4eme lien" =""="" src="image 4eme lien " /></a> 
</div>


et si tu le souhaites tu peux en rajouter d'autres 

ensuite tu enregistres à nouveau ta page html et pour donner le lien de la redirection vers la page d'accueil il faut mettre un js dans les modules avec le lien de la page html que tu viens de créer

comme ceci
tu créer un nouveau code java script en lui donnant un titre et sur l'index 

Code:


<a href="url de la page html" target="_blank">index du forum</a></span></strong></span></span></p>


et valider

[Rokeur318]

Alors... Comment puis-je avoir le code des widgets au juste ?

[creange]

fais un essai avec ce code

Code:

<div class="h3">
                      <span style="font-size: 24px;"><span style="color: rgb(153, 0, 51);"> </span></span>            
 <div style="font-size: 24px;">
                   <a title="titre du lien " target="blank" href="adresse 1er lien"><img "="" border="O" alt="adresse 1er lien" src="https://i.servimg.com/u/f92/14/77/07/89/bouton45.png" /></a>      <a title="titre 2eme lien" target="blank" href=" adresse 2eme lien"><img "="" border="O" alt=" adresse 2eme lien" src="https://i.servimg.com/u/f92/14/77/07/89/bouton45.png" /></a>                                                                     <a title="TITRE DU 3EME LIEN" target="blank" href="ADRESSE DU 3EME LIEN"><img "="" border="O" alt="adresse 3eme lien" src="https://i.servimg.com/u/f92/14/77/07/89/bouton45.png" /></a>
 </div>
  <br />
</div>
                                                                                    
<div>
       <br />
</div>
<div class="module">
            
 <div class="inner">
                                
 </div>
                              
 <p class="center">
                <a title="CALENDRIER" href="/calendar?start=20231101"><span style="font-size: 18px;">Calendrier </span></a>          
 </p>
        
 <p class="center">
     <br />    
 </p>
        
 <p class="center">
     <br />    
 </p>
        
 <p class="center">
     <img src="                                                                   <div>                                          </div><span class=" corners-bottom"="" style="height: 200px;" /><span></span><a name="p_calendar"></a>    
 </p>
      
 <div class="module">
        
 <div class="inner">
     <span class="corners-top"><span></span></span>    
 <div class="h3">
     <strong>Novembre 2023</strong>    
 </div>
        
 <div id="calendar" style="margin: 0 auto;max-width:270px;">
        
 <table class="table1" cellspacing="1">
     <tbody> </tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody>
 <tr style="">
        
 <th style="padding-left:0;padding-right:0;width:14%;text-align:center;">
     Lun    
 </th>
        
 <th style="padding-left:0;padding-right:0;width:14%;text-align:center;">
     Mar    
 </th>
        
 <th style="padding-left:0;padding-right:0;width:14%;text-align:center;">
     Mer    
 </th>
        
 <th style="padding-left:0;padding-right:0;width:14%;text-align:center;">
     Jeu    
 </th>
        
 <th style="padding-left:0;padding-right:0;width:14%;text-align:center;">
     Ven    
 </th>
        
 <th style="padding-left:0;padding-right:0;width:14%;text-align:center;">
     Sam    
 </th>
        
 <th style="padding-left:0;padding-right:0;width:14%;text-align:center;">
     Dim    
 </th>
        
 </tr><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody>
 <tr style="">
        
 <td class="row1 center" style="padding-left:0;padding-right:0;">
          
 </td>
        
 <td class="row1 center" style="padding-left:0;padding-right:0;">
          
 </td>
        
 <td class="row2 hover-td center" style="padding-left:0;padding-right:0;">
     1    
 </td>
        
 <td class="row2 hover-td center" style="padding-left:0;padding-right:0;">
     2    
 </td>
        
 <td class="row2 hover-td center" style="padding-left:0;padding-right:0;">
     3    
 </td>
        
 <td class="row2 hover-td center" style="padding-left:0;padding-right:0;">
     4    
 </td>
        
 <td class="row2 hover-td center" style="padding-left:0;padding-right:0;">
     5    
 </td>
        
 </tr><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody>
 <tr style="">
        
 <td class="row3 hover-td center" style="padding-left:0;padding-right:0;">
     6    
 </td>
        
 <td class="row3 hover-td center" style="padding-left:0;padding-right:0;">
     7    
 </td>
        
 <td class="row3 hover-td center" style="padding-left:0;padding-right:0;">
     8    
 </td>
        
 <td class="row3 hover-td center" style="padding-left:0;padding-right:0;">
     9    
 </td>
        
 <td class="row3 hover-td center" style="padding-left:0;padding-right:0;">
     10    
 </td>
        
 <td class="row3 hover-td center" style="padding-left:0;padding-right:0;">
     11    
 </td>
        
 <td class="row3 hover-td center" style="padding-left:0;padding-right:0;">
     12    
 </td>
        
 </tr><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody>
 <tr style="">
        
 <td class="row2 hover-td center" style="padding-left:0;padding-right:0;">
     13    
 </td>
        
 <td class="row2 hover-td center" style="padding-left:0;padding-right:0;">
     14    
 </td>
        
 <td class="row2 hover-td center" style="padding-left:0;padding-right:0;">
     15    
 </td>
        
 <td class="hover-td center" style="padding-left:0;padding-right:0;">
     16    
 </td>
        
 <td class="row2 hover-td center" style="padding-left:0;padding-right:0;">
     17    
 </td>
        
 <td class="row2 hover-td center" style="padding-left:0;padding-right:0;">
     18    
 </td>
        
 <td class="row2 hover-td center" style="padding-left:0;padding-right:0;">
     19    
 </td>
        
 </tr><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody>
 <tr style="">
        
 <td class="row3 hover-td center" style="padding-left:0;padding-right:0;">
     20    
 </td>
        
 <td class="row3 hover-td center" style="padding-left:0;padding-right:0;">
     21    
 </td>
        
 <td class="row3 hover-td center" style="padding-left:0;padding-right:0;">
     22    
 </td>
        
 <td class="row3 hover-td center" style="padding-left:0;padding-right:0;">
     23    
 </td>
        
 <td class="row3 hover-td center" style="padding-left:0;padding-right:0;">
     24    
 </td>
        
 <td class="row3 hover-td center" style="padding-left:0;padding-right:0;">
     25    
 </td>
        
 <td class="row3 hover-td center" style="padding-left:0;padding-right:0;">
     26    
 </td>
        
 </tr><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody>
 <tr style="">
        
 <td class="row2 hover-td center" style="padding-left:0;padding-right:0;">
     27    
 </td>
        
 <td class="row2 hover-td center" style="padding-left:0;padding-right:0;">
     28    
 </td>
        
 <td class="row2 hover-td center" style="padding-left:0;padding-right:0;">
     29    
 </td>
        
 <td class="row2 hover-td center" style="padding-left:0;padding-right:0;">
     30    
 </td>
        
 <td class="row1 center" style="padding-left:0;padding-right:0;">
          
 </td>
        
 <td class="row1 center" style="padding-left:0;padding-right:0;">
          
 </td>
        
 <td class="row1 center" style="padding-left:0;padding-right:0;">
          
 </td>
        
 </tr><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody>    
 </table>
        
 </div>
        
 <p class="center">
     <a href="/calendar?start=20231101" title="Calendrier">Calendrier <img src="https://2img.net/i/fa/subsilver/icon_calendar.gif" alt="Calendrier" title="Calendrier" loading="lazy" /></a>    
 </p>
        
 <!--        </form>       --><span class="corners-bottom"><span></span></span>    
 </div>
        
 </div>
        
 <table border="0" cellpadding="0" cellspacing="0" style="width: 100%;">
     <tbody> </tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody>
 <tr style="">
        
 <td style="height: 3px;">
        
 </td>
        
 </tr><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody>    
 </table>
        
 <div class="module">
        
 <div class="inner">
     <span class="corners-top"><span></span></span>    
 <div class="h3">
    <br />    
 </div>
        
 </div>
        
 </div><br />    
 <p>
      
 </p>
                              
 <!--                                                                                    <div>
                                        
</div><span class="corners-bottom"><span></span></span></div></div></td><td valign="top" width="20%"><a name="p_calendar"></a><div class="module"><div class="inner"><span class="corners-top"><span></span></span><div class="h3"><strong>Novembre&nbsp;2023</strong></div><div id="calendar" style="margin: 0 auto;max-width:270px;"><table class="table1" cellspacing="1"><tr><th style="padding-left:0;padding-right:0;width:14%;text-align:center;">Lun</th><th style="padding-left:0;padding-right:0;width:14%;text-align:center;">Mar</th><th style="padding-left:0;padding-right:0;width:14%;text-align:center;">Mer</th><th style="padding-left:0;padding-right:0;width:14%;text-align:center;">Jeu</th><th style="padding-left:0;padding-right:0;width:14%;text-align:center;">Ven</th><th style="padding-left:0;padding-right:0;width:14%;text-align:center;">Sam</th><th style="padding-left:0;padding-right:0;width:14%;text-align:center;">Dim</th></tr><tr><td class="row1 center" style="padding-left:0;padding-right:0;">&nbsp;</td><td class="row1 center" style="padding-left:0;padding-right:0;">
 </td>
 
 </tr><tbody></tbody><tbody></tbody>
</table>
<div class="module">
 
 <div class="inner">
 <span class="corners-top"><span></span></span>        
 <table style="width: 100%;" cellspacing="0" cellpadding="0" border="0">
        <tbody> </tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody>
 <tr style="">
              
 <td style="height: 3px;">              
 </td>
              
 </tr><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody>
 </table>
 
 <div class="module">
              
 <div class="inner">
        <span class="corners-top"><span></span></span>        
 <div class="h3">                                                                              <span class="M14_BIRTHDAY"></span>          
 </div>
              
 </div>
 
 </div>
 
 </div>
</div>        -->
</div>

ça donne ça sur mon forum d'essai   https://creas3d.forumactif.com/h37-widgettt  pour te donner une idée aprés tu pourras les placer  comme tu le souhaites

[Rokeur318]

Je dois mettre ce code en widget personnalisé ?

[creange]

si tu le mets sur les widgets du forum les images se placeront sur le coté
le mieux c'est de le faire sur une page html comme je te l'indique plus haut
pour avoir les images disposées comme tu le souhaites

[Rokeur318]

D'accord, je vais essayé et je te retiens au courant ! Merci creange, encore désolé pour toutes mes questions !

[creange]

pas de souci c'est fait pour ça l'entraide
bonne soirée

[MlleAlys]

Bonjour,

Si vous ne souhaitez son affichage que sur la page d'index, alors je pense que ça correspond à l'emplacement de la "page d'accueil" : Affichage > page d'accueil > généralités : Message sur la page d'accueil.
Vous pouvez y mettre un code personnel ou trouvé en libre service.

Si vous souhaitez que ces éléments s'affichent sur toutes les pages du forum, alors le code correspondant peut être placé dans le template "haut de page", ou via un javascript.

[Rokeur318]

Puis-je mettre les widgets dedans avec cette solution ?

[MlleAlys]

Pour la liste des derniers messages ? Il me semble que oui, même si je n'ai plus la solution du "comment" en tête.

[Rokeur318]

Je vais essayé avec la solution de creange, je reviens vers vous !

[creange]

oui je crois que tu peux Rockeur318
sinon pour ma solution il suffit de cocher Utiliser cette page en page d'accueil
avant d'enregistrer ta page html

[Rokeur318]

Gros problème ! Il y a tout qui disparaît avec la page html...

[creange]

Bonsoir Rockeur318  toutes mes excuses un mauvais lien s'était glissé dans mon code
et puis il ne faut pas mettre tout le code c'est un exemple que je te donnais pour placer
les images avec les liens


essaie ce code que j'ai simplifié j'ai supprimé le widget calendrier  il  y a juste les images et les liens à changer 
et tu peux le placer directement sur la page d'accueil comme te l'a indique MelleAlys

Code:

<p>
   <br />
</p>
<div class="h3">
                        <span style="font-size: 24px;"><span style="color: rgb(153, 0, 51);"> </span></span>                
 <div style="font-size: 24px;">
                     <a href="ADRESSE 1ER LIEN" target="blank" title="titre du 1ER lien "><img src="ADRESSE IMAGE 1ER LIEN" alt="ADRESSE DU 1ER LIEN " border="O" "="" /></a>      <a href=" ADRESSE 2EME LIEN" target="blank" title="titre 2eme lien"><img src="ADRESSE IMAGE 2EME LIEN " alt=" ADRESSE 2EME LIEN" border="O" "="" /></a>                                                                     <a href="ADRESSE DU 3EME LIEN" target="blank" title="TITRE DU 3EME LIEN"><img src="ADRESSE IMAGE 3EME LIEN" alt="ADRESSE 3EME LIEN" border="O" "="" /></a>    
 </div>
    <br />
</div>
                                                                                      
<div>
         <br />
</div>
<div class="h3">
                  
 <div class="inner">
                                    
 </div>
      
 <div class="h3">
  
 <div class="inner">
  
 <div style="margin: 0 auto;max-width:270px;" id="index">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       <br />  
 </div>
              
 <!--           </form>          --><span class="corners-bottom"><span></span></span>        
 </div>
              
 </div>
                                                
 <div class="index">
  
 <div class="inner">
  
 <div class="h3">
      <br />        
 </div>
              
 </div>
              
 </div><br />        
 <p>
          
 </p>
</div>
<p>
</p>

normalement ça devrait être bon 
bonne soirée

[Rokeur318]

Tout est bon ! Ma page d'accueil est nickel ! Merci beaucoup MlleAlys et creange ! Je classe en résolu !