Page 1 sur 2 • 1, 2 
Sal'- Informations : Mon forum est sous modernbb.
Messages : 117 
![[Aide Codage] Adapter un tuto pour une en-tête dynamique Empty](https://2img.net/i/empty.gif)
[Aide Codage] Adapter un tuto pour une en-tête dynamique
Mer 2 Aoû 2023 - 11:10
Coucou c'est encore moi 
(promis après je ne vous embête plus pour un moment) 
Raison de la demande (correction de bug, demande d'avis sur un code, autre chose ?) :
Je n'arrive plus à refaire l'en-tête sur mon nouveau forum (celles qui m'a été faite en tuto ICI)
Solutions déjà essayées :
J'ai tout essayé de refaire à la lettre, mais je n'arrive rien à afficher d'autres que le widget, et encore, il est tout éclaté sur une seule ligne horizontale lorsqu’il ne défile pas...
et je ne souhaitais pas le faire défiler ^^’
bon, je vais essayer de lister tout ce que j'ai refait voir ce que j'ai pu oublier.
- J'ai fait le topic des divers éléments de mon en-tête mis en invisible pour les autres.
- J'ai activé le portail que j'ai mis en invisible, en redirigeant l'url vers le forum.
- J'ai ajouté le widget 'sujet récent' dans une page au portail que j'ai appelé "derniers sujets".
- J'ai copier coller le code donné dans le template du portail (mod_recent_topics).
- J'ai fait les deux pages HTML + la JS. (pour cette dernière, j'ai remplacé le passage demandé par le lien de mon en tête)
- Dans la première page HTML, celle qui récupère le widget, j'ai bien changé "/portal?pid=3" par l'adresse de la page "derniers sujets". Où il y a le widget du portail.
- J'ai repris le CSS donné (peut-être y-a-il eu une interaction quelque part ?J’ai l’impression que la page de CSS ne fonctionne pas pour l’en-tête, un souci avec l’ID de Wrap-entete et/ou blk entete, non ? .) oui, promis, je vais aller lire le sujet recommandé tout à l’heure sur les ID xD
- dans "affichage=> message d’accueil' j'ai mis le lien de la page HTML de l’entête qui linke vers le widget (Sujets Récents)
But à atteindre :
Réussir à afficher l'en-tête exactement comme elle s'affichait sur mon autre forum.
Codes :
Bon, j’avoue que ça part un peu dans tous les sens et que je doute de la pertinence de certains codes à force de bidouiller et d’essayer de concilier les codes ici et là… :/
J'espère avoir mis toutes les infos necessairs et que mes codes soient lisibles
Merci d'avance et bonne journée, je file lire le topic sur les ID qui je pense me sera fort utile !
(promis après je ne vous embête plus pour un moment) Raison de la demande (correction de bug, demande d'avis sur un code, autre chose ?) :
Je n'arrive plus à refaire l'en-tête sur mon nouveau forum (celles qui m'a été faite en tuto ICI)
Solutions déjà essayées :
J'ai tout essayé de refaire à la lettre, mais je n'arrive rien à afficher d'autres que le widget, et encore, il est tout éclaté sur une seule ligne horizontale lorsqu’il ne défile pas...
et je ne souhaitais pas le faire défiler ^^’bon, je vais essayer de lister tout ce que j'ai refait voir ce que j'ai pu oublier.
- J'ai fait le topic des divers éléments de mon en-tête mis en invisible pour les autres.
- J'ai activé le portail que j'ai mis en invisible, en redirigeant l'url vers le forum.
- J'ai ajouté le widget 'sujet récent' dans une page au portail que j'ai appelé "derniers sujets".
- J'ai copier coller le code donné dans le template du portail (mod_recent_topics).
- J'ai fait les deux pages HTML + la JS. (pour cette dernière, j'ai remplacé le passage demandé par le lien de mon en tête)
- Dans la première page HTML, celle qui récupère le widget, j'ai bien changé "/portal?pid=3" par l'adresse de la page "derniers sujets". Où il y a le widget du portail.
- J'ai repris le CSS donné (peut-être y-a-il eu une interaction quelque part ?J’ai l’impression que la page de CSS ne fonctionne pas pour l’en-tête, un souci avec l’ID de Wrap-entete et/ou blk entete, non ? .) oui, promis, je vais aller lire le sujet recommandé tout à l’heure sur les ID xD
- dans "affichage=> message d’accueil' j'ai mis le lien de la page HTML de l’entête qui linke vers le widget (Sujets Récents)
But à atteindre :
Réussir à afficher l'en-tête exactement comme elle s'affichait sur mon autre forum.
Codes :
Bon, j’avoue que ça part un peu dans tous les sens et que je doute de la pertinence de certains codes à force de bidouiller et d’essayer de concilier les codes ici et là… :/
- CCS:
- Code:
/*-------------------------- NavBar -------------------------------*/
/*positionnement Navbar*/
ul.navbar.navlinks {
position: fixed;
top: -25;
left: 0;
right: 0;
}
/* Bande grise au-dessus de la bannière */
div.bande-grise {
height: 12px;
width: 100%;
background: #141414;
}
#logo {
margin-top: 60px;
}
/*--------------------------Background header -------------------------------*/
div.headerbar {
background-image: url(https://i.servimg.com/u/f98/20/51/32/53/ban11.jpg);
margin: 0;
overflow: hidden;
padding: 0;
position: relative;
background-position: center center;
background-repeat: no-repeat;
background-size:cover;
width:100%;
height:520px;
}
/*--------------------------Suppression liens en haut et en bas (cookies, posteurs, etc) puis des icones de catégories-------------------------------*/
.linklist.bottom{
display:none;
}
ul.linklist.top {
display: none;
}
/*taille et forme avatar profil*/
.mod-login-avatar img {
border-radius: 0;
border: 0px;
height: 400px !important;
width: 200px !important;
/*taille et forme avatar messages*/
. postprofile {
box-sizing: content-box;
width: 200px!important;
height: 400px!important;
}
.postprofile-avatar img {
position: static;
margin-left:-15px;
padding-top: 0;
padding-right:0;
border: 0 solid #FFF;
border-radius: 0;
Margin-top: 20px;
height: 400px !important;
width: 200px !important;
}
}
}
#message-box {
width: 78%;
right:50%
}
.categorie{
background:#0A0A0A;
margin-bottom: 24px;
padding: 0 0 18px;
}
.zone-description img.fond-description {
width: 100%;
}
.zone-description{
height:170px;
position:relative;
overflow:hidden;
}
.forum {
margin: auto;
padding: 18px 0;
width: 90%;
position: relative;
a.forumtitle {
margin: 2px 0;
}
.dernier-message,
.nb-message{
position:absolute;
right:20px;
text-align:center;
width: 20%;
}
.dernier-message{
top:5px;
}
.nb-message{
bottom:5px;
}
/*CATEGORIES*/
.forum span.icone {
position: absolute;
left: -50px;
top: 40%;
}
/*** --- 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;
}
- mod_recent_topics:
- Code:
<div class="module sujets-recents">
<div class="h3"><i class="ion-chatbubble-working"></i>{L_RECENT_TOPICS}</div>
<!-- BEGIN scrolling_row -->
{MARQUEE_JS_SRC}
<div id="comments_scroll_div">
<div class="marquee" data-direction='{SCROLL_WAY}' data-duration='{SCROLL_DELAY}' data-pauseOnHover="true" style="overflow:hidden;height:{SCROLL_HEIGHT}px;">
<!-- BEGIN recent_topic_row -->
<div class="mod-recent-row">
<a href="{scrolling_row.recent_topic_row.U_TITLE}" title="{scrolling_row.recent_topic_row.L_TITLE}" class="mod-recent-title">{scrolling_row.recent_topic_row.L_TOPIC_TITLE}</a>
<span class="mod-recent-info">
<span class="mod-recent-time">
<i class="ion-clock"></i>{scrolling_row.recent_topic_row.S_POSTTIME}
</span>
<span class="mod-recent-author">
<i class="ion-ios-person"></i>
<!-- BEGIN switch_poster -->
<a href="{scrolling_row.recent_topic_row.switch_poster.U_POSTER}">{scrolling_row.recent_topic_row.switch_poster.S_POSTER}</a>
<!-- END switch_poster -->
<!-- BEGIN switch_poster_guest -->
{scrolling_row.recent_topic_row.switch_poster_guest.S_POSTER}
<!-- END switch_poster_guest -->
</span>
</span>
</div>
<!-- END recent_topic_row -->
</div>
</div>
<script>
$(".marquee").marquee();
</script>
<!-- END scrolling_row -->
<!-- BEGIN classical_row -->
<div class="mod-recent-row">
<!-- BEGIN recent_topic_row -->
<a href="{classical_row.recent_topic_row.U_TITLE}" class="mod-recent-title">{classical_row.recent_topic_row.L_TITLE}</a>
<span class="mod-recent-info">
<span class="mod-recent-time">
<i class="ion-clock"></i>{classical_row.recent_topic_row.S_POSTTIME}
</span>
<span class="mod-recent-author">
<i class="ion-ios-person"></i>
<!-- BEGIN switch_poster -->
<a href="{classical_row.recent_topic_row.switch_poster.U_POSTER}">{classical_row.recent_topic_row.switch_poster.S_POSTER}</a>
<!-- END switch_poster -->
<!-- BEGIN switch_poster_guest -->
{classical_row.recent_topic_row.switch_poster_guest.S_POSTER}
<!-- END switch_poster_guest -->
</span>
</span>
<!--
<a href="{classical_row.recent_topic_row.U_POSTER}">{classical_row.recent_topic_row.S_POSTER}</a> {ON} {classical_row.recent_topic_row.S_POSTTIME}<br /><br />
-->
<!-- END recent_topic_row -->
</div>
<!-- END classical_row -->
</div>
- Message d'Accueil:
- [code]
[code]
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-145047087-1');
[/code]
- Page HTML1 " :
[code]
Sujets Récents
; (function () {
$('#bloc-sujets-recents').load('https://bleu-de-sang.forumactif.com/portal?pid=2 .sujets-recents');
// Met en place défilement
var gestionMarquee = setInterval(function () {
if ($('.marquee').length) {
$('#comments_scroll_div').addClass('do-marquee');
stopGestionMarquee();
}
}, 100);
function stopGestionMarquee() {
clearInterval(gestionMarquee);
};
})();
var app = angular.module("angularApp", []);
app.controller("appController", function($scope, $sce, $timeout){
var recupInfo = setInterval(function () {
if (angular.element('.do-marquee').length) {
$timeout(function(){
var heightBloc = angular.element('.marquee').attr('style');
heightBloc = heightBloc.split(';');
heightBloc = heightBloc[1].split(':');
$scope.height = heightBloc[1];
$scope.duree = angular.element('.marquee').attr("data-duration");
$scope.heightMarquee = angular.element('.marquee').height();
},10);
stopRecupInfo();
}
}, 110);
function stopRecupInfo() {
clearInterval(recupInfo);
};
});
[/code]
- Page HTML2 :
[code][/code]
- Page JS:
[code]$(document).ready(function(){
$('#wrapper-entete').load('https://bleu-de-sang.forumactif.com/h2-code-de-l-en-tete');
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 +'');
},
1200
);
});[/code]
J'espère avoir mis toutes les infos necessairs et que mes codes soient lisibles
Merci d'avance et bonne journée, je file lire le topic sur les ID qui je pense me sera fort utile !
MiettesRâleuse (Admin)- Informations :
► Présente en semaine (09h00 - 18h00)
----
Viens papoter avec nous sur le discord
Pseudo Discord : Miettes
Messages : 2203
Re: [Aide Codage] Adapter un tuto pour une en-tête dynamique
Mer 2 Aoû 2023 - 11:41
Coucou 
Est-ce que tu peux nous fournir le lien du forum aussi ? C'est plus simple pour voir le problème qu'il peut y avoir (si tu veux laisser en maintenance, n'hésite pas à nous envoyer à Mäven et moi des accès en MP ^^ )
Est-ce que tu peux nous fournir le lien du forum aussi ?
C'est plus simple pour voir le problème qu'il peut y avoir (si tu veux laisser en maintenance, n'hésite pas à nous envoyer à Mäven et moi des accès en MP ^^ )- Sal'
- Informations : Mon forum est sous modernbb.
Messages : 117
Re: [Aide Codage] Adapter un tuto pour une en-tête dynamique
Mer 2 Aoû 2023 - 11:49
Coucou Miettes!
Alors mille excuses, j'avais mis le lien dans mon profil, mais du coup je le remets là voilà ^^ MonSuperForum
Par contre je ne savais pas qu'on pouvait donner des accès pendant le mode maintenance, c'est intéressant. J'avais bêtement retiré le mode, mais ça serait plus pratique de faire comme ça en effet, je veux bien que tu me dises comment faire ?
Merciiii
Alors mille excuses, j'avais mis le lien dans mon profil, mais du coup je le remets là voilà ^^ MonSuperForum
Par contre je ne savais pas qu'on pouvait donner des accès pendant le mode maintenance, c'est intéressant. J'avais bêtement retiré le mode, mais ça serait plus pratique de faire comme ça en effet, je veux bien que tu me dises comment faire ?
Merciiii
- MiettesRâleuse (Admin)
- Informations :
► Présente en semaine (09h00 - 18h00)
----
Viens papoter avec nous sur le discord
Pseudo Discord : Miettes
Messages : 2203
Re: [Aide Codage] Adapter un tuto pour une en-tête dynamique
Mer 2 Aoû 2023 - 12:11
Il faut donner des accès admin Mais on peut laisser comme ça, ça ira
Donc, si on reprend la commande
• La zone qui contient les messages => OK
• Le widget "dernier sujet" => On va revoir cette partie
• La CSS => On va la revoir aussi
• La page HTML de l'en-tête => On va la revoir aussi
• Un petit bout de js => On va la revoir aussi
• La mise en place de l'en-tête => y a plein de trucs qui ne me plait pas dans ce que tu nous as copié/collé ; on va vérifier ça :d
On commence donc par le widget Je ne sais plus sous quelle version était ton forum. Du coup, si tu as copié/collé le template tel quel, il se peut que ça foire
> Le Template mod_recent_topics a l'air ok
> La page HTML : ici on va la recopier parce que j'ai l'impression que la tienne merdouille :d
Attention à bien éditer la page en mode avancé en cliquant sur ce picto ![[Aide Codage] Adapter un tuto pour une en-tête dynamique Editio10](https://i.servimg.com/u/f71/20/05/19/39/editio10.png)
On fait déjà ça ? (tu pourras m'envoyer le lien de la page html ?)
Mais on peut laisser comme ça, ça ira Donc, si on reprend la commande
• La zone qui contient les messages => OK
• Le widget "dernier sujet" => On va revoir cette partie
• La CSS => On va la revoir aussi
• La page HTML de l'en-tête => On va la revoir aussi
• Un petit bout de js => On va la revoir aussi
• La mise en place de l'en-tête => y a plein de trucs qui ne me plait pas dans ce que tu nous as copié/collé ; on va vérifier ça :d
On commence donc par le widget
Je ne sais plus sous quelle version était ton forum. Du coup, si tu as copié/collé le template tel quel, il se peut que ça foire > Le Template mod_recent_topics a l'air ok
> La page HTML : ici on va la recopier parce que j'ai l'impression que la tienne merdouille :d
Attention à bien éditer la page en mode avancé en cliquant sur ce picto ![[Aide Codage] Adapter un tuto pour une en-tête dynamique Editio10](https://servimg.com/r/7120051939/editio10.png)
- Code:
<!DOCTYPE html>
<html ng-app="angularApp" ng-controller="appController as app" ng-cloak>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Sujets Récents</title>
<style>
/*** Le bloc qui contient le widget ***/
#bloc-sujets-recents{
background: transparent; /* Couleur de fond */
color: #969393;
width: 100%; /* Largeur */
}
/*** Le widget ***/
.sujets-recents{
background: transparent; /* Couleur de fond */
}
/*** Titre ***/
.h3{
display: none;
}
/*** Sujet ***/
.mod-recent-row{
font-size: 14px;
margin-bottom: 4px;
}
.mod-recent-row::before{
content: "\2022";
padding-right: 5px;
}
.mod-recent-row a{
color: #ececec;
text-decoration: none;
}
.mod-recent-row a:hover{
text-decoration: underline;
}
.mod-recent-author{
margin-left: 4px;
}
.mod-recent-info::before{
content: ":";
padding: 0 4px;
}
.do-marquee {
height: {{height}};
width: 100%;
overflow: hidden;
position: relative;
}
.do-marquee .marquee {
display: block;
width: 100%;
position: absolute;
animation: marquee {{duree}}ms linear infinite;
height: auto !important;
top: {{height}};
}
.do-marquee .marquee:hover{
animation-play-state:paused;
cursor: pointer;
}
@keyframes marquee {
0% { top: {{height}}; }
100% { top: -{{heightMarquee}}px; }
}
</style>
</head>
<body>
<div id="bloc-sujets-recents"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js" language="Javascript" type="text/javascript"></script>
<script>
; (function () {
$('#bloc-sujets-recents').load('/portal?pid=2 .sujets-recents');
// Met en place défilement
var gestionMarquee = setInterval(function () {
if ($('.marquee').length) {
$('#comments_scroll_div').addClass('do-marquee');
stopGestionMarquee();
}
}, 100);
function stopGestionMarquee() {
clearInterval(gestionMarquee);
};
})();
var app = angular.module("angularApp", []);
app.controller("appController", function($scope, $sce, $timeout){
var recupInfo = setInterval(function () {
if (angular.element('.do-marquee').length) {
$timeout(function(){
var heightBloc = angular.element('.marquee').attr('style');
heightBloc = heightBloc.split(';');
heightBloc = heightBloc[1].split(':');
$scope.height = heightBloc[1];
$scope.duree = angular.element('.marquee').attr("data-duration");
$scope.heightMarquee = angular.element('.marquee').height();
},10);
stopRecupInfo();
}
}, 110);
function stopRecupInfo() {
clearInterval(recupInfo);
};
});
</script>
</body>
</html>
On fait déjà ça ? (tu pourras m'envoyer le lien de la page html ?)
- Sal'
- Informations : Mon forum est sous modernbb.
Messages : 117
Re: [Aide Codage] Adapter un tuto pour une en-tête dynamique
Mer 2 Aoû 2023 - 12:38
Alors j'ai un peu bidouillé dans les codes qui étaient à la base pour l'autre forum c'est sans doute pour ça que ça ne colle plus trop, sans compter que j'ai dû mal adapter. Du coup merci pour l'aide, c'est parti !
Il était également sous ModernBB.
Voilà, j'ai modifié la page HTML "Sujet-Recent" avec ton nouveau code, en mode avancé.
Son lien : Sujets récents
Le forum n'a pas explosé, j'ai pas l'air d'avoir fait une fausse manip, on peut continuer
On commence donc par le widget
Il était également sous ModernBB.
Voilà, j'ai modifié la page HTML "Sujet-Recent" avec ton nouveau code, en mode avancé.
Son lien : Sujets récents
Le forum n'a pas explosé, j'ai pas l'air d'avoir fait une fausse manip, on peut continuer
- MiettesRâleuse (Admin)
- Informations :
► Présente en semaine (09h00 - 18h00)
----
Viens papoter avec nous sur le discord
Pseudo Discord : Miettes
Messages : 2203
Re: [Aide Codage] Adapter un tuto pour une en-tête dynamique
Mer 2 Aoû 2023 - 13:53
Parfait
L'étape suivante c'est la CSS ^^ Logiquement, tout devrait être ok ici, du coup, on n'y touche pas ^^
Ensuite, on passe à la page HTML de l'en-tête. Comme je n'arrive pas à voir que tu as fait, je te propose de remettre exactement ce qu'on avait dans la commande ^^
N'oublie pas de te mettre en mode avancée et de bien cocher "non" aux 2 choix.
L'étape suivante c'est la CSS ^^ Logiquement, tout devrait être ok ici, du coup, on n'y touche pas ^^
Ensuite, on passe à la page HTML de l'en-tête. Comme je n'arrive pas à voir que tu as fait, je te propose de remettre exactement ce qu'on avait dans la commande ^^
- 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="https://bleu-de-sang.forumactif.com/h1-sujets-recents" height="130px" width="100%" align="center" marginheight="0" frameborder="0" scrolling="no"></iframe>
</div>
</div>
</div>
N'oublie pas de te mettre en mode avancée et de bien cocher "non" aux 2 choix.- Sal'
- Informations : Mon forum est sous modernbb.
Messages : 117
Re: [Aide Codage] Adapter un tuto pour une en-tête dynamique
Mer 2 Aoû 2023 - 14:03
Ok, donc on ne touche pas au CSS finalement ? Me semblait que tu as dit tout à l'heure qu'il fallait le revoir aussi ?
Alors pour la page HTML de l'en-tête je me suis foirée en mettant le code sur le forum là, mais c'est exactement ça que j'avais, j'avais repris le code dans le tuto, du coup on peut passer à la suite ^^
Alors pour la page HTML de l'en-tête je me suis foirée en mettant le code sur le forum là, mais c'est exactement ça que j'avais, j'avais repris le code dans le tuto, du coup on peut passer à la suite ^^
- MiettesRâleuse (Admin)
- Informations :
► Présente en semaine (09h00 - 18h00)
----
Viens papoter avec nous sur le discord
Pseudo Discord : Miettes
Messages : 2203
Re: [Aide Codage] Adapter un tuto pour une en-tête dynamique
Mer 2 Aoû 2023 - 14:16
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 :
On a plusieurs choses à remplacer ici :
1. le lien de la page html de l'en-tête :
Le tien : /h2-code-de-l-en-tete
2. le lien du message contenant le contenu de ton en-tête
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
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
![[Aide Codage] Adapter un tuto pour une en-tête dynamique Captur20](https://i.servimg.com/u/f71/20/05/19/39/captur20.png)
Et tu vas tout supprimer.
Ensuite, on va juste y mettre le code d'accueil de notre en-tête, à savoir :
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-tete2. le lien du message contenant le contenu de ton en-tête
- Code:
/t22-champs-champ-1-contexte
le tien : /t3-champs-champ-1-contexte3. 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
![[Aide Codage] Adapter un tuto pour une en-tête dynamique Captur20](https://servimg.com/r/7120051939/captur20.png)
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>
- Sal'
- Informations : Mon forum est sous modernbb.
Messages : 117
Re: [Aide Codage] Adapter un tuto pour une en-tête dynamique
Mer 2 Aoû 2023 - 14:44
Alors j'ai remplacé le code JS c'est fait, j'ai supprimé le code en mode édition dans le message d'accueil et mis ça en mode édition toujours
Après avoir patiné dans la semoule quelques minutes à cause du mode édition qui me paraissait un peu nébuleux, c'est bon il me semble, on peut passer à la suite
- Code:
<div id="wrapper-entete"></div>
Après avoir patiné dans la semoule quelques minutes à cause du mode édition qui me paraissait un peu nébuleux, c'est bon il me semble, on peut passer à la suite
- MiettesRâleuse (Admin)
- Informations :
► Présente en semaine (09h00 - 18h00)
----
Viens papoter avec nous sur le discord
Pseudo Discord : Miettes
Messages : 2203
Re: [Aide Codage] Adapter un tuto pour une en-tête dynamique
Mer 2 Aoû 2023 - 14:50
Eh bien normalement, c'est terminé Mais ça ne fonctionne pas
Tu as bien activé le javascript sur l'index ?
Mais ça ne fonctionne pas Tu as bien activé le javascript sur l'index ?
- Sal'
- Informations : Mon forum est sous modernbb.
Messages : 117
Re: [Aide Codage] Adapter un tuto pour une en-tête dynamique
Mer 2 Aoû 2023 - 14:58
Ah oui j'avais oublié de réactiver et là ça marche !
Une fois de plus, un grand merci
On peut archiver
Une fois de plus, un grand merci
On peut archiver
- Sal'
- Informations : Mon forum est sous modernbb.
Messages : 117
Re: [Aide Codage] Adapter un tuto pour une en-tête dynamique
Mer 2 Aoû 2023 - 14:59
Oops petit double post rapide ;
Par contre le temps avant que l'affichage de l'en-tête ne se fasse a toujours été très long/capricieux, peut-on l'optimiser ?
Par contre le temps avant que l'affichage de l'en-tête ne se fasse a toujours été très long/capricieux, peut-on l'optimiser ?
- MiettesRâleuse (Admin)
- Informations :
► Présente en semaine (09h00 - 18h00)
----
Viens papoter avec nous sur le discord
Pseudo Discord : Miettes
Messages : 2203
Re: [Aide Codage] Adapter un tuto pour une en-tête dynamique
Mer 2 Aoû 2023 - 15:36
On appelle des choses en JS, du coup, faut le temps que les infos aillent se récupérer. Cela dit, ce qu'on peut faire, c'est ajouté un spinner qui cachera tout et qui s'enlevera au bout d'un temps défini pour qu'on voit l'en-tête directement chargée. Esthétiquement, ça sera peut être plus jolie
EDIT : je viens de voir ça sur ton en-tête
EDIT : je viens de voir ça sur ton en-tête
@Mäven, on va devoir laisser sortir les bêtes Râleuses en nouscontrairement à ce que prétend le titre, les administratrices sont charmantes et ne râlent pas
- Sal'
- Informations : Mon forum est sous modernbb.
Messages : 117
Re: [Aide Codage] Adapter un tuto pour une en-tête dynamique
Mer 2 Aoû 2023 - 15:42
Pourquoi pas pour le spinner le souci à vrai dire ce n'est même pas le délai de chargement, mais le fait que je dois rafraichir plusieurs fois avant d'arriver à ce que ça charge, mais quand ça charge c'est assez rapide. Etrange, si tu vois d'où ça peut venir ?
Ouin bah déjà si le lien vers la tambouille pouvait fonctionner ça aiderait, je ne sais pas pourquoi ça donne une erreur 404 ou bien quelque chose qui stipule que c'est bloqué
EDIT : c'est bon je m'en suis sortie avec le lien ^^
le souci à vrai dire ce n'est même pas le délai de chargement, mais le fait que je dois rafraichir plusieurs fois avant d'arriver à ce que ça charge, mais quand ça charge c'est assez rapide. Etrange, si tu vois d'où ça peut venir ? @Mäven, on va devoir laisser sortir les bêtes Râleuses en nous Lol
Ouin bah déjà si le lien vers la tambouille pouvait fonctionner ça aiderait, je ne sais pas pourquoi ça donne une erreur 404 ou bien quelque chose qui stipule que c'est bloqué
EDIT : c'est bon je m'en suis sortie avec le lien ^^
- MiettesRâleuse (Admin)
- Informations :
► Présente en semaine (09h00 - 18h00)
----
Viens papoter avec nous sur le discord
Pseudo Discord : Miettes
Messages : 2203
Re: [Aide Codage] Adapter un tuto pour une en-tête dynamique
Mer 2 Aoû 2023 - 15:55
Le lien dans ton message n'est pas bon. Il y a
Pour le souci de chargement, ça peut venir de ta connexion/de ton navigateur. Le javascript ça reste du traitement coté client (donc au niveau de ton navigateur). Ça utilise donc des ressources et ça arrive que ça rame. Même si cette solution est pratique, il ne faut pas utiliser les messages pour tous tes contenus. Par exemple, les choses qui ne changerons quasi jamais, code-les directement dans la page HTML de ton en-tête. Tu pourrais donc n'utiliser les messages que pour :
> les annonces
> tes root-top (ça existe encore ça ?
)
ensuite, l'autre chose que tu peux faire pour que ça charge encore plus, c'est de mettre ton en-tête directement dans le template. On peut commencer par essayer cette solution pour voir si ça change quelque chose si tu veux
Parce là, en gros, voilà ce qui se passe :
> on arrive sur ta page
---> on appelle la page HTML dans le bloc d'en-tête
-------> on remplit les blocs de l'en-tête
En mettant le code de l'en-tête directement dans le template, on enlève une étape
- Code:
[/url
Pour le souci de chargement, ça peut venir de ta connexion/de ton navigateur. Le javascript ça reste du traitement coté client (donc au niveau de ton navigateur). Ça utilise donc des ressources et ça arrive que ça rame. Même si cette solution est pratique, il ne faut pas utiliser les messages pour tous tes contenus. Par exemple, les choses qui ne changerons quasi jamais, code-les directement dans la page HTML de ton en-tête. Tu pourrais donc n'utiliser les messages que pour :
> les annonces
> tes root-top (ça existe encore ça ?
)ensuite, l'autre chose que tu peux faire pour que ça charge encore plus, c'est de mettre ton en-tête directement dans le template. On peut commencer par essayer cette solution pour voir si ça change quelque chose si tu veux
Parce là, en gros, voilà ce qui se passe :
> on arrive sur ta page
---> on appelle la page HTML dans le bloc d'en-tête
-------> on remplit les blocs de l'en-tête
En mettant le code de l'en-tête directement dans le template, on enlève une étape
- Sal'
- Informations : Mon forum est sous modernbb.
Messages : 117
Re: [Aide Codage] Adapter un tuto pour une en-tête dynamique
Mer 2 Aoû 2023 - 16:00
oui je veux bien qu'on essaie mais c'est bien ce que je pensais, comme j'ai une connexion vraiment lente ça n'aide pas... j'suis en vdsl2 (et oui, ça existe encore comme les root-top xD)
du coup je veux bien qu'on essaie ça si ça ne te dérange pas oui
Et je vais placer ce que je peux en dehors des messages.
(Par contre les root-top ne changeront pas si je ne dis pas de bêtises ? ce sont des liens à cliquer auquel je ne toucherai jamais)
du coup je veux bien qu'on essaie ça si ça ne te dérange pas oui
Et je vais placer ce que je peux en dehors des messages.
(Par contre les root-top ne changeront pas si je ne dis pas de bêtises ? ce sont des liens à cliquer auquel je ne toucherai jamais)
- MiettesRâleuse (Admin)
- Informations :
► Présente en semaine (09h00 - 18h00)
----
Viens papoter avec nous sur le discord
Pseudo Discord : Miettes
Messages : 2203
Re: [Aide Codage] Adapter un tuto pour une en-tête dynamique
Mer 2 Aoû 2023 - 17:04
Ok d'acc, alors on y va
Pour commencer, on va reprendre le code de la page HTML et on va remplir les cases avec nos textes et liens fixes (ceux qui ne seront plus dynamisés via les messages du forum).
Pour commencer, on va reprendre le code de la page HTML et on va remplir les cases avec nos textes et liens fixes (ceux qui ne seront plus dynamisés via les messages du forum).
- Sal'
- Informations : Mon forum est sous modernbb.
Messages : 117
Re: [Aide Codage] Adapter un tuto pour une en-tête dynamique
Mer 2 Aoû 2023 - 18:03
Re,
Du coup une amie qui a aussi regardé le forum a eu exactement le même souci que moi, l'en-tête se chargeait mal. Elle a une meilleure connexion que moi, et je crois qu'elle utilise Firefox (en tout cas chez moi ça merdouille sur Firefox et Edge)
Donc je vais dans la page HTML de mon en tête et j'y déplace le contenu dans les messages du forum qui seront à peu près fixes, c'est bien ça ? Comment je m'y prends, j'imagine que je copie colle pas n'importe comment dans la page ?
Si je ne me plante pas, voilà le code de la page HTML de l'en-tête :
Pour commencer je vais placer le contexte à venir. Donc je copie colle le texte dans la page comment ? je dois rajouter quoi dans le code pour faire le pont entre le contenu et l'endroit voulu de l'en-tête ?
EDIT : c'est bon j'ai trouvé l'endroit, on peut passer à la suite
EDIT 2: alors pendant le chargement c'est le html qui charge, et dès que c'est chargé c'est le message du forum, je ne peux pas laisser le champ vide, est-ce que je peux supprimer le message forum en question du champ contexte du coup ?
Du coup une amie qui a aussi regardé le forum a eu exactement le même souci que moi, l'en-tête se chargeait mal. Elle a une meilleure connexion que moi, et je crois qu'elle utilise Firefox (en tout cas chez moi ça merdouille sur Firefox et Edge)
Donc je vais dans la page HTML de mon en tête et j'y déplace le contenu dans les messages du forum qui seront à peu près fixes, c'est bien ça ? Comment je m'y prends, j'imagine que je copie colle pas n'importe comment dans la page ?
Si je ne me plante pas, voilà le code de la page HTML de l'en-tête :
- 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="https://bleu-de-sang.forumactif.com/h1-sujets-recents" height="130px" width="100%" align="center" marginheight="0" frameborder="0" scrolling="no"></iframe>
</div>
</div>
</div>
Pour commencer je vais placer le contexte à venir. Donc je copie colle le texte dans la page comment ? je dois rajouter quoi dans le code pour faire le pont entre le contenu et l'endroit voulu de l'en-tête ?
EDIT : c'est bon j'ai trouvé l'endroit, on peut passer à la suite
EDIT 2: alors pendant le chargement c'est le html qui charge, et dès que c'est chargé c'est le message du forum, je ne peux pas laisser le champ vide, est-ce que je peux supprimer le message forum en question du champ contexte du coup ?
- MiettesRâleuse (Admin)
- Informations :
► Présente en semaine (09h00 - 18h00)
----
Viens papoter avec nous sur le discord
Pseudo Discord : Miettes
Messages : 2203
Re: [Aide Codage] Adapter un tuto pour une en-tête dynamique
Jeu 3 Aoû 2023 - 6:48
Coucou
Je ne suis pas certaine qu'on se soit bien compris, alors on va y aller étape par étape
Pour commencer, on va :
1. Supprimer le code qu'on avait mis dans Panneau d'administration > Affichage > Page d'accueil > Généralité
2. Désactiver le JS qu'on avait ajouté pour l'en-tête
Une fois que ça c'est fait, j'aimerai que tu mettes ici les élements de ton en-tête qui seront directement codés dans le template. (On va les préparer pour les convertir en HTML ^^)
Je ne suis pas certaine qu'on se soit bien compris, alors on va y aller étape par étape
Pour commencer, on va :
1. Supprimer le code qu'on avait mis dans Panneau d'administration > Affichage > Page d'accueil > Généralité
2. Désactiver le JS qu'on avait ajouté pour l'en-tête
Une fois que ça c'est fait, j'aimerai que tu mettes ici les élements de ton en-tête qui seront directement codés dans le template. (On va les préparer pour les convertir en HTML ^^)
- Sal'
- Informations : Mon forum est sous modernbb.
Messages : 117
Re: [Aide Codage] Adapter un tuto pour une en-tête dynamique
Jeu 3 Aoû 2023 - 11:02
Coucou !
D'accord, je regarde ça tout de suite
Voilà :
1. J'ai supprimé le code ici Panneau > d'administration > Affichage > Page d'accueil > Généralité
2. Comment désactiver le JS qu'on avait ajouté sur l'en tête ? Supprimé la page JS ?
EDIT : j'ai désactivé directement la gestion des codes JS
D'accord, je regarde ça tout de suite
Voilà :
1. J'ai supprimé le code ici Panneau > d'administration > Affichage > Page d'accueil > Généralité
2. Comment désactiver le JS qu'on avait ajouté sur l'en tête ? Supprimé la page JS ?
EDIT : j'ai désactivé directement la gestion des codes JS
- MiettesRâleuse (Admin)
- Informations :
► Présente en semaine (09h00 - 18h00)
----
Viens papoter avec nous sur le discord
Pseudo Discord : Miettes
Messages : 2203
Re: [Aide Codage] Adapter un tuto pour une en-tête dynamique
Jeu 3 Aoû 2023 - 11:19
Pour le js, tu as juste besoin de tout décocher ^^
- Sal'
- Informations : Mon forum est sous modernbb.
Messages : 117
Re: [Aide Codage] Adapter un tuto pour une en-tête dynamique
Jeu 3 Aoû 2023 - 11:24
décoché, désactiver la gestion des codes JS ? désolée je suis un peu perdue je crois si c'est je l'ai fait
si c'est je l'ai fait - MiettesRâleuse (Admin)
- Informations :
► Présente en semaine (09h00 - 18h00)
----
Viens papoter avec nous sur le discord
Pseudo Discord : Miettes
Messages : 2203
Re: [Aide Codage] Adapter un tuto pour une en-tête dynamique
Jeu 3 Aoû 2023 - 11:27
Il faut que ça soit comme ça
![[Aide Codage] Adapter un tuto pour une en-tête dynamique Captur21](https://i.servimg.com/u/f71/20/05/19/39/captur21.png)
Si c'est ok, je te laisse copier/coller ici tous tes contenus ?
![[Aide Codage] Adapter un tuto pour une en-tête dynamique Captur21](https://servimg.com/r/7120051939/captur21.png)
Si c'est ok, je te laisse copier/coller ici tous tes contenus ?
- Sal'
- Informations : Mon forum est sous modernbb.
Messages : 117
Re: [Aide Codage] Adapter un tuto pour une en-tête dynamique
Jeu 3 Aoû 2023 - 11:41
Ok merci c'est fait ! j'ai réactivé la gestion des codes et décoché l'index dans le code.
Les contenus, j'imagine que tu parles des différentes parties de l'en-tête ? Si c'est bien ça voilà :
Champ 1 : message haut ; Contexte en cours de conception
Champ 2 : boutons rang 1 ; (j'ai retiré les liens qui étaient ceux de l'autre forum)
Champ 3 : Texte du milieu ;
Champ 4 : les annonces ;
Champ 5 : Rang inferieur des boutons (idem, j'ai retiré les liens)
Champ 6 : Texte sans cadre ;
Les contenus, j'imagine que tu parles des différentes parties de l'en-tête ? Si c'est bien ça voilà :
Champ 1 : message haut ; Contexte en cours de conception
Champ 2 : boutons rang 1 ; (j'ai retiré les liens qui étaient ceux de l'autre forum)
- Code:
<a href="http://www.root-top.com/topsite/melu/in.php?ID=4647">
<img src="https://nsa40.casimages.com/img/2019/07/03/190703071345279532.png " border="0" alt="top best forums" title="top best forums">
<a href="http://www.root-top.com/topsite/justmarried/in.php?IDmark=830"><img src="https://nsa40.casimages.com/img/2019/07/03/190703071345375352.png" /></a>
<a href=""><img src="https://nsa40.casimages.com/img/2019/07/02/mini_190702054841980856.png" /></a>
<a href=""><img src="https://nsa40.casimages.com/img/2019/07/03/190703071345375352.png" /></a>
<a href=""><img src="https://nsa40.casimages.com/img/2019/07/03/190703071345279532.png " border="0" alt="top best forums" title="top best forums">
Champ 3 : Texte du milieu ;
- Code:
[center]Un grand merci à Miettes qui m'a aidée à remettre cette en tête qu'elle m'avait créé sur demande.
N'hésitez pas à faire un tour sur leur forum [url=https://tambouille-raleuses.forumactif.com]La tambouille des râleuses[/url] qui est sur le thème des langages web. L'ambiance est chaleureuse et contrairement à ce que prétend le titre, les administratrices sont charmantes et ne râlent pas :hearts:
Champ 4 : les annonces ;
- Code:
[b]Annonces[/b]
[color=#6600FF][b]✦ 02.08.23[/b][/color] - Lancement du forum prochainement
Champ 5 : Rang inferieur des boutons (idem, j'ai retiré les liens)
- Code:
<a href=""><img src="https://nsa40.casimages.com/img/2019/07/27/1907271138111663.jpg" /></a>
<a href=""><img src="https://nsa40.casimages.com/img/2019/07/27/190727113812334391.jpg" /></a>
<a href=""><img src="https://nsa40.casimages.com/img/2019/07/27/190727122540381940.jpg" /></a>
<a href=""><img src="https://cdn.discordapp.com/attachments/384423219441958922/600457710126759966/reglement.jpg" /></a>
<a href=""><img src="https://nsa40.casimages.com/img/2019/07/27/19072711381299445.jpg" /></a>
Champ 6 : Texte sans cadre ;
- Code:
Qu'il fait bon d'être sur Bleu de Sang !
<br/>
Crédit : Miettes
- MiettesRâleuse (Admin)
- Informations :
► Présente en semaine (09h00 - 18h00)
----
Viens papoter avec nous sur le discord
Pseudo Discord : Miettes
Messages : 2203
Re: [Aide Codage] Adapter un tuto pour une en-tête dynamique
Jeu 3 Aoû 2023 - 12:52
On ne va pas avoir trop de trucs que ça a modifié pour le moment.
- on ajoutera le contexte quand tu l'aurais écrit
- pour le champ 2, c'est ok
- pour le champ 3 : ici, on va supprimer les balises bbcode pour mettre du html à la place (sinon, ça ne sera pas interprété)
- pour le champ 5 : c'est ok
- pour le champ 6 : on va juste l'entouré d'une balise "p"
On injecte donc tout ça dans le code de l'en-tête qu'on va entourer du wrapper qu'on a supprimé au niveau du PA
Et on va aller mettre tout ça dans le template index_body juste avant
N'oublie pas de publier le template
- on ajoutera le contexte quand tu l'aurais écrit
- pour le champ 2, c'est ok
- pour le champ 3 : ici, on va supprimer les balises bbcode pour mettre du html à la place (sinon, ça ne sera pas interprété)
- Code:
<p style="text-align:center;">Un grand merci à Miettes qui m'a aidée à remettre cette en tête qu'elle m'avait créé sur demande.<br />
N'hésitez pas à faire un tour sur leur forum <a href="https://tambouille-raleuses.forumactif.com" target="_blank">La Tambouille des râleuses</a> qui est sur le thème des langages web. L'ambiance est chaleureuse et contrairement à ce que prétend le titre, les administratrices sont charmantes et ne râlent pas :hearts:</p>
- pour le champ 5 : c'est ok
- pour le champ 6 : on va juste l'entouré d'une balise "p"
On injecte donc tout ça dans le code de l'en-tête qu'on va entourer du wrapper qu'on a supprimé au niveau du PA
- Code:
<div id="wrapper-entete">
<div id="blk-entete">
<div class="blk-txt">
<p>Contexte en cours de conception</p>
</div>
<div class="btn-nav d-flex">
<a href="http://www.root-top.com/topsite/melu/in.php?ID=4647">
<img src="https://nsa40.casimages.com/img/2019/07/03/190703071345279532.png " border="0" alt="top best forums" title="top best forums">
</a>
<a href="http://www.root-top.com/topsite/justmarried/in.php?IDmark=830">
<img src="https://nsa40.casimages.com/img/2019/07/03/190703071345375352.png" />
</a>
<a href="">
<img src="https://nsa40.casimages.com/img/2019/07/02/mini_190702054841980856.png" />
</a>
<a href="">
<img src="https://nsa40.casimages.com/img/2019/07/03/190703071345375352.png" />
</a>
<a href="">
<img src="https://nsa40.casimages.com/img/2019/07/03/190703071345279532.png " border="0" alt="top best forums" title="top best forums">
</a>
</div>
<div class="blk-txt" id="blk-small">
<p style="text-align:center;">Un grand merci à Miettes qui m'a aidée à remettre cette en tête qu'elle m'avait créé sur demande.<br />
N'hésitez pas à faire un tour sur leur forum <a href="https://tambouille-raleuses.forumactif.com" target="_blank">La Tambouille des râleuses</a> qui est sur le thème des langages web. L'ambiance est chaleureuse et contrairement à ce que prétend le titre, les administratrices sont charmantes et ne râlent pas :hearts:</p>
</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">
<a href=""><img src="https://nsa40.casimages.com/img/2019/07/27/1907271138111663.jpg" /></a>
<a href=""><img src="https://nsa40.casimages.com/img/2019/07/27/190727113812334391.jpg" /></a>
<a href=""><img src="https://nsa40.casimages.com/img/2019/07/27/190727122540381940.jpg" /></a>
<a href=""><img src="https://cdn.discordapp.com/attachments/384423219441958922/600457710126759966/reglement.jpg" /></a>
<a href=""><img src="https://nsa40.casimages.com/img/2019/07/27/19072711381299445.jpg" /></a>
</div>
<div id="mea">
<p>
Qu'il fait bon d'être sur Bleu de Sang !
<br/>
Crédit : Miettes
</p>
</div>
</div>
<div id="dernier-msg" class="blk-txt">
<iframe name="Sujets récents" src="https://bleu-de-sang.forumactif.com/h1-sujets-recents" height="130px" width="100%" align="center" marginheight="0" frameborder="0" scrolling="no"></iframe>
</div>
</div>
</div>
</div>
Et on va aller mettre tout ça dans le template index_body juste avant
- Code:
{BOARD_INDEX}
N'oublie pas de publier le template 
Page 1 sur 2 • 1, 2
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum|
|
|