En-tête 6 blocs (contexte - news - staff - sujets importants - votes - partenaires)

Hello !

Ça c'est un long titre  :hihi: ! Comme d'habitude quoi
Bien entendu, les blocs peuvent changer d'utilité ! Voilà donc un aperçu :
Et pour voir les effets sur les avatars, tu peux te rendre ici : [il suffit de cliquer]
La largeur est en %, elle peut être mise en px si tu le souhaites.

Il faut avoir accès aux templates pour l'installation, mais il n'y en a plus besoin pour mettre à jour la PA.

 LS réalisé à partir de la commande de Fleur' (et avec son accord) pour Les écos Friends, n'hésites pas à aller y faire un tour.

L'installation va se faire en plusieurs étapes : on va créer une page HTML, modifier un template, ajouter un peu de javascript et modifier la CSS du forum.


Dans le PA > Modules > Gestion des pages HTML > Créer une nouvelle page en mode avancé
On y met un titre, et on colle ce code :

Code:

<div class="en-tete">
 <div class="titre">
 Bienvenue sur <i>Nom du forum</i>
 </div>
 <div class="flex">
 <div class="bloc">
 <div class="titre-bloc">
 Le principe du forum
 </div>
 <div class="scroll">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ac efficitur enim. Proin dictum malesuada arcu vitae efficitur. Sed a mi id mauris accumsan consectetur. Nullam vulputate dignissim nisl, at accumsan elit dignissim non. Vestibulum risus odio, porta et pellentesque eu, mollis id leo. Nunc id gravida elit. Ut ornare aliquet nunc sit amet dictum.
 </p>
 <p>
 Aenean eros ex, tempor sed neque eget, facilisis scelerisque massa. Morbi nec vestibulum sapien, nec consequat orci. Quisque iaculis erat at velit vehicula blandit. Etiam malesuada viverra porttitor. Etiam feugiat dui lorem, a vestibulum massa pellentesque et. Mauris sed faucibus urna, non sollicitudin metus. Vestibulum nisl magna, consectetur nec nulla vulputate, porta porttitor odio.
 </p>
 </div>

 <p class="center"><a href="#">En savoir plus</a></p>
 </div>
 <div class="bloc">
 <div class="titre-bloc">
 Le staff
 </div>
 <div class="flex wrap">
 <!--
 PARTIE A COPIER / COLLER OU SUPPRIMER POUR AJOUTER / SUPPRIMER UN AVATAR
 <div class="membre_staff">
 <a href="http://tambouille-raleuses.forumactif.com/u2">
 <img src="http://pvereecken.fr/tambouille/sans_avatar.png" alt="Fleur'" />
 <p>Pseudo <br/> Rang
 </p>
 </a>
 </div>
 -->
 <div class="membre_staff">
 <a href="http://tambouille-raleuses.forumactif.com/u2">
 <img src="http://pvereecken.fr/tambouille/sans_avatar.png" alt="Fleur'" />
 <p>Pseudo <br/> Rang
 </p>
 </a>
 </div>
 <div class="membre_staff">
 <a href="http://tambouille-raleuses.forumactif.com/u2">
 <img src="http://pvereecken.fr/tambouille/sans_avatar.png" alt="Fleur'" />
 <p>Pseudo <br/> Rang
 </p>
 </a>
 </div>
 <div class="membre_staff">
 <a href="http://tambouille-raleuses.forumactif.com/u2">
 <img src="http://pvereecken.fr/tambouille/sans_avatar.png" alt="Fleur'" />
 <p>Pseudo <br/> Rang
 </p>
 </a>
 </div>
 <div class="membre_staff">
 <a href="http://tambouille-raleuses.forumactif.com/u2">
 <img src="http://pvereecken.fr/tambouille/sans_avatar.png" alt="Fleur'" />
 <p>Pseudo <br/> Rang
 </p>
 </a>
 </div>
 <div class="membre_staff">
 <a href="http://tambouille-raleuses.forumactif.com/u2">
 <img src="http://pvereecken.fr/tambouille/sans_avatar.png" alt="Fleur'" />
 <p>Pseudo <br/> Rang
 </p>
 </a>
 </div>
 </div>
 </div>
 <div class="flex-c">
 <div class="bloc">
 <div class="titre-bloc">
 Les dernières news
 </div>
 <p>• News 1</p>
 <p>• News 2</p>
 <p>• News 3</p>
 </div>
 <div class="bloc">
 <div class="titre-bloc">
 Les sujets du mois
 </div>
 <p><a href="#">Lien</a></p>
 <p><a href="#">Lien</a></p>
 <p><a href="#">Lien</a></p>
 </div>
 </div>
 </div>
 <div class="flex">
 <div class="bloc">
 <div class="titre-bloc">
 Votez pour le forum !
 </div>
 <p class="center">
 <a href="#" class="postlink" target="_blank" rel="nofollow"><img src="//" border="0" alt="Image et lien de vote" /></a>
 </p>
 </div>
 <div class="bloc" id="partenaires">
 <div class="titre-bloc">Les partenaires du forum
 </div>
 <p class="center"><a href="http://tambouille-raleuses.forumactif.com" target="_blank" title="La Tambouille des Râleuses - Entraide, tutoriels, conseils, astuces & formations."><img src="http://pvereecken.fr/tambouille/88x31-logo.png" alt="Logo 88x31 - La Tambouille des Râleuses" /></a> <a href="http://tambouille-raleuses.forumactif.com" target="_blank" title="La Tambouille des Râleuses - Entraide, tutoriels, conseils, astuces & formations."><img src="http://pvereecken.fr/tambouille/88x31-logo.png" alt="Logo 88x31 - La Tambouille des Râleuses" /></a> <a href="http://tambouille-raleuses.forumactif.com" target="_blank" title="La Tambouille des Râleuses - Entraide, tutoriels, conseils, astuces & formations."><img src="http://pvereecken.fr/tambouille/88x31-logo.png" alt="Logo 88x31 - La Tambouille des Râleuses" /></a> <a href="http://tambouille-raleuses.forumactif.com" target="_blank" title="La Tambouille des Râleuses - Entraide, tutoriels, conseils, astuces & formations."><img src="http://pvereecken.fr/tambouille/88x31-logo.png" alt="Logo 88x31 - La Tambouille des Râleuses" /></a></a>
 </div>
 </div>
  </div>

