Idea Les Râleuses sont absentes.. Idea
Le forum est en vacances mais toutes nos ressources restent disponibles. (En savoir +)
-75%
Le deal à ne pas rater :
Plaque Induction Portable Amzchef
42.49 € 169.99 €
Voir le deal

Aller en bas
Mäven
Mäven
Râleuse (Admin)
Informations : Absente / peu présente le soir à partir de 18h30
----
Idea Viens papoter avec nous sur le discord

Messages : 4323
https://tambouille-raleuses.forumactif.com/

En-tête 8 blocs (contexte - news - staff - prédéfinis - navigation rapide - top-sites - crédits - partenaires) Empty En-tête 8 blocs (contexte - news - staff - prédéfinis - navigation rapide - top-sites - crédits - partenaires)

le Sam 15 Fév 2020 - 10:34

En-tête 8 blocs (contexte - news - staff - prédéfinis - navigation rapide - top-sites - crédits - partenaires)


Hello !

Ça c'est un long titre  hihi ! Comme d'habitude quoi Smile
Bien entendu, les blocs peuvent changer d'utilité ! Voilà donc un aperçu :
En-tête 8 blocs (contexte - news - staff - prédéfinis - navigation rapide - top-sites - crédits - partenaires) Pa_gal10
Et pour voir les effets sur les avatars, tu peux te rendre ici : [il suffit de cliquer ]

Idea Les images du milieu sont rondes également et représentent la navigation rapide.

Exclamation  LS réalisé à partir de la commande de Galatée (et avec son accord)
Exclamation Merci de ne pas retirer le copyright, si tu changes l'utilité de la boite merci de mettre le copyright ailleurs Smile

Installation

L'installation va se faire en plusieurs étapes : on va créer une page HTML puis ajouter une iframe

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:
<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <title>En tête 8 blocs</title>

   <link href="https://fonts.googleapis.com/css?family=Playball&display=swap" rel="stylesheet" />

   <style>
      ::-webkit-scrollbar {
         width: 6px; /*largeur de la scrollbar verticale*/
         height: 6px; /*hauteur de la scrollbar horizontale*/
      }
      ::-webkit-scrollbar-track {
      background-color: #eecb94 /*couleur du fond de la scrollbar*/
             }
      ::-webkit-scrollbar-thumb { /*la petite bande qui monte/descend*/
         background-color:#5e4621 /*couleur de la barre*/;
         border-radius: 10px;
      }
      *{
                  box-sizing: border-box;
                  scrollbar-color: #eecb94;
                  scrollbar-width: thin;
                }
      body{
         max-width:900px;
         width: 100%;
         margin: auto;
         color: #5e4621;
                font-family:verdana;
                font-size:12px;
      }
      body a{
         color:#2E2E2E;
         font-family: 'Playball', cursive;
         text-decoration:none;
      }
      .d-flex{
         display: flex;
         justify-content: space-between;
      }
      .d-flex > div{
         width:33%;
      }
             #titrePA{
                text-align:center;
                font-size:30px;
                font-family: 'Playball', cursive;
             }
      #PA,
      #partenaires{
         width:100%;
         margin:auto;
         background:#eecb94;
         border:#5e4621 1px solid;
         padding:10px;
      }
      #partenaires{
         overflow-x:auto;
      }

      .blocTitre{
         width:100%;
         font-family: 'Playball', cursive;
         font-size:16px;
         line-height: 25px;
         text-align: center;
         border:1px #5e4621 solid;
         margin : 1% 0;
         background:#5e4621;
         color:#FAFAFA;
      }
      .blocTexteG,
      .blocTexteD{
         border:1px #5e4621 solid;
         margin : 1% 0;
         text-align: justify;
         padding:5px;
      }
      .blocTexteG{
         height:160px;
         overflow:auto;
      }
      .blocTexteD{
         height:65px;
         overflow:auto;
      }
      .blocRonds{
         text-align: center;
      }
      .blocRonds a{
         margin:5px;
      }
      .blocRonds a,
      .blocRonds img{
         width:60px;
         height:60px;
         border-radius: 100px;
      }
      #blocRondsCentre{
         flex-wrap: wrap;
         justify-content: space-around;
      }
      #blocRondsCentre a{
         margin:5px;
         position:relative;
      }
      #blocRondsCentre a,
      #blocRondsCentre img{
         width:90px;
         height:90px;
         border-radius: 100px;
         transition-duration:1s;
      }
      #blocRondsCentre .Droite{
         align-self: flex-start;
      }
      #blocRondsCentre .Gauche{
         align-self: flex-end;
      }
      #blocRondsCentre p{
         opacity:0;
         position: absolute;
         top: 0;
         text-align: center;
         width: 100%;
         line-height: 110px;
         margin: 0;
         padding: 0;
         transition-duration:1s;
      }

      #blocRondsCentre a:hover img{
         opacity:0.1;
         transition-duration:1s;
      }
      #blocRondsCentre a:hover p{
         opacity:1;
         transition-duration:1s;

      }

   </style>
   
