En-tête sombre orangée - 3 blocs & liens

Hello hello

Je vous propose une en-tête que j'avais réalisé pour un forum qui est maintenant fermé.

Voici le rendu :

Spoiler:

Evidemment, l'utilisation des blocs ainsi que les couleurs et typos peuvent être changées

Pour voir les différents effets et le rendu "en vrai", c'est par ici.

Il faut avoir accès aux templates pour l'installation, mais il n'y en a plus besoin pour les mises à jour


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="lsm-wrapper-entete">
      <div class="flex">
         <div>
            <div class="flex">
               <div class="blk blk-staff">
                  <h2>L'équipe</h2>
                  <div class="flex">
                     <div class="staff">
                        <img src="https://2img.net/u/4014/30/77/56/avatars/34-91.png">
                        <div>
                           <p>Pêpeche</p>
                           <p class="rang">Fondatrice</p>
                           <a href="http://tambouille-raleuses.forumactif.com/u34" target="_blank">Profil</a>
                        </div>
                     </div>
                     <div class="staff">
                        <img src="https://2img.net/u/4014/30/77/56/avatars/1-43.png">
                        <div>
                           <p>Miettes</p>
                           <p class="rang">Admin</p>
                           <a href="http://tambouille-raleuses.forumactif.com/u1" target="_blank">Profil</a>
                        </div>
                     </div>
                     <div class="staff">
                        <img src="https://i.servimg.com/u/f86/19/47/12/29/vava_p10.png">
                        <div>
                           <p>Mäven</p>
                           <p class="rang">Admin</p>
                           <a href="http://tambouille-raleuses.forumactif.com/u2" target="_blank">Profil</a>
                        </div>
                     </div>
                  </div>
                  <h2>Les nouveautés</h2>
                  <ul class="liste-news">
                     <li>
                        <strong>XX/XX/XXXX</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                     </li>
                     <li>
                        <strong>XX/XX/XXXX</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                     </li>
                     <li>
                        <strong>XX/XX/XXXX</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                     </li>
                     <li>
                        <strong>XX/XX/XXXX</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                     </li>
                  </ul>
               </div>
               <div class="blk">
                  <div class="blk-rpg">
                     <h2>Nos partenaires</h2>
                     <div class="flex">
                        <a href="#" target="_blank">
                           <img src="https://nsa40.casimages.com/img/2019/03/13/190313110240431543.png">
                        </a>
                        <a href="#" target="_blank">
                           <img src="https://nsa40.casimages.com/img/2019/03/13/190313110240431543.png">
                        </a>
                        <a href="#" target="_blank">
                           <img src="https://nsa40.casimages.com/img/2019/03/13/190313110240431543.png">
                        </a>
                        <a href="#" target="_blank">
                           <img src="https://nsa40.casimages.com/img/2019/03/13/190313110240431543.png">
                        </a>
                        <a href="#" target="_blank">
                           <img src="https://nsa40.casimages.com/img/2019/03/13/190313110240431543.png">
                        </a>
                     </div>
                  </div>
                  <div class="sep"></div>
                  <div class="blk-description">
                     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo officiis, rem vero nostrum nihil animi possimus, amet. Incidunt beatae quis magnam dignissimos dolores nobis ea reiciendis qui? Ipsam nulla, omnis?<br />
                     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo officiis, rem vero nostrum nihil animi possimus, amet. Incidunt beatae quis magnam dignissimos dolores nobis ea reiciendis qui? Ipsam nulla, omnis?</p>
                  </div>
               </div>
            </div>
            <div class="flex">
               <div class="blk-liens">
                  <a href="http://triangle-references.forumactif.com/t1110-reglements" target="_blank">
                     Règlements
                  </a>
                  <a href="http://triangle-references.forumactif.com/f120-candidatures" target="_blank">
                     Recrutements
                  </a>
                  <a href="#" target="_blank">
                     Partenariats
                  </a>
                  <a href="http://triangle-references.forumactif.com/f182-etre-reference-rpg" target="_blank">
                     Référencements
                  </a>
                  <a href="http://triangle-references.forumactif.com/f147-publicites-non-rpg" target="_blank">
                     Publicités
                  </a>
                  <a href="http://triangle-references.forumactif.com/c3-aides-astuces" target="_blank">
                     Services
                  </a>
               </div>
               <div class="blk blk-credits">
                  <h2>
                     Crédits
                  </h2>
                  <p>En-tête réalisée par ©<a href="http://tambouille-raleuses.forumactif.com/">Miettes</a></p>
               </div>
            </div>
         </div>
         <div class="badges">
            <a href="http://triangle-references.forumactif.com/f165-libre-service">
               <img src="https://nsa40.casimages.com/img/2019/04/03/190403052551782328.png" alt="LS Graphique">
            </a>
            <a href="">
               <img src="https://nsa40.casimages.com/img/2019/04/03/190403052551838809.png" alt="Teams Flood Forum">
            </a>
            <a href="http://triangle-references.forumactif.com/f205-concours-creatif">
               <img src="https://nsa40.casimages.com/img/2019/04/03/19040305255293306.png" alt="Concours Créatifs">
            </a>
            <a href="http://triangle-references.forumactif.com/f167-libre-service">
               <img src="https://nsa40.casimages.com/img/2019/04/03/190403052552350798.png" alt="LS Codage">
            </a>
         </div>
      </div>
   </div>

