En-tête 4 blocs : news, présentation forum, staff et partenaires

[MävenAdmin]

En-tête 4 blocs : news, présentation forum, staff et partenaires

Bonjour bonjour

Bien entendu, les blocs peuvent changer d'utilité ! Voilà donc un aperçu :

Et pour voir les infobulles, 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.

Merci de mettre un copyright quelque part sur ton forum. Il n'y en a pas sur le code mais je compte sur toi !

Installation

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.

Etape 1 : Créer notre page HTML

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">
      <div id="titre_pa">
        Bienvenue sur NOM DU FORUM     
      </div>       
      <div id="ligne_1" class="d-flex">
        <div id="news">
            <div class="sous_titre_pa">
              Les news !     
            </div>
            <ul>
              <li>
                  <span class="mise_en_avant">News 1</span> : blablabla   
              </li>
              <li>
                  <span class="mise_en_avant">News 2</span> : blablabla   
              </li>
            </ul>
        </div>

        <div id="presentation">
            <div class="sous_titre_pa">
              Présentation du forum     
            </div>
            <div> 
              <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla bibendum maximus libero. Duis leo nulla, rhoncus ac velit in, dignissim laoreet sem. Cras dapibus laoreet eros, quis fringilla nisl pretium et. Quisque non dolor elit. Etiam id felis velit. Nullam purus felis, mollis sollicitudin felis in, tristique ultricies ligula. Fusce id viverra nisl. Proin cursus ac lacus id consectetur. Cras dictum ligula ut quam sagittis, nec pellentesque velit malesuada. Suspendisse vitae tempor augue. Morbi et placerat tortor. Vivamus at laoreet lacus.</p><p>

                  Mauris sem eros, ornare quis sapien sit amet, bibendum tincidunt justo. Nullam at turpis molestie, finibus sapien non, elementum ex. Curabitur ut libero gravida, fermentum nibh quis, finibus justo. Etiam varius dapibus elementum. Duis lorem justo, dapibus et eros sit amet, malesuada volutpat ante. In at arcu eu orci aliquet placerat non non dui. Phasellus laoreet neque sed vehicula imperdiet. Ut sodales enim nisl, vel malesuada ex ullamcorper sit amet. Etiam eleifend convallis leo, sed aliquam nulla molestie at. Duis mattis sapien lorem, ut porttitor urna blandit sed. Suspendisse sit amet commodo eros, nec tincidunt odio. Suspendisse facilisis scelerisque lorem in facilisis. Nulla euismod diam libero, in egestas sapien venenatis eget. Pellentesque at leo tincidunt, eleifend nisl sed, lobortis dolor. Proin sed porttitor risus, sit amet aliquet arcu. In hac habitasse platea dictumst.
              </p>
            </div>
        </div>

        <div id="staff">
            <div class="sous_titre_pa">
              Le staff     
            </div>
            <div class="d-flex">
              <div class="declencheur">
                  <img src="http://i60.tinypic.com/9t32i1.png" alt="avatar Pseudo" />
                  <div>
                    <a href="#">Nom</a> <br />
                    <a href="#">Poste</a> 
                  </div>
              </div> 
              <div class="declencheur">
                  <img src="http://i60.tinypic.com/9t32i1.png" alt="avatar Pseudo" />
                  <div>
                    <a href="#">Nom</a> <br />
                    <a href="#">Poste</a> 
                  </div>
              </div>
              <div class="declencheur">
                  <img src="http://i60.tinypic.com/9t32i1.png" alt="avatar Pseudo" />
                  <div>
                    <a href="#">Nom</a> <br />
                    <a href="#">Poste</a> 
                  </div>
              </div>
            </div>                       
            <div class="d-flex">

              <div class="declencheur">
                  <img src="http://i60.tinypic.com/9t32i1.png" alt="avatar Pseudo" />
                  <div>
                    <a href="#">Nom</a> <br />
                    <a href="#">Poste</a> 
                  </div>
              </div> 
              <div class="declencheur">
                  <img src="http://i60.tinypic.com/9t32i1.png" alt="avatar Pseudo" />
                  <div>
                    <a href="#">Nom</a> <br />
                    <a href="#">Poste</a> 
                  </div>
              </div> 
              <div class="declencheur">
                  <img src="http://i60.tinypic.com/9t32i1.png" alt="avatar Pseudo" />
                  <div>
                    <a href="#">Nom</a> <br />
                    <a href="#">Poste</a> 
                  </div>
              </div> 
            </div>
            <div class="d-flex">

              <div class="declencheur">
                  <img src="http://i60.tinypic.com/9t32i1.png" alt="avatar Pseudo" />
                  <div>
                    <a href="#">Nom</a> <br />
                    <a href="#">Poste</a> 
                  </div>
              </div> 
              <div class="declencheur">
                  <img src="http://i60.tinypic.com/9t32i1.png" alt="avatar Pseudo" />
                  <div>
                    <a href="#">Nom</a> <br />
                    <a href="#">Poste</a> 
                  </div>
              </div> 
              <div class="declencheur">
                  <img src="http://i60.tinypic.com/9t32i1.png" alt="avatar Pseudo" />
                  <div>
                    <a href="#">Nom</a> <br />
                    <a href="#">Poste</a> 
                  </div>
              </div> 
            </div>
        </div>
      </div>

      <div id="ligne_2" class="d-flex">
        <div id="partenaires">
            <div class="sous_titre_pa">
              Partenaires   
            </div>
            <marquee>
              <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>
            </marquee>
            <p>
              <a href="">En faire parti ?</a>
            </p> 
        </div>
        <div class="sep">
        </div>

      </div>
  </div>

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

