PêpêcheMascotte- Messages : 4428
Flèches de navigation Haut / Bas
Jeu 31 Oct 2019 - 15:38
Toutes versions
Flèches de navigation Haut / Bas
Coucou 
Dans ce LS, je te propose d'ajouter 2 petites flèches où tu le désires sur toutes les pages du forum.
Celles-ci te permettront d'accéder tout en haut du forum ou tout en bas du forum avec, si tu le souhaites, un effet de défilement.
Ce LS est utilisable sur toutes les versions de forum.
Il faut que tu puisses accéder aux templates du forum.
Commençons par le plus simple : la feuille de style à déposer dans Panneau d'administration > Affichage > Images & couleurs > Couleurs > feuille de style CSS.
Celle-ci est commentée. Mais en cas de souci, n'hésite pas à venir nous poser des questions ^^
Ensuite, quelle que soit la version de ton forum, la manipulation est la même. Nous avons 2 templates à modifier (Panneau d'administration > Affichage > Templates > Général).
A chaque fois, je pars des templates par défaut.
Juste avant
On sauvegarde et on publie.
Pour la version AwesomeBB, tu as une petite modifications en plus à faire sur ce template. Il faut que tu ajoutes :
Juste avant
On sauvegarde et on publie.
Si tu veux ajouter un effet de défilement au clic sur l'une des flèches, il va falloir ajouter un peu de javascript. Pour cela, on va aller dans Panneau d'administration > Modules > HTML & Javascript > Gestion des codes Javascript et on va mettre ce code dans un nouveau javascript qu'on va afficher sur toutes les pages.
Dans ce code, la seule chose que tu peux changer c'est la vitesse du défilement. Ici, je l'ai mise à 2 secondes (= 2000 millisecondes).
Si tu te sers de ce code, merci de mettre un petit lien vers La Tambouille quelque part sur ton forum, pas trop caché, pour que tes membres puissent venir chercher de l'aide ou des codes par ici aussi : )
Dans ce LS, je te propose d'ajouter 2 petites flèches où tu le désires sur toutes les pages du forum.
Celles-ci te permettront d'accéder tout en haut du forum ou tout en bas du forum avec, si tu le souhaites, un effet de défilement.
Ce LS est utilisable sur toutes les versions de forum. Il faut que tu puisses accéder aux templates du forum.Les codes
De la CSS
Commençons par le plus simple : la feuille de style à déposer dans Panneau d'administration > Affichage > Images & couleurs > Couleurs > feuille de style CSS.
- Code:
/*********************************************/
/* Flèches de navigation haut/bas */
/* CODAGE :copyright:Miettes */
/* https://tambouille-raleuses.forumactif.com */
/*********************************************/
#arrow-nav{
align-items: center;
bottom: 150px; /* Position par rapport au bas de la page */
left: 4px; /* Position par rapport à la droite de la page */
display: flex;
flex-direction: column;
font-size: 20px; /* Taille des flèches */
position: fixed;
width: 20px;
}
#arrow-nav,
#arrow-nav a{
color: #e26e26; /* Couleur des flèches et du point */
}
#arrow-nav a:hover{
color: #854924; /* Couleur des flèches au survol */
}
#arrow-nav a,
#arrow-nav a:hover{
text-decoration: none !important;
}
Celle-ci est commentée. Mais en cas de souci, n'hésite pas à venir nous poser des questions ^^Le template
Ensuite, quelle que soit la version de ton forum, la manipulation est la même. Nous avons 2 templates à modifier (Panneau d'administration > Affichage > Templates > Général).
A chaque fois, je pars des templates par défaut.overall_header
Juste avant
- Code:
</head>
- Code:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
On sauvegarde et on publie. Pour la version AwesomeBB, tu as une petite modifications en plus à faire sur ce template. Il faut que tu ajoutes : - Code:
<a name="top"></a>
- Code:
<body id="top">
overall_footer_end
Juste avant
- Code:
</body>
- Code:
<div id="arrow-nav">
<a href="#top" class="fa fa-arrow-up" aria-hidden="true"></a>
<span>•</span>
<a href="#bottom" class="fa fa-arrow-down" aria-hidden="true"></a>
</div>
<a id="bottom" name="bottom"></a>
On sauvegarde et on publie.(Facultatif) Envie de défilement ?
Si tu veux ajouter un effet de défilement au clic sur l'une des flèches, il va falloir ajouter un peu de javascript. Pour cela, on va aller dans Panneau d'administration > Modules > HTML & Javascript > Gestion des codes Javascript et on va mettre ce code dans un nouveau javascript qu'on va afficher sur toutes les pages.
- Code:
$(function(){
$('body')
// Au clic sur une des flèches
.on('click', '#arrow-nav a', function(evt){
evt.preventDefault();
// On récupére la direction
var cible = $(this).attr('href');
cible = cible.split('#')[1];
// On défile en 2sec (2000ms) jusqu'à l'endroit voulu
$('html, body').animate({
scrollTop: $('a[name='+ cible +']').offset().top
}, 2000);
});
});
Dans ce code, la seule chose que tu peux changer c'est la vitesse du défilement. Ici, je l'ai mise à 2 secondes (= 2000 millisecondes).
Si tu te sers de ce code, merci de mettre un petit lien vers La Tambouille quelque part sur ton forum, pas trop caché, pour que tes membres puissent venir chercher de l'aide ou des codes par ici aussi : )
MmeFeuillage- Informations : - Absente le week end du vendredi midi au Dimanche soir
Messages : 148 
Re: Flèches de navigation Haut / Bas
Jeu 14 Nov 2019 - 12:24
Coucou !
J'ai une petite question !
Bon ce n'est pas directement sur la mise en place des flèches sur mon forum dsl...(même si je vais quand même probablement les installer Merci pour le tuto d'ailleurs !) , j’espère que ça ne te dérangeras pas trop que je pose la question ici, mais je ne sais pas ou la poser ailleurs ^^' (La relou! encore dsl ^^' )
Je vois qu'on fait un lien vers
Je vois qu'il y a des liens vers des css ou des js etc... c'est tout en anglais et je ne comprend rien ^^
Est ce que tu peux m'expliquer ce que c'est comment fonctionne ces liens, qui s’intègrent à nos templates forumactifs ?
J'ai une petite question !
Bon ce n'est pas directement sur la mise en place des flèches sur mon forum dsl...(même si je vais quand même probablement les installer
Merci pour le tuto d'ailleurs !) , j’espère que ça ne te dérangeras pas trop que je pose la question ici, mais je ne sais pas ou la poser ailleurs ^^' (La relou! encore dsl ^^' )Je vois qu'on fait un lien vers
- Code:
href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
Je vois qu'il y a des liens vers des css ou des js etc... c'est tout en anglais et je ne comprend rien ^^
Est ce que tu peux m'expliquer ce que c'est comment fonctionne ces liens, qui s’intègrent à nos templates forumactifs ?
- PêpêcheMascotte
- Messages : 4428
Re: Flèches de navigation Haut / Bas
Jeu 14 Nov 2019 - 14:51
Coucou
alors, en réalité, c'est ceci que ça appelle
https://fontawesome.com/v4.7.0/icons/
en gros, ça permet d'utiliser toutes les icons disponibles sur ce site. Par exemple :
- Code:
<i class="fa fa-coffee" aria-hidden="true"></i>
- Code:
<i class="fa fa-diamond" aria-hidden="true"></i>
Donc ça :
- Code:
href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
---
ensuite, boostrap, c'est différent
https://getbootstrap.com/docs/4.3/getting-started/introduction/
en gros, ça permet à n'importe qui te faire un site web avec un structure qui s'apdate quelque soit ta résolution d'écran (pc, mobile, tablette). En gros, c'est une grosse bibliothèque de style prédéfinis.
Tu as des exemples ici :
https://getbootstrap.com/docs/4.3/examples/
Imaginons que je veuilles faire un site avec un bloc contenant 3 colonnes, j'ai juste la CSS à appeler :
- Code:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
et ce code à écrire :
- Code:
<div class="container"><!--
--><div class="row"><!--
--><div class="col-sm">
One of three columns
</div><!--
--><div class="col-sm">
One of three columns
</div><!--
--><div class="col-sm">
One of three columns
</div><!--
--></div><!--
--></div>
Cette bibliothèque contient même ce qu'on appelle des "spinner" déjà stylisé
- Code:
<div class="spinner-border text-info" role="status">
<span class="sr-only">Loading...</span>
</div>
Voici les exemples :
https://miettes.lebonforum.com/h45-nps-explication-tuto
(je l'ai mis sur une page html sinon la CSS fait des ravages avec celle du forum :p)
En gros, ça te permet d'utiliser plein de choses déjà créé sans avoir à te casser la tête à le faire
EDIT :
Si vous voulez les dernières versions des icons, il faut appeler cette CSS :
- Code:
<script src="https://kit.fontawesome.com/c7ee274ba4.js" crossorigin="anonymous"></script>
à la place de ça
- Code:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
et il faut aller chercher vos icons là :
https://fontawesome.com/icons?d=gallery&m=free
- MmeFeuillage
- Informations : - Absente le week end du vendredi midi au Dimanche soir
Messages : 148
Re: Flèches de navigation Haut / Bas
Jeu 14 Nov 2019 - 18:07
Hoo !! c'est super intéressant tout ça 
Merci beaucoup pour tes explications !!
Merci beaucoup pour tes explications !!
Yue- Messages : 114
Re: Flèches de navigation Haut / Bas
Lun 20 Jan 2020 - 18:19
Top ce LS ! Je cherchais justement à ajouter ça avec le fameux défilement fluide !
Merciii
Merciii
- Yue
- Messages : 114
Re: Flèches de navigation Haut / Bas
Lun 20 Jan 2020 - 20:15
Re ! Je me permets un DP pour que vous voyez ma réponse o/
J'ai du ajouter ceci :
dans Overall Header pour que la flèche du haut fonctionne bien, sinon la commande demeurait dans le vide
(Je ne sais pas si c'est un oubli ou alors une spécificité de AwesomeBB ?)
J'ai du ajouter ceci :
- Code:
<a id="top" name="top"></a>
dans Overall Header pour que la flèche du haut fonctionne bien, sinon la commande demeurait dans le vide
(Je ne sais pas si c'est un oubli ou alors une spécificité de AwesomeBB ?)
MävenRâleuse (Admin)- Informations : Très peu présente en ce moment
----
Viens papoter avec nous sur le discord
Messages : 4055
Re: Flèches de navigation Haut / Bas
Mar 21 Jan 2020 - 11:18
Hello !
Ton template était modifié ? Normalement, même sur AwesomeBB ça fonctionne correctement en suivant le tutoriel (je viens de le refaire en partant de templates "de base" et je n'ai rien eu à ajouter de plus que ce qu'il y a dans le tuto ) .
L'ID est ici en fait :
Ton template était modifié ? Normalement, même sur AwesomeBB ça fonctionne correctement en suivant le tutoriel (je viens de le refaire en partant de templates "de base" et je n'ai rien eu à ajouter de plus que ce qu'il y a dans le tuto
) . L'ID est ici en fait :
- Code:
<body id="top">
- Yue
- Messages : 114
Re: Flèches de navigation Haut / Bas
Mar 21 Jan 2020 - 15:27
C'est trop bizarre alors, mon template est modifié oui mais l'ID en "top" de base est toujours présente, mais c'est comme si ça ne voulait pas répondre °°
Alors que celui du bas était nickel !
Alors que celui du bas était nickel !
- MävenRâleuse (Admin)
- Informations : Très peu présente en ce moment
----
Viens papoter avec nous sur le discord
Messages : 4055
Re: Flèches de navigation Haut / Bas
Mer 22 Jan 2020 - 13:36
Ah oui j'ai vu d'où venait le souci, c'est quand on utilise le JS. On va revoir ça pour modifier le tuto en conséquence
EDIT : Seul AwesomeBB posait souci Le LS est modifié en conséquence.
@Yue, attention dans ce que tu as ajouté il y a une erreur, il faut retire l'id parce qu'il est en double du coup (et on ne peut pas avoir 2 fois le même id )
EDIT : Seul AwesomeBB posait souci
Le LS est modifié en conséquence. @Yue, attention dans ce que tu as ajouté il y a une erreur, il faut retire l'id parce qu'il est en double du coup (et on ne peut pas avoir 2 fois le même id
) - Yue
- Messages : 114
Re: Flèches de navigation Haut / Bas
Jeu 23 Jan 2020 - 13:38
Ah super merci @Mäven ! Je vais aller faire les modifs en conséquence dans ce cas o/
EDIT. Bon alors je comprends pas, maintenant ça marche carrément plus du tout xD
EDIT. Bon alors je comprends pas, maintenant ça marche carrément plus du tout xD
- MävenRâleuse (Admin)
- Informations : Très peu présente en ce moment
----
Viens papoter avec nous sur le discord
Messages : 4055
Re: Flèches de navigation Haut / Bas
Jeu 23 Jan 2020 - 13:40
Pas de souci et merci de nous avoir signalé l'erreur
MiettesRâleuse (Admin)- Informations :
► Présente en semaine (09h00 - 18h00)
----
Viens papoter avec nous sur le discord
Pseudo Discord : Miettes
Messages : 2203
Re: Flèches de navigation Haut / Bas
Jeu 23 Jan 2020 - 14:13
Ah mais là c'est àc ause d'un autre de tes js.... On va essayer de corriger tout ça dans ton aide... C'est à cause de ça
- Code:
$(document).ready(function() {
var speedy = 400;
function scrollTo(element) {
$(element).click(function() {
var goscroll = false;
var the_hash = $(this).attr("href");
var regex = new RegExp("(.*)\#(.*)","gi");
if (the_hash.match("\#")) {
the_hash = the_hash.replace(regex, "$2");
if ($("#" + the_hash).size() > 0) {
the_element = "#" + the_hash;
goscroll = true
} else if ($("a[name=" + hash + "]").size() > 0) {
the_element = "a[name=" + the_hash + "]";
goscroll = true
}
if (goscroll) {
var container = 'html';
if ($.browser.webkit)
container = 'body';
$(container).animate({
scrollTop: $(the_element).offset().top
}, speedy);
return false
}
}
})
}
scrollTo('a')
});
- Yue
- Messages : 114
Re: Flèches de navigation Haut / Bas
Jeu 23 Jan 2020 - 14:52
JPP c'est le bordel quoi je fasse xDD
Heureusement que vous êtes là pour comprendre les bugs toutes les deux °^°
Heureusement que vous êtes là pour comprendre les bugs toutes les deux °^°
Permission de ce forum:
Vous pouvez répondre aux sujets dans ce forum|
|
|