On enregistre et on récupère le lien de la page (chez moi https://maven.forumactif.org/h9-tambouille-pa-6-blocs-contexte-news-staff-sujets-importants-votes-partenaires ).


Maintenant, dans la CSS de ton forum (PA > Affichage > Couleurs > Feuille de style CSS), on va coller la CSS de notre PA :

Code:

/********* En tête CSS ***********/
  .en-tete, .en-tete *{
 box-sizing:border-box;
  }
  .en-tete{
 width:100%;
 background-color: #9AC9C9;
 color:#000;
 margin:auto;
 border:#689090 5px solid;
   border-top-left-radius: 30px;
 border-bottom-right-radius: 30px;
   padding:15px;
  }
  .titre{
 width:100%;
 text-align:center;
 font-size:38px;
 font-weight:bold;
 border-bottom:1px black solid;
  }
  .flex{
 display:flex;
 flex-wrap: nowrap;
 justify-content: space-between;
 align-items:stretch;
 width:100%;
  }
  .flex > div {
 flex:1;
  }
  .bloc{
 background:#F0F9F9;
 margin:3px;
 padding:3px;
  }
  .titre-bloc{
 font-size:20px;
 text-align:center;
 color:#9AC9C9;
 font-weight:bold;
  }

  .en-tete p{
 margin:0;
 padding:0.5%;
 text-align:justify;
  }
  .scroll{
 max-height:200px;
 overflow:auto;
   }
  .en-tete a{
 color: #0869a1;
 text-decoration:none;
  }
  #partenaires{
 flex:2;
  }
  .center{
 text-align:center !important;
  }
  .flex-c{
 display:flex;
 flex-direction:column;
 justify-content: space-between;
 align-items:stretch;
  }
  .flex-c > div{
 flex:1;
  }
  
  /** Effets avatars staff et prédéfinis **/
   .membre_staff{
      position:relative;
   }
   .membre_staff, .membre_staff img,.membre_staff p{
      width:100px;
      height:100px ;
      transition-duration: 2s;
  border-radius: 100px;
  text-align:center;
   }
   .membre_staff p{
      position:absolute;
      top:0;
      left:0;
      opacity:0;
      text-align:center;
      line-height:15px;
      transition-duration: 2s;
      font-weight:bold;
  width:100%;
   }
   .membre_staff:hover img{
      opacity:0.1;
      transition-duration: 2s;
  transform: rotate(360deg);
   }
   .membre_staff:hover p{
      opacity:1;
      transition-duration: 2s;
  top:40%;
   }
   .wrap{
 flex-wrap:wrap;
 margin:auto;
   }
     /*******FIN DE LA PA******/

Jusque là, on a pas un visuel terrible, et surtout, ça ne s'affiche nul part... On passe à l'étape 3 !


Eh oui, il faut bien mettre en place tout ça ! Pour cela, on va se servir du tutoriel de Miettes pour éviter les iframes que l'on va adapter un peu.
Dans le template index-body, on va rechercher ceci au tout début :

Code:

<!-- BEGIN message_admin_index -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
 <!-- BEGIN message_admin_titre -->
 <tr>
 <td class="catHead" height="28"><span class="cattitle">{message_admin_index.message_admin_titre.MES_TITRE}</span></td>
 </tr>
 <!-- END message_admin_titre -->
 <!-- BEGIN message_admin_txt -->
 <tr>
 <td class="row1" rowspan="3" align="center" valign="middle">
 <div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>
 </td>
 </tr>
 <!-- END message_admin_txt -->
</table>
<!-- END message_admin_index -->

Et on va purement et simplement le supprimer. On va y mettre à la place ceci :

Code:

<div id="page-accueil"> </div>

On enregistre, et on publie.
Ensuite on va aller ajouter un javascript (PA> Modules > Gestion des codes javascript)
On vérifie que la "gestion des codes javascripts" est bien activée. Puis on crée un javascript dans lequel on va écrire :

Code:

$(document).ready(function(){
  $('#page-accueil').load('/h9-');
});

ATTENTION : Ici le /h9- est à remplacer parce que tu as TOI dans le lien de ta page HTML.

On enregistre.
Eh voilà, on a notre visuel qui est bon !
Il n'y a plus qu'à personnaliser la CSS et le HTML

---

Et voilà le travail Si tu as un problème avec le code, que ça soit pour l'installation ou la personnalisation, n'hésites pas à demander !