</head>
<body>
  <div id="titrePA">
    Bienvenue sur Nom du Forum
  </div>
  <div id="PA" class="d-flex">
   <div>
      <div class="blocTitre">
         Contexte
      </div>
      <div class="blocTexteG">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel arcu porta, suscipit tortor id, mollis enim. Sed non enim at lacus semper maximus vel nec ipsum. Donec nunc neque, facilisis et congue sed, sagittis et ipsum. Nullam tincidunt massa velit, ut mattis erat malesuada non. Etiam vitae enim ex. Nam lectus erat, ullamcorper vitae ante ut, posuere ultricies magna. Nunc eget lacinia massa, nec porta ipsum. Duis elementum lorem id est varius, id congue magna condimentum.
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel arcu porta, suscipit tortor id, mollis enim. Sed non enim at lacus semper maximus vel nec ipsum. Donec nunc neque, facilisis et congue sed, sagittis et ipsum. Nullam tincidunt massa velit, ut mattis erat malesuada non. Etiam vitae enim ex. Nam lectus erat, ullamcorper vitae ante ut, posuere ultricies magna. Nunc eget lacinia massa, nec porta ipsum. Duis elementum lorem id est varius, id congue magna condimentum.
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel arcu porta, suscipit tortor id, mollis enim. Sed non enim at lacus semper maximus vel nec ipsum. Donec nunc neque, facilisis et congue sed, sagittis et ipsum. Nullam tincidunt massa velit, ut mattis erat malesuada non. Etiam vitae enim ex. Nam lectus erat, ullamcorper vitae ante ut, posuere ultricies magna. Nunc eget lacinia massa, nec porta ipsum. Duis elementum lorem id est varius, id congue magna condimentum.
      </div>
      <div class="blocTitre">
         Panneau d'affichage
      </div>
      <div class="blocTexteG">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel arcu porta, suscipit tortor id, mollis enim. Sed non enim at lacus semper maximus vel nec ipsum. Donec nunc neque, facilisis et congue sed, sagittis et ipsum. Nullam tincidunt massa velit, ut mattis erat malesuada non. Etiam vitae enim ex. Nam lectus erat, ullamcorper vitae ante ut, posuere ultricies magna. Nunc eget lacinia massa, nec porta ipsum. Duis elementum lorem id est varius, id congue magna condimentum.
      </div>
   </div>
   <div id="blocRondsCentre" class="d-flex">
      <a class="Gauche" href="#">
         <img src="https://2img.net/u/4014/30/77/56/avatars/1-93.png" alt="image" />
         <p>Nom du lien</p>
      </a>
      <a class="Droite" href="#">
         <img src="https://2img.net/u/4014/30/77/56/avatars/1-93.png" alt="image" />
         <p>Nom du lien</p>
      </a>
      <a class="Gauche" href="#">
         <img src="https://2img.net/u/4014/30/77/56/avatars/1-93.png" alt="image" />
         <p>Nom du lien</p>   
      </a>
      <a class="Droite" href="#">
         <img src="https://2img.net/u/4014/30/77/56/avatars/1-93.png" alt="image" />
         <p>Nom du lien</p>
      </a>
      <a class="Gauche" href="#">
         <img src="https://2img.net/u/4014/30/77/56/avatars/1-93.png" alt="image" />
         <p>Nom du lien</p>
      </a>
      <a class="Droite" href="#">
         <img src="https://2img.net/u/4014/30/77/56/avatars/1-93.png" alt="image" />
         <p>Nom du lien</p>
      </a> 
   </div>
   <div>
      <div class="blocTitre">
         Staff
      </div>
      <div class="blocRonds">
         <a href="#">
            <img src="https://2img.net/u/4014/30/77/56/avatars/1-93.png" alt="image" />
         </a>
         <a href="#">
            <img src="https://2img.net/u/4014/30/77/56/avatars/1-93.png" alt="image" />
         </a>
         <a href="#">
            <img src="https://2img.net/u/4014/30/77/56/avatars/1-93.png" alt="image" />
         </a>
         <a href="#">
            <img src="https://2img.net/u/4014/30/77/56/avatars/1-93.png" alt="image" />
         </a>
      </div>
      <div class="blocTitre">
         Prédéfinis
      </div>
      <div class="blocRonds">
         <a href="#">
            <img src="https://2img.net/u/4014/30/77/56/avatars/1-93.png" alt="image" />
         </a>
         <a href="#">
            <img src="https://2img.net/u/4014/30/77/56/avatars/1-93.png" alt="image" />
         </a>
         <a href="#">
            <img src="https://2img.net/u/4014/30/77/56/avatars/1-93.png" alt="image" />
         </a>
         <a href="#">
            <img src="https://2img.net/u/4014/30/77/56/avatars/1-93.png" alt="image" />
         </a>
      </div>
      <div class="blocTitre">
         Top Site
      </div>
      <div class="blocRonds">
         <a href="#">
            <img src="https://2img.net/u/4014/30/77/56/avatars/1-93.png" alt="image" />
         </a>
         <a href="#">
            <img src="https://2img.net/u/4014/30/77/56/avatars/1-93.png" alt="image" />
         </a>
         <a href="#">
            <img src="https://2img.net/u/4014/30/77/56/avatars/1-93.png" alt="image" />
         </a>
         <a href="#">
            <img src="https://2img.net/u/4014/30/77/56/avatars/1-93.png" alt="image" />
         </a>
      </div>
      <div class="blocTitre">
         Crédits
      </div>
      <div class="blocTexteD">
                  Crédits du forums
                  <br />
                  PA codée par <a href="https://tambouille-raleuses.forumactif.com/">Mäven</a>
      </div>
   </div>
