Image dans sous forum

[tenardier]

Bonjour à tous,

Est-il possible d’intégrer une image dans l'en-tête d'un sous-forum comme ceci ?



Si oui, comment ?

Cordialement

[Self]

Bonjour,

J'ai pris exemple avec votre forum "Maquettes" de la catégorie "EXPOSITION : VOS REALISATIONS, VOS CREATIONS", il vous faut donc ajouter le script suivant sur toutes les pages :

Code:

$(function(){
    if(location.pathname == '/f50-maquettes'){
        $('.page-title').before('<div class="reach-subject">Mon contenu</div>');
    }
});

Le script fonctionne de la façon suivante :

1)

Code:

if(location.pathname == '/f50-maquettes'){

Cette ligne se lit "Si on est sur la page dont le pathname est égale à /f50-maquettes alors..."
Vous pouvez trouver facilement le pathname dans votre barre d'adresse lorsque vous êtes sur la page de votre choix .

2)

Code:

$('.page-title').before('<div class="reach-subject">Mon contenu</div>');

Et avec cette ligne on cherche l'élément qui a la class .page-title, puis on place avant celui-ci notre bloc :

Code:

<div class="reach-subject">Mon contenu</div>

3) Si vous désirez le faire également sur un autre forum, il faudra ajouter un else if (sinon si) de la façon suivante par exemple :

Code:

$(function(){
    if(location.pathname == '/f50-maquettes'){
        $('.page-title').before('<div class="reach-subject">Mon contenu</div>');
    }else if(location.pathname == '/f23-questions-diverses'){
        $('.page-title').before('<div class="reach-subject">Mon autre contenu</div>');
    }
});

La nous aurons le bloc avec le contenu "Mon contenu" au dessus de la liste des topics sur la page portant le pathname /f50-maquettes et le bloc avec le contenu "Mon autre contenu" au dessus de la liste des topics sur la page portant le pathname /f23-questions-diverses.

4) Il ne vous reste plus qu'a styliser un peut vos blocs grâce à la class que je leur est mis .reach-subject, je vous donne un exemple très simple :

Code:

.reach-subject{
    width:30%;
    margin:auto;
    padding:5px 0px;
    color:#000;
    background-color: #DE451A;
    border:1px solid #000;
    text-align:center;
    border-radius:6px;
}

Bonne journée .

[tenardier]

Merci infiniment.