mise en place d'une banniere en haut du forum

[kelly97]

bonjour

je souhaite mettre une banniere ici

https://2img.net/r/hpimg15/pics/739823cui.png

merci pour votre aide

[Invité]

bonjour Kelly , vous avez déjà la publicité a cette endroit...cela me parais compromis sans passé par l'achat de crédit pour enlever cette publicité.



bonne journée ,

[kelly97]

je ne vois pas de pub moi :s

ou alors dans le haut du forum, je l'avais avant mais avec la mise en place de la nouvelle deco elle a disparue

[MlleAlys]

Bonjour,
Si vous avez une extension de type adblock sur votre navigateur, alors vous devriez voir la pub en la désactivant.

[kelly97]

ah mais je ne veux pas voir de pub lol

Et pour ma demande une astuce ?

[MlleAlys]

"le haut du forum" n'est pas très précis, quelle image souhaitez vous mettre à quel endroit exactement ? (une capture indiquant l'endroit précis pourra nous aider)

[kelly97]

voila

https://2img.net/r/hpimg15/pics/591801cui.png

[MlleAlys]

On va insérer la bannière dans la page à l'aide d'un javascript :

- rendez-vous dans modules > html & javascript > gestion des codes javascript
- vérifiez que l'option "activer la gestion des codes javascript" est cochée sur OUI
- créez un nouveau code javascript
- comme titre, vous pouvez mettre par exemple "bannière coin"
- cochez "sur toutes les pages" si vous souhaitez que la bannière apparaisse sur toutes les pages, ou bien une des autres options en fonction des pages sur lesquels vous souhaitez la voir apparaitre
- dans la zone de saisie du code, copiez collez le code suivant :

Code:

jQuery(document).ready(function () {
    jQuery('body').append('
        <a id="bann-coin" href="LIEN"><img src="IMAGE"/></a>
    ');
});

- remplacez LIEN par l'adresse de la page vers laquelle on doit être redirigé, et IMAGE par l'adresse de l'image souhaitée
- Enregistrez

=> la bannière apparait tout en bas du forum

Pour la positionner correctement :
- Dans affichage > couleurs > onglet feuille de style css, ajoutez le code css suivant :

Code:


/*positionnement bannière coin en haut du forum*/
#bann-coin {
  display: block;
  position: absolute;
  top: 5px;  /*distance avec haut de page*/
  left: 5px; /*distance avec bord gauche*/
}


- Enregistrez.

Modifiez si besoin les valeurs de top et left pour positionner la bannière à l'endroit voulu.

[kelly97]

ok parfait g reussit mais g une seconde banniere a mettre tout a doite de mon forum je refais pareil ?

[MlleAlys]

Il va falloir modifier légèrement : la première bannière installée pour l'instant a un identifiant "bann-coin", ce qui nous a permis de la placer via le css en utilisant cet identifiant.
Si on veut mettre une deuxième bannière de l'autre côté, il faut donc mettre un identifiant différent :

Vous pouvez donc créer un nouveau js avec ce code pour la deuxième bannière :

Code:

jQuery(document).ready(function () {
    jQuery('body').append('
        <a id="bann-coin-droite" href="LIEN"><img src="IMAGE"/></a>
    ');
});

C'est le même sauf que j'ai changé l'identifiant "bann-coin" par "bann-coin-droite".
Et du coup le css pour positionner cette deuxième bannière est celui-ci :

Code:

 
/*positionnement bannière coin en haut à droite du forum*/
#bann-coin-droite {
  display: block;
  position: absolute;
  top: 5px;  /*distance avec haut de page*/
  right: 5px; /*distance avec bord droite*/
}

J'ai changé l'identifiant de l'élément pour que ce code s'applique bien à la deuxième bannière, et changé également la propriété "left" en "right" pour positionner par rapport au bord droit de l'écran.

[kelly97]

super merci par contre ilfaudrais que les images soient un peu plus bas que labarre de navigation, comment faire

[MlleAlys]

dans les codes css modifiez la valeur 5px des lignes
top: 5px; /*distance avec haut de page*/
par celle souhaitée : plus la valeur sera grande, plus l'image sera basse.

[kelly97]

PARFAITTTT ! Merci de ton aide et de ta patience ! Un grand merci

[Chacha]

PARFAITTTT ! Merci de ton aide et de ta patience ! Un grand merci

Afin de faciliter la gestion des problèmes, si le vôtre est résolu, pensez à : éditer votre premier message, cocher l'icône résolu et enregistrer Vous pouvez également remercier les personnes qui vous ont aidé, en cliquant sur le bouton