Bouton UP / DOWN à insérer en bas à gauche du forum et incrustation d'image sur les côtés

[Spencer73]

Détails techniques

Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Depuis le début
Lien du forum : https://marveldimensions.forumactif.com/

Description du problème

Bonjour, j'aimerais afficher un bouton UP / DOWN sur mon forum à partir de cette image :



J'aimerais que le mot UP soit cliquable pour aller en haut du forum, de même que le bouton DOWN pour aller en bas du forum mais je ne sais pas comment faire.

Je ne sais pas non plus quel code utiliser pour insérer le bouton.

De même, j'aimerais insérer l'image suivante en haut à gauche de mon forum sans que cela ne fasse bouger la barre de navigation :

Spoiler:

Voici le rendu que j'aimerais avoir sur mon forum :

Spoiler:

Voici le premier lien d'aide que j'ai demandé au service de création graphique :

https://forum.forumactif.com/t407339-creation-de-boutons-up-et-down-pour-le-forum-et-incrustation-d-images-sur-les-cotes

Vous remerciant par avance pour votre aide

[Oka.mi]

Bonjour,

Je vous ai dit qu'on peut passer par le template overall_header, mais tout compte fait, on va intégrer les éléments via JavaScript !
La différence, c'est qu'en éditant le template, vous ajoutez directement les éléments dans la page : ils seront présents au chargement. Avec JavaScript, ils seront installés après chargement de la page, mais ce n'est pas grave, parce que ça va vite, ça ne se verra pas. J'ai opté pour cette solution car en modifiant le template, celui-ci ne sera plus par défaut et ne sera donc plus mis à jour en cas de modifications du côté de Forumactif (même si généralement, quand il y a de gros changements, on vous en informe sur ce forum).

Bref, ajoutons donc ce JavaScript !
Si cela ne vous dit rien, je vous invite à lire Gestion des codes Javascript.
Créez un nouveau JavaScript en veillant donc à ce que la gestion soit activée, puis cochez comme placement sur toutes les pages.

Code:

$(function() {
  $('body').append('<div id="spiderman"></div><div id="ironman"><a href="#top"></a><a href="#bottom"></a></div>');
  });

En gros, on intègre dans les balises body (le corps de la page) les éléments "spiderman" et "ironman" (qui contient deux liens, un qui mène vers le haut de la page, et l'autre vers le bas).

Les éléments sont installés, mais il reste à ajouter un peu de CSS pour donner forme à tout ça.
Pour cela, rendez-vous dans Affichage > Images et Couleurs > Couleurs > Feuille de style CSS, et ajoutez ceci :

Code:

#spiderman {
  background-image: url(https://i.servimg.com/u/f38/20/37/93/37/u1784415.png);
  position: fixed;
  left: 0;
  top: 30px;
  width: 224px;
  height: 320px;
}

#ironman {
  background-image: url(https://i.servimg.com/u/f38/20/37/93/37/u1784412.png);
  position: fixed;
  right: 0;
  bottom: 0;
  width: 224px;
  height: 320px;
}

#ironman a {
  display: block;
  width: 224px;
  height: 160px;
}

Là, on a établi les dimensions des différents éléments en fonction de la taille des images, on leur a donné une position fixe (pour que ça suive le défilement de la page), et pour les liens, leurs dimensions occupent à chaque fois la moitié de l'image Ironman (224x160) !

Est-ce que cela vous convient ?

[Spencer73]

Wow, je suis vraiment bluffé, le code fonctionne parfaitement et le rendu est superbe !

Merci beaucoup !!