[Commande Codage] Codage "panneau d'affichage" à insérer dans le message d'accueil

Oui c'est bon je viens de le faire pardon xD (moi distraite ? Nooooon...)

Du coup on peut passer à la suite !

Encore merci ^^

Nickel

Du coup, on passe à la suite.


On va maintenant aller mettre la CSS de l'en-tête dans la CSS de ton forum. Pour ça, on va aller dans :
Panneau d'administration > Affichage > Images & couleurs > Couleurs > Feuille de style.

Voici le code à copier/coller :

Code:

/*** --- PA --- ***/

.panel.introduction{
   background-color: transparent;
    border-radius: 0;
    box-shadow: inherit;
    padding: 0;
}

#wrapper-entete #blk-entete{
   background: #0A0A0A url('https://i.servimg.com/u/f25/18/99/59/08/3a7e6110.jpg') repeat center center;
   margin: 20px auto;
   padding: 10px 0;
}

#wrapper-entete #blk-entete .d-flex,
#wrapper-entete #blk-entete .btn-nav > div{
   align-items: flex-start;
   display: flex;
   flex-direction: row;
   justify-content: space-around;
}

/* Scrollbar (uniquement pour chrome) */
::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: #969393;
}
 
::-webkit-scrollbar-thumb {
  background: #3c3737;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Liens */
#wrapper-entete #blk-entete a{
   color: #ececec;
   text-decoration: none;
}

#wrapper-entete #blk-entete a:hover{
   text-decoration: underline;
}

/* Bloc de texte */
#wrapper-entete #blk-entete .blk-txt{
   background: rgba(10, 10, 10, 0.6);
   border-radius: 20px;
   box-shadow: 3px 3px 3px #000;
   color: #969393;
   margin: 10px auto;
   overflow: hidden;
   padding: 10px;
   width: 90%;
}

#wrapper-entete #blk-entete .blk-txt[data-info="msg-haut"]{
   margin-bottom: 30px;
}

#wrapper-entete #blk-entete .blk-txt#blk-small{
   width: 50%;
}

#wrapper-entete #blk-entete .blk-txt > div{
   height: 80px;
   overflow: auto;
    padding-right: 10px;
}

/*** Blocs bouton ***/
#wrapper-entete #blk-entete .btn-nav > div{
   justify-content: center;
   margin: auto;
   width: 100%;
}

/* Bloc du haut */
#wrapper-entete #blk-entete > .btn-nav{
   margin: auto;
   width:  90%;
}

#wrapper-entete #blk-entete > .btn-nav > div{
   margin: 0 200px 0 25%;
}

#wrapper-entete #blk-entete .btn-nav a{
   margin-left: 5px;
}

#wrapper-entete #blk-entete .btn-nav > div > a:first-child{
   margin-left: 0;
}


#wrapper-entete #blk-entete .btn-nav br{
   display: none;
}


/*** Ligne du bas ***/
#wrapper-entete #blk-entete #blk-bas{
   margin: auto;
   width: 90%;
}

#wrapper-entete #blk-entete .d-flex .blk-txt > div{
   height: 130px;
}

#wrapper-entete #blk-entete .d-flex .blk-txt{
   flex: 0 0 25%;
}

#wrapper-entete #blk-entete .d-flex #blk-middle{
   flex: 0 0 50%;
   padding-top: 10px;
}

/* Bloc de mise en avant */
#wrapper-entete #blk-entete .d-flex #mea{
   color: #969393;
   height: 120px;
   overflow: hidden;
   margin: 10px auto 0;
   width: 70%;
}

/* Dernier message */
#wrapper-entete #blk-entete .d-flex #dernier-msg{
   flex: 0 0 200px;
}


On va ensuite créer une nouvelle page HTML qui contiendra tout le code de l'en-tête. Pour ça, on va dans :
Panneau d'administration > Modules > HTML & Javascript > Gestion des pages HTML > Création en mode avancé (HTML).

Et là, on va copier coller ce code (on laisse cocher "non" pour les 2 questions )

Code:

<div id="blk-entete">
   <div class="blk-txt" data-info="msg-haut"></div>
   <div class="btn-nav d-flex" data-info="boutons1"></div>
   <div class="blk-txt" id="blk-small" data-info="msg-milieu"></div>
   <div class="d-flex" id="blk-bas">
      <div class="blk-txt" data-info="msg-gauche"></div>
      <div id="blk-middle">
         <div class="btn-nav d-flex" data-info="boutons2"></div>
         <div id="mea" data-info="msg-bas-milieu"></div>
      </div>
      <div id="dernier-msg" class="blk-txt">
         <iframe name="Sujets récents" src="http://sandragon.forumactif.fr/h1-sujets-recents" height="130px" width="100%" align="center" marginheight="0" frameborder="0" scrolling="no"></iframe>
      </div>
   </div>
</div>

On va ensuite ajouter un petit bout de javascript qui va afficher la page html là oùil faut. Pour ça, on va dans :
Panneau d'administration > Modules > HTML & Javascript > Gestion des codes Javascript.

On crée un nouveau javascript qu'on ne va afficher que sur l'index, et on y colle ceci :

Code:

$(document).ready(function(){
   $('#wrapper-entete').load('/h37-pa');
   var cheminMsg = ".postbody .content > div",
      lienMsg = "/t22-champs-champ-1-contexte";
     setTimeout(
       function(){
         $('#blk-entete [data-info="msg-haut"]').load(''+ lienMsg +' #p30 '+ cheminMsg +'');
         $('#blk-entete [data-info="boutons1"]').load(''+ lienMsg +' #p31 '+ cheminMsg +'');
         $('#blk-entete [data-info="msg-milieu"]').load(''+ lienMsg +' #p32 '+ cheminMsg +'');
         $('#blk-entete [data-info="msg-gauche"]').load(''+ lienMsg +' #p33 '+ cheminMsg +'');
         $('#blk-entete [data-info="boutons2"]').load(''+ lienMsg +' #p34 '+ cheminMsg +'');
         $('#blk-entete [data-info="msg-bas-milieu"]').load(''+ lienMsg +' #p35 '+ cheminMsg +'');
       },
       100
     );
});

Ici, il faut remplacer ça :

Code:

/h37-pa

par l'url de la page HTML contenant ta PA.

J'ai déjà modifié tout le reste (si jamais tu veux des explications dessus, n'hésite pas )


Et pour finir, il ne nous reste plus qu'à appeler la div qui va recevoir l'en-tête. pour ça, on va aller dans :
Panneau d'administration > Affichage > Page d'accueil > Généralité.

et on va mettre ceci dans la zone de saisi de texte :

Code:

<div id="wrapper-entete"></div>

---

Je te laisse faire tout ça ? Je suis dans le coin si besoin ^^

Voilà j'ai tout fini, mais je ne suis pas convaincue du résultat sur mon forum, tu me diras si c'est normal ou pas, je crois que non ^^"
En fait, j'ai l'impression que le DIV dans le message d'accueil ne reste pas... Et en plus le widget s'affiche sur toutes les pages alors que j'ai coché juste l'index xD

Zioup là

On a réglé les points bloquant sur le salon #aide du discord ^^

Je te laisse me dire si tout est bon

Tout est bon un grand merci !

On peut classer du coup ?

Oui on peut classer ^^

Nickel

Je classe du coup et je vois pour déposer ça en LS vu que tu étais d'accord ^^