En-tête 6 blocs : Contexte, news, navigation, prédéfinis, staff, recrutement

Hello !

Ça c'est un long titre   ! Mais difficile de décrire une PA... Alors j'ai fait un plus concret
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.

Un autre rendu possible, avec une autre disposition :

Spoiler:

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


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 id="en_tete" class="d-flex">
      <div id="colonne_gauche">
         <div id="description">
            <div class="titre_case">Contexte</div>
            <div>
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet elit magna. Vivamus tempor mi urna, et congue nisi scelerisque a. Donec vitae nisl tincidunt, sagittis libero ac, fermentum urna. Phasellus magna quam, posuere eu ante in, dignissim rhoncus ante. Fusce viverra nulla condimentum pretium iaculis. Cras placerat dictum turpis sed blandit. Proin sit amet aliquam lacus, pretium ullamcorper lorem. Vivamus tellus velit, mattis eu porttitor sodales, volutpat a felis. </p>
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet elit magna. Vivamus tempor mi urna, et congue nisi scelerisque a. Donec vitae nisl tincidunt, sagittis libero ac, fermentum urna. Phasellus magna quam, posuere eu ante in, dignissim rhoncus ante. Fusce viverra nulla condimentum pretium iaculis. Cras placerat dictum turpis sed blandit. Proin sit amet aliquam lacus, pretium ullamcorper lorem. Vivamus tellus velit, mattis eu porttitor sodales, volutpat a felis. </p>
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet elit magna. Vivamus tempor mi urna, et congue nisi scelerisque a. Donec vitae nisl tincidunt, sagittis libero ac, fermentum urna. Phasellus magna quam, posuere eu ante in, dignissim rhoncus ante. Fusce viverra nulla condimentum pretium iaculis. Cras placerat dictum turpis sed blandit. Proin sit amet aliquam lacus, pretium ullamcorper lorem. Vivamus tellus velit, mattis eu porttitor sodales, volutpat a felis. </p>
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet elit magna. Vivamus tempor mi urna, et congue nisi scelerisque a. Donec vitae nisl tincidunt, sagittis libero ac, fermentum urna. Phasellus magna quam, posuere eu ante in, dignissim rhoncus ante. Fusce viverra nulla condimentum pretium iaculis. Cras placerat dictum turpis sed blandit. Proin sit amet aliquam lacus, pretium ullamcorper lorem. Vivamus tellus velit, mattis eu porttitor sodales, volutpat a felis. </p>
            </div>
         </div>
      </div>
      <div id="colonne_droite">
         <div id="haut" class="d-flex">
            <div id="news" class="cell">
               <div class="titre_case">Les nouveautés</div>
               <div>
                  <ul>
  <!-- Partie à coller pour rajouter une news :
 <li>
                        <span class="mea">XX/XX/XX :
                        </span>
                        ici les nouvelles !
                     </li>
  -->
                     <li>
                        <span class="mea">XX/XX/XX :
                        </span>
                        ici les nouvelles !
                     </li>
                  </ul>
               </div>
            </div>
            <div id="link" class="cell">
               <div class="titre_case">Navigation</div>
               <div>
                  <ul>
                     <li><a href="#"> Lien</a></li>
                     <li><a href="#"> Lien</a></li>
                     <li><a href="#"> Lien</a></li>
                     <li><a href="#"> Lien</a></li>
                     <li><a href="#"> Lien</a></li>
                     <li><a href="#"> Lien</a></li>
                     <li><a href="#"> Lien</a></li>
                  </ul>
               </div>
            </div>
            <div id="predef" class="cell">
               <div class="titre_case">Prédéfinis</div>
               <div>
                  <p>
                     Quelques prédéfinis qui vous attendent
                  </p>
                  <div class="d-flex">
  <!-- Partie à coller pour rajouter un prédéfini :
 <div class="predefini">
                        <img src="Lien_de_l'avatar" alt="Pseudo" />
                        <p>Pseudo <br/> Autre information
                        </p>
                     </div>
  -->
                    <div class="predefini">
                        <img src="https://i.servimg.com/u/f60/15/82/71/87/avatat11.png" alt="Pseudo" />
                        <p>Pseudo <br/> Autre information
                        </p>
                     </div>
                     <div class="predefini">
                        <img src="https://i.servimg.com/u/f60/15/82/71/87/avatat11.png" alt="Pseudo" />
                        <p>Pseudo <br/> Autre information
                        </p>
                     </div>
                    <div class="predefini">
                        <img src="https://i.servimg.com/u/f60/15/82/71/87/avatat11.png" alt="Pseudo" />
                        <p>Pseudo <br/> Autre information
                        </p>
                     </div>
                    <div class="predefini">
                        <img src="https://i.servimg.com/u/f60/15/82/71/87/avatat11.png" alt="Pseudo" />
                        <p>Pseudo <br/> Autre information
                        </p>
                     </div>
                  </div>
               </div>
            </div>
         </div>
         <div id="bas" class="d-flex">
            <div id="staff_actuel" class="cell">
               <div class="titre_case">Personnes à contacter</div>
               <div>
                  <p>
                     Si tu as la moindre question, tu peux contacter un des membres du staff :
                  </p>
                  <div class="d-flex">
  <!-- Partie à coller pour rajouter un membre du staff :
 <div class="membre_staff">
                        <img src="LIEN DE L'AVATAR" alt="Pseudo" />
                        <p>Pseudo <br/> Groupe
                        </p>
                     </div>
  -->
                    
                     <div class="membre_staff">
                        <img src="https://i.servimg.com/u/f60/15/82/71/87/avatat11.png" alt="Pseudo" />
                        <p>Pseudo <br/> Groupe
                        </p>
                     </div>
                    <div class="membre_staff">
                        <img src="https://i.servimg.com/u/f60/15/82/71/87/avatat11.png" alt="Pseudo" />
                        <p>Pseudo <br/> Groupe
                        </p>
                     </div>
                    <div class="membre_staff">
                        <img src="https://i.servimg.com/u/f60/15/82/71/87/avatat11.png" alt="Pseudo" />
                        <p>Pseudo <br/> Groupe
                        </p>
                     </div>
                     <div class="membre_staff">
                        <img src="https://i.servimg.com/u/f60/15/82/71/87/avatat11.png" alt="Pseudo" />
                        <p>Pseudo <br/> Groupe
                        </p>
                     </div>
                     <div class="membre_staff">
                        <img src="https://i.servimg.com/u/f60/15/82/71/87/avatat11.png" alt="Pseudo" />
                        <p>Pseudo <br/> Groupe
                        </p>
                     </div>
                  </div>
               </div>
            </div>
            <div id="staff" class="cell">
               <div class="titre_case">Nous recherchons...</div>
               <div>
                  <p>
                     Nous recherchons actuellement .... !
                  </p>
                  <p>
                     Pour en savoir plus et/ou postuler, <a href="#">rendez-vous par ici !</a>
                  </p>
               </div>
            </div>
         </div>
      </div>
   </div>