</div>
<div class="blocTitre">
   Partenaires
</div>
<div id="partenaires" class="d-flex">
   <a href="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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>
</div>
</body>

</html>
On enregistre et on récupère le lien de la page (chez moi http://bidouilles-maven.forumactif.com/h1-en-tete-8-blocs ).

Etape 2 : on met en place la PA

Eh oui, il faut bien mettre en place tout ça ! Pour cela on va utiliser une iframe, mais si tu ne veux pas d'iframe tu peux te servir du tutoriel de Miettes pour éviter les iframes en l'adaptant un peu.

Pour mettre en place notre iframe :
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:
<!-- BEGIN message_admin_index -->

<!-- BEGIN message_admin_titre -->

<!-- END message_admin_titre -->
<!-- BEGIN message_admin_txt -->

<div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>

<!-- END message_admin_txt -->
<!-- END message_admin_index -->

On enregistre, et on publie.
Ensuite on va dans PA > Affichage > Généralité et on y ajoute notre iframe :
Code:
<div align="center">
   <iframe align="middle" name="En-tête" src="http://bidouilles-maven.forumactif.com/h1-en-tete-8-blocs" scrolling="no" style="border:0; height: 600px; margin:auto; width: 100%;"> </iframe>
</div>
Exclamation N'oublies pas de mettre ton lien de PA à toi



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



_________________
Revenir en haut
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum



Post-It des Râleuses