Etape 2 : on applique la CSS

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{
      width:98%;
      border:#695318 2px solid;
      text-align:center;
      padding:0;
      background:#f1d69e;
      margin:auto;
      font-size:11px;
      font-family:Comic sans ms;
  }
  #en_tete *{
      box-sizing:border-box;
  }
  #en_tete a{
      text-decoration:none;
      color:#5C5C5C;
      font-size:12px;
  }
  #en_tete #titre_pa, #en_tete .sous_titre_pa{
      color:#000000;
      background:url('https://i.servimg.com/u/f60/15/82/71/87/fond210.png');
      margin:0;
      text-align:center;
      font-weight:bold;
  }
  .d-flex{
      display:flex;
      justify-content: space-around;
  }
  #en_tete #titre_pa{
      font-size:28px;
  }
  #en_tete .sous_titre_pa{
      font-size:18px !important;
      padding:0;
  }
  #en_tete p{
      text-align:justify;
      padding:5px;
      margin:0;
      text-indent:10px;
  }
  #en_tete ul{
      text-align:justify;
      margin-top:0;
      padding-top:5px;
  }

  /**Structure générale en tableau**/
  #en_tete #ligne_1, #en_tete #ligne_2{
      width:98%;
      margin:1%;
  }
  #en_tete #presentation, #en_tete #news, #en_tete #staff{
      width:33%;
      border:1px #695318 solid;
      max-height:220px;
      text-align:justify;
  }
  #en_tete #partenaires{
      width:100%;
      border:1px #695318 solid;
      height:100px;
  }
  /**Fin de la structure générale en tableau**/
  #en_tete #presentation div{
      max-height:185px;
      overflow:auto;
  }

  #en_tete #partenaires p{
      text-align:center;
  }
  #en_tete marquee{
      padding:5px;
  }

  /**Infobulle**/

  #staff .declencheur{
      position:relative;
      margin-top:5px;
  }
  #staff .declencheur div{
      display:none;
  }
  #staff .declencheur:hover div{
      display:block;
      position:absolute;
      top:20%;
      left:20%;
      color:#000;
      background:url('https://i.servimg.com/u/f60/15/82/71/87/fond210.png');
      padding:15px;
      border : 1px solid #1f2b0d;
      border-radius:3px;
      box-shadow:0 0 2px rgba(0,0,0,.5);
      z-index:2;
  }   
    /*******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 !

Etape 3 : on met en place la PA

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('/h1-');
});

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