On enregistre et on récupère le lien de la page (chez moi http://tite-may-test.forumactif.org/h8-tambouille-pa-6-blocs ).


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 ***********/
   /**CSS générale**/
   #en_tete{
      background:#A7C553;
      height:350px;
      margin:auto;
      border:#1c2603 1px solid;
      width:98%;
      box-sizing:border-box;
      padding:0.5%;
      font-family:Verdana;
      font-size:12px;
   }
   #en_tete *{
      box-sizing:border-box;
   }
   .d-flex{
      display:flex; /** On met des divs les unes à coté des autres en évitant le float**/
      justify-content: space-around;
   }
   /**Mise en page des listes**/
   ul{
      margin:0;
      list-style: none;
      padding:0;
   }
   ul li:before {
      content: ":diamonds:";
      font-weight:bold;
      color:#4a5c1a;
   }
   /**mise en page des liens**/
   a{
      color:#232E05;
  text-decoration:none;
  font-family: 'Delius', cursive;
  font-size:13px;
 }
 /**Mise en page des textes**/
   p{
      padding:3px;
  margin:0;
   }
   .mea{
      text-indent:12px;
      color:#4a5c1a;
      margin:-2px 0;
      font-weight:bold;
   }
     /**Mise en page des titres de cases**/
   #en_tete .titre_case{
      font-family: 'Delius', cursive;
      font-size:19px;
      color:#43570f;
      padding:0;
      margin:0 0 -5px 10px;
      text-shadow: -1px 0 0 rgba(0,0 ,0, 0.5),1px 0 0 rgba(0,0 ,0, 0.5),0 -1px 0 rgba(0,0 ,0, 0.5),0 1px 0 rgba(0,0 ,0, 0.5);
   }
   /**Mise en page de chaque case**/
   #description div.titre_case+div,
   .cell div.titre_case+div{
      background:#cae385;
      border:1px #43570f solid;
      text-align:justify;
      padding:8px;
      overflow:auto;
   }
   #colonne_gauche{
      width:20%;
   }
   #colonne_droite{
      width:80%;
   }
   #news{
      width:35%;
   }
   #link{
      width:20%;
   }
   #predef{
      width:43.8%;
   }
   #staff,#staff_actuel{
      width:49.6%;
   }
   #haut, #bas{
      width:100%;
   }
   #haut div, #bas div{
      margin:0 0.2%;
   }
   #description div+div{
      height:300px;
   }
   #news div+div, #link div+div, #predef div+div{
      height:152px;
   }
   #staff_actuel div+div, #staff div+div{
      height:133px;
   }

 /** Effets avatars staff et prédéfinis **/
   .membre_staff,
   .predefini{
      position:relative;
   }
   .membre_staff, .membre_staff img,.membre_staff p{
      width:60px;
      height:60px !important;
      transition-duration: 2s;

   }
   .membre_staff p{
      position:absolute;
      top:0;
      left:0;
      opacity:0;
      text-align:center;
      line-height:15px;
      transition-duration: 2s;
      font-weight:bold;
   }
   .membre_staff:hover img{
      opacity:0.1;
      transition-duration: 2s;
   }
   .membre_staff:hover p,
   .predefini:hover p{
      opacity:1;
      transition-duration: 2s;
   }
   .predefini, .predefini img, .predefini p{
      width:70px;
      height:70px !important;
      transition-duration: 2s;
   }
   .predefini p{
      position:absolute;
      top:0;
      left:0;
      opacity:0;
      text-align:center;
      transition-duration: 2s;
      font-weight:bold;
   }
   .predefini:hover img{
      opacity:0.1;
      transform: rotate(360deg);
      transition-duration: 2s;
   }
    
     /*******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('/h8-');
});

ATTENTION : Ici le /h8- 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


Dans le visuel, on voit que j'ai une police personnalisée pour les liens et les titres : il faut aller l'ajouter.
Pour cela : PA > Général > Promotion du forum : Les moteurs de recherche et dans Balises supplémentaires ajouter "lier une feuille CSS" et coller  ceci (ou le lien de la police de ton choix) :

Code:

https://fonts.googleapis.com/css?family=Delius

---

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 !