N'activer que les flèches haut bas sur PC

[Mat]

Bonjour ,
j'ai suivi ce tuto :
https://forum.forumactif.com/t325685-ajouter-des-boutons-haut-bas
Pour ajouter des flèches haut et bas sur mon forul
Mais elle apparaissent aussi sur la version mobile
Alors que sur la version mobile je veux pas qu'elle apparaissent, car une flèches haut est déja présente

Merci d'avance

[◦Jay◦]

Bonjour FkS_DjMat, vous pouvez mettre les flèches dans votre template overall_header pour qu'elles n'apparaissent pas sur la version mobile.

En mettant ce code dans votre template après ceci

Code:

<!-- END google_analytics_code -->

Code:

<!----fleche bas------->
 <div class="boubas"><a href="#bottom"><img src="https://2img.net/i/fa/empty.gif" class="flechedown" alt="Aller en bas" /></a></div>
  <!----fin  fleche bas------->
  <!---- fleche haut------->
<div class="bouhaut"><a href="#top"><img src="https://2img.net/i/fa/empty.gif" class="flecheup" alt="Aller en haut" /></a></div>
  <!----fin  fleche haut------->

Vous avez donc pour le moment une image vide, il faut ensuite placer l'image sur votre forum par CSS, comme ceci :

Code:

.flechedown{
width:(largeur de l'image en bas en px);
height:(hauteur de l'image en bas en px);
background:url("URL de votre image") no-repeat;}
.flecheup{
width:(largeur de l'image en haut en px);
height:(hauteur de l'image en haut en px);
background:url("URL de votre image") no-repeat;}


Et ce CSS pour placer vos images sur votre forum :

Code:

/*fleche en haut*/
.bouhaut
{
top: 175px;/*se trouvera à 175px du bord haut de l'écran*/
right: 0px;/*se trouvera à 0px du bord droit de l'écran*/
position: fixed;
z-index: 100;
}
/*fleche en bas*/
.boubas
{
top: 406px;/*se trouvera à 406px du bord haut de l'écran*/
right: 0px;/*se trouvera à 0px du bord droit de l'écran*/
position: fixed;
z-index: 100;
}

Vous pouvez bien entendu supprimer vos anciennes flèches.

Bien à vous.

[Mat]

Alors merci , mais ça ne marche pas (enfin si elle fonctionnent) mais le problèmes c'est qu'elle sont en haut à gauche, et elles créent un espace entre la toolbar, et le "reste du forum"
Je voudrais bien, si possible, les avoirs en bas à droite , comme sur l'ancien tuto

[◦Jay◦]

Quel est le forum concerné ?

[Mat]

Celui-ci :
http://bit.ly/2oPwMrS
Mais j'ai enlevé le code, vu qu'il causais un bug
Dois-je le replacer ?

[◦Jay◦]

Oui, remettez tout que je puisse voir mais si vous n'avez pas touché au css que j'ai donné, les flèches devrait être à droite...

[Mat]

Ok, juste une petite question, je dois placer les liens dans quels code  :
Le deuxième, ou les deux ?

Code:

<!----fleche bas------->
 <div class="boubas"><a href="#bottom"><img src="https://2img.net/i/fa/empty.gif" class="flechedown" alt="Aller en bas" /></a></div>
  <!----fin  fleche bas------->
  <!---- fleche haut------->
<div class="bouhaut"><a href="#top"><img src="https://2img.net/i/fa/empty.gif" class="flecheup" alt="Aller en haut" /></a></div>
  <!----fin  fleche haut------->

Vous avez donc pour le moment une image vide, il faut ensuite placer l'image sur votre forum par CSS, comme ceci :

Code:

.flechedown{
width:(largeur de l'image en bas en px); 
height:(hauteur de l'image en bas en px); 
background:url("URL de votre image") no-repeat;}
.flecheup{
width:(largeur de l'image en haut en px); 
height:(hauteur de l'image en haut en px); 
background:url("URL de votre image") no-repeat;}


[◦Jay◦]

Les liens des images ? La ou il est écrit "URL de votre image" flèche du bas à .flechedown et flèche du haut à .flecheup

[Mat]

Les liens des images ? La ou il est écrit "URL de votre image" flèche du bas à .flechedown et flèche du haut à .flecheup

Oui, c'est ce que j'ai fait alors 
Tout à l'heure, j'avais ajouter les urls ici aussi, à la place des icônes transparentes  :

Code:

      <!----fleche bas------->
 <div class="boubas"><a href="#bottom"><img src="https://2img.net/i/fa/empty.gif" class="flechedown" alt="Aller en bas" /></a></div>
  <!----fin  fleche bas------->
  <!---- fleche haut------->
<div class="bouhaut"><a href="#top"><img src="https://2img.net/i/fa/empty.gif" class="flecheup" alt="Aller en haut" /></a></div>
  <!----fin  fleche haut------->

Et là elles s'affichaient 
Mais pas comme je le voulais
Mais maintenant que j'ai fait tout correctement, rien ne s'affiche
Le code est en place si vous voulez jeter un oeil

[◦Jay◦]

Bon, ne touchez à rien pour le moment.

[◦Jay◦]

Copiez et collez moi votre css ici entre balise code svp.

[Mat]

Voici :

Code:

/**Ajouter des flèches haut et bas début*/
.flechedown{
width:(largeur de l'image en bas en px);
height:(hauteur de l'image en bas en px);
background:url("https://i.servimg.com/u/f11/19/61/23/00/flyche10.png") no-repeat;}
.flecheup{
width:(largeur de l'image en haut en px);
height:(hauteur de l'image en haut en px);
background:url("https://i.servimg.com/u/f11/19/61/23/00/flyche11.png") no-repeat;}
/*fleche en haut*/
.bouhaut
{
top: 175px;/*se trouvera à 175px du bord haut de l'écran*/
right: 0px;/*se trouvera à 0px du bord droit de l'écran*/
position: fixed;
z-index: 100;
}
/*fleche en bas*/
.boubas
{
top: 406px;/*se trouvera à 406px du bord haut de l'écran*/
right: 0px;/*se trouvera à 0px du bord droit de l'écran*/
position: fixed;
z-index: 100;
}
/**Ajouter des flèches haut et bas fin*/

[◦Jay◦]

Supprimez absolument tout le CSS que vous avez mis pou ces flèches et mettez celui-ci :

Code:

/**Ajouter des flèches haut et bas début*/
.flechedown{
width:38px;
height:48px;
background:url("https://i.servimg.com/u/f11/19/61/23/00/flyche10.png") no-repeat;}
.flecheup{
width:38px;
height:48px;
background:url("https://i.servimg.com/u/f11/19/61/23/00/flyche11.png") no-repeat;}
/*fleche en haut*/
.bouhaut
{
top: 650px;/*se trouvera à 175px du bord haut de l'écran*/
right: 0px;/*se trouvera à 0px du bord droit de l'écran*/
position: fixed;
z-index: 100;
}
/*fleche en bas*/
.boubas
{
top: 688px;/*se trouvera à 406px du bord haut de l'écran*/
right: 0px;/*se trouvera à 0px du bord droit de l'écran*/
position: fixed;
z-index: 100;
}
/**Ajouter des flèches haut et bas fin*/

[Mat]

Merci
Ca fonctionne
Voici le résultat pour ceux qui voudrais appliquer le tuto  :


Encore un grand merci Jay