On enregistre et on récupère le lien de la page. Par exemple, pour moi :

Code:

http://bidouilles-miettes.forumactif.com/h3-npsls-en-tete-sombre-orangee

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

Code:

.lsm-wrapper-entete{
      color: lightgrey;
      font: normal 12px/16px Tahoma, sans-serif;
      margin: auto;
      width: 800px;
   }

   .lsm-wrapper-entete p{
      margin: 0;
      padding: 0;
   }

   .lsm-wrapper-entete .flex{
      display: flex;
      align-items: stretch;
       justify-content: space-between;
   }

   .lsm-wrapper-entete .blk{
      background: #0f0e0e;
      border: 2px solid #d97121;
       flex-shrink: 0;
       flex-grow: 0;
      margin:  1%;
      padding:  4px;
   }

   .lsm-wrapper-entete .sep{
      height: 15px;
      position: relative;
      width: 104%;
      left: -2%;
      background: #181818;
   }

   .lsm-wrapper-entete h2,
   .lsm-wrapper-entete .blk-liens a{
      color: #d97121;
      font-weight: bold;
      padding: 0;
      text-align: center;
      text-transform: uppercase;
   }

   .lsm-wrapper-entete h2{
      font-size: 18px;
      margin: 4px 0;
   }

   .lsm-wrapper-entete .blk-liens a{
      font-size: 14px;
      display: inline-block;
      margin: 4px;
      text-decoration: none;
      transition: all 0.35s ease;
       -webkit-transition: all 0.35s ease;
   }

   .lsm-wrapper-entete .blk-liens a:hover,
   .lsm-wrapper-entete .blk a:hover{
      filter: grayscale(1);
       -webkit-filter: grayscale(1);
       transition: all 0.35s ease;
       -webkit-transition: all 0.35s ease;
   }

   .lsm-wrapper-entete .blk-liens{
      max-width: 58%;
       flex: 0 0 58%;
   }

   .lsm-wrapper-entete .blk a{
      color: #d97121;
      text-decoration: none;
   }

   /* Bloc staff */

   .lsm-wrapper-entete .blk-staff{
      max-width: 48%;
       flex: 0 0 48%;
   }

   .lsm-wrapper-entete .blk-staff .flex{
      justify-content: space-around;
      flex-wrap: wrap;
   }

   .lsm-wrapper-entete .blk-staff .staff{
      background: #999;
      height: 100px;
      margin-top: 1.5%;
      margin-bottom:  1.5%;
       max-width: 100px;
       flex: 0 0 100px;
      overflow: hidden;
      position: relative;
   }

   .lsm-wrapper-entete .blk-staff .staff img{
      position: absolute;
      top: 0;
      left: 0;
   }


   .lsm-wrapper-entete .blk-staff .staff div{
       position: absolute;
       width: 80px;
       height: 70px;
       overflow: hidden;
       font-size: 9px;
       text-align: center;
       font-family: Arial;
       text-transform: uppercase;
       opacity: 0;
       transition: opacity 0.75s ease;
       -webkit-transition: opacity 0.75s ease;
       background: rgba(55,55,55,0.9);
       color: lightgrey;
       text-align:  center;
       padding: 4px;
       top: calc(50% - 35px);
       left: calc(50% - 40px);
       display: inline-block;
        padding: 10px 4px;
        box-sizing: border-box;
   }

   .lsm-wrapper-entete .blk-staff .staff:hover div{
       opacity: 1;
       transition: opacity 0.75s ease;
       -webkit-transition: opacity 0.75s ease;
   }

   .lsm-wrapper-entete .blk-staff .staff div .rang {
       background: Chocolate;
       color: black;
   }

   .lsm-wrapper-entete .blk-staff .staff div p{
      margin: 0;
      padding: 0;
   }

   .lsm-wrapper-entete .blk-staff .staff div a {
       text-decoration: none !important;
       font-size: 8px;
       text-transform: uppercase;
       color: lightgrey;
   }

   .lsm-wrapper-entete .blk-staff + div{
      max-width: 45%;
       flex: 0 0 45%;
       padding: 0;
   }

   /* News */

   .lsm-wrapper-entete .blk-staff .liste-news{
      margin: 0;
      padding: 0 10px 0 20px;
   }

   .lsm-wrapper-entete .blk-staff .liste-news li{
      margin-bottom: 4px;
   }

   .lsm-wrapper-entete .blk-staff .liste-news strong{
      border-right: 1px solid #d97121;
      color: #d97121;
      display: inline-block;
      padding-right: 4px;
   }


   /* Bloc RPG */
   .lsm-wrapper-entete .blk-rpg{
      border-bottom: 2px solid #d97121;
      padding: 4px;
   }

   .lsm-wrapper-entete .blk-rpg a img{
      transition: all 0.35s ease;
       -webkit-transition: all 0.35s ease;
   }

   .lsm-wrapper-entete .blk-rpg a:hover img{
      filter: grayscale(1);
       -webkit-filter: grayscale(1);
       transition: all 0.35s ease;
       -webkit-transition: all 0.35s ease;
   }

   /* Bloc description */
   .lsm-wrapper-entete .blk-description{
      border-top: 2px solid #d97121;
      padding: 4px;
   }


   /* Bloc des crédits */
   .lsm-wrapper-entete .blk-credits{
      flex-shrink: 1;
       flex-grow: 1;
   }

   .lsm-wrapper-entete .blk-credits h2{
      text-align: left;
   }

   /* Badges */
   .lsm-wrapper-entete .badges{
       align-self: center;
   }

   .lsm-wrapper-entete .badges a{
      display: inline-block;
      margin: 4px 0;
   }

   .lsm-wrapper-entete .badges a img{
       transition: all 0.35s ease;
       -webkit-transition: all 0.35s ease;
   }

   .lsm-wrapper-entete .badges a:hover img{
      filter: grayscale(1);
       -webkit-filter: grayscale(1);
       transition: all 0.35s ease;
       -webkit-transition: all 0.35s ease;
   }


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 de ce tutoriel pour éviter les iframes que l'on va adapter un peu.


Dans le template index_body (PA > Affichage > Templates > Général), on va rechercher ceci au tout début :

Code:

<!-- BEGIN message_admin_index -->

et on va ajouter juste avant :

Code:

<div id="lsm-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(){
  $('lsm-#page-accueil').load('/h3-');
});

Attention : ici le /h3- est à remplacer par 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


Lorsque tu veux ou dois mettre à jour ton message d'en-tête, il te suffit d'aller éditer la page HTML en mode avancé.

---

Merci de ne pas supprimer le copyright

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