En-tête beige - 5 blocs + liens de navigation

Coucou !

Voilà une nouvelle en-tête !
Bien entendu, les blocs peuvent changer d'utilité et les couleurs peuvent changer ! 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 s'adaptera à la largeur de ton forum. Elle peut cependant ê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.


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">
    <div id="titre">
      Bienvenue sur NOM DU FORUM   
    </div>
    <p>
      <a href="">lien</a> - <a href="">lien</a> - <a href="">lien</a> - <a href="">lien</a> - <a href="">lien</a>
    </p>
    <div id="ligne_1">
      <div id="presentation">
        <div class="sous-titre">
          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="news">
        <div class="sous-titre">
          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="staff">
        <div class="sous-titre">
          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 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 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 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">
      <div id="partenaires">
        <div class="sous-titre">
          Partenaires 
        </div>
        <div>
          <marquee onmouseover="this.stop();" onmouseout="this.start();">
            <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>

      <div id="credits">
        <div class="sous-titre">
          Les crédits   
        </div>
        <p>
          En-tête réalisée par <a href="http://tambouille-raleuses.forumactif.com">© Mäven</a>. Autres crédits.

        </p>
      </div>
    </div>
  </div>

On enregistre et on récupère le lien de la page (chez moi http://maven.forumactif.org/h15-en-tete-beige-5-blocs-liens-de-navigation).


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

Code:

 /***********CSS En-tête***********/
#en_tete,
  #en_tete *{
    box-sizing:border-box;
  }
  #en_tete{ /**bloc général de l'en-tête**/
  width:100%; /*largeur*/
  border:#695318 2px solid; /*cadre*/
  text-align:center; /*par défaut, tout est centré*/
  background:#dac7a0; /*couleur de fond*/
  margin:auto; /*on centre sur la page*/
  font-size:11px; /*Taille de la police*/
  font-family:Comic sans ms; /*typo utilisée*/
}
#en_tete a{ /**Les liens de l'en-tête **/
text-decoration:none; /*On retire le soulignement*/
color:#5C5C5C; /*Couleur des liens */
}
#en_tete #titre, #en_tete .sous-titre{ /**Titres**/
  color:#584a2c; /*couleur des titres*/
  font-weight:bold; /*Mise en gras*/
  padding:5px 0; /*vide entre le texte et les bordures*/
  text-align:center;/*Placement*/
  background:url('https://i.servimg.com/u/f60/15/82/71/87/fond_t10.png'); /*image de fond des titres. Peut être remplacé par une couleur*/
}
#en_tete #titre{
  font-size:28px;/*Taille du grand titre*/
}
#en_tete .sous-titre{
  font-size:18px !important; /*Taille des sous-titre*/
}
#en_tete > p{
  text-align:center !important; /*On centre les éléments du premiers paragraphe (celui qui contient les liens)*/
  font-size:14px;
}
#en_tete p{
  text-align:justify; /*Dans tous les autres paragraphes le texte est justifié*/
  padding:5px; /*Placement*/
  margin:0; /*Placement*/
  text-indent:10px; /*Mise en place de l'alinéa*/
}
#en_tete ul{
  text-align:justify; /*Le texte dans les listes est justifié*/
}

/**Structure générale en tableau**/
#en_tete #ligne_1, #en_tete #ligne_2{
  display:flex;
  width:98%;
  margin: 0 1% 1% 1%;
}
#en_tete #presentation, #en_tete #news, #en_tete #staff{
  width:32%;
  border:1px #695318 solid;
  max-height:240px;
  text-align:justify;
  margin:0 1%;
}
#en_tete #partenaires{
  width:67%;
  border:1px #695318 solid;
  height:100px;
  margin:0 1%;
}
#en_tete #credits{
  width:32%;
  border:1px #695318 solid;
  font-size:10px !important;
  margin:0 1%;
  height:100px;
  overflow:auto;
}
/**Fin de la structure générale en tableau**/

#en_tete div.sous-titre + div{ /**Mise en place de l'ascensseur**/
max-height:200px;
overflow-y:auto;
}

#en_tete #partenaires p {/*On aligne le texte dans les partenaires*/
  text-align:center;
}
#en_tete marquee{
  padding:5px;
}

/**Infobulle**/
.d-flex{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  margin:0;
}
#staff .declencheur{
  margin:1%;
}
#staff .declencheur div{
  display:none;
}
#staff .declencheur:hover div{
  display:inline;
  position:absolute;
  margin-top:23px;
  margin-left:-35px;
  color:#000;
  background:url('http://i61.tinypic.com/2ce21hc.jpg');
  padding:15px;
  border : 1px solid #1f2b0d;
  border-radius:3px;
  box-shadow:0 0 2px rgba(0,0,0,.5);
}
    /*******FIN DE L'EN-TETE******/

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

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

On enregistre.
Et 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 !