1 résultat trouvé pour XX

[Aide Codage] Adapter un tuto pour une en-tête dynamique

Pour la CSS, j'ai comparé et c'était ok ^^

On va donc passer au JS (et je pense qu'ici, y a des couacs). Voici celui de la commande :

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
    );
});


On a plusieurs choses à remplacer ici :

1. le lien de la page html de l'en-tête :

Code:

/h37-pa

Le tien : /h2-code-de-l-en-tete

2. le lien du message contenant le contenu de ton en-tête

Code:

/t22-champs-champ-1-contexte

le tien : /t3-champs-champ-1-contexte

3. Les id des différents messages, c'est à dire tous les #XX dans la function

Voici le JS que tu dois installer

Code:


$(document).ready(function(){
  $('#wrapper-entete').load('/h2-code-de-l-en-tete');
  var cheminMsg = ".postbody .content > div",
      lienMsg = "/t3-champs-champ-1-contexte";
    setTimeout(
      function(){
        $('#blk-entete [data-info="msg-haut"]').load(''+ lienMsg +' #p3 '+ cheminMsg +'');
        $('#blk-entete [data-info="boutons1"]').load(''+ lienMsg +' #p4 '+ cheminMsg +'');
        $('#blk-entete [data-info="msg-milieu"]').load(''+ lienMsg +' #p5 '+ cheminMsg +'');
        $('#blk-entete [data-info="msg-gauche"]').load(''+ lienMsg +' #p6 '+ cheminMsg +'');
        $('#blk-entete [data-info="boutons2"]').load(''+ lienMsg +' #p7 '+ cheminMsg +'');
        $('#blk-entete [data-info="msg-bas-milieu"]').load(''+ lienMsg +' #p8 '+ cheminMsg +'');
      },
      100
    );
});


---

Ensuite, la dernière étape consiste à mettre en place la div qui va recevoir notre en-tête. Pour commencer, tu vas aller dans Panneau d'administration > Affichage > Page d'accueil > Généralité et bien te mettre en mode édition

Et tu vas tout supprimer.

Ensuite, on va juste y mettre le code d'accueil de notre en-tête, à savoir :

Code:

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