1 résultat trouvé pour p35
- le Mer 2 Aoû 2023 - 11:10
- Rechercher dans: Publiques
- Sujet: [Aide Codage] Adapter un tuto pour une en-tête dynamique
- Réponses: 34
- Vues: 336
[Aide Codage] Adapter un tuto pour une en-tête dynamique
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à… :/
- 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 !
