Les forums Forumactif
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
Compteur de visites gratuit
Annonces
CAForum est aussi un forum d'aide pour phpBB. Voici le lien du forum : https://forums.caforum.fr
Vous voulez créer un forum sans publicités tout en étant propriétaire de votre base de données ?
Contactez moi sur le forum !
CAForum infos
Derniers sujets
» » Bouton MP "Répondre" adapté à la version ModernBB
[Edge] Flèches Haut et Bas qui s'adaptent à la couleur du thème Clock-10Mer 31 Jan 2024 - 13:03 par NIK SIURI

» » Réduire la hauteur des catégories
[Edge] Flèches Haut et Bas qui s'adaptent à la couleur du thème Clock-10Mer 31 Jan 2024 - 12:59 par NIK SIURI

» » [AwesomeBB] Ajout d'un bloc de connexion/enregistrement en bas de page
[Edge] Flèches Haut et Bas qui s'adaptent à la couleur du thème Clock-10Mer 31 Jan 2024 - 12:35 par NIK SIURI

» » Afficher les avatars en forme rectangulaire
[Edge] Flèches Haut et Bas qui s'adaptent à la couleur du thème Clock-10Mer 31 Jan 2024 - 11:47 par NIK SIURI

» » Modifier la partie des stats en début de qeel
[Edge] Flèches Haut et Bas qui s'adaptent à la couleur du thème Clock-10Mer 31 Jan 2024 - 11:45 par NIK SIURI

» » Mettre une image au qeel
[Edge] Flèches Haut et Bas qui s'adaptent à la couleur du thème Clock-10Mer 31 Jan 2024 - 11:37 par NIK SIURI

» » Rendre l'image du header cliquable
[Edge] Flèches Haut et Bas qui s'adaptent à la couleur du thème Clock-10Mer 31 Jan 2024 - 11:34 par NIK SIURI

» » Elargir le cadre de la boite de smileys
[Edge] Flèches Haut et Bas qui s'adaptent à la couleur du thème Clock-10Mer 31 Jan 2024 - 11:33 par NIK SIURI

» » [phpBB3] Flèches Haut et Bas qui s'adaptent à la couleur du thème
[Edge] Flèches Haut et Bas qui s'adaptent à la couleur du thème Clock-10Mer 31 Jan 2024 - 10:29 par NIK SIURI

» » Catégories rétractables sur l'index
[Edge] Flèches Haut et Bas qui s'adaptent à la couleur du thème Clock-10Mer 31 Jan 2024 - 10:17 par NIK SIURI

» » [phpBB3] Catégories de différentes couleurs
[Edge] Flèches Haut et Bas qui s'adaptent à la couleur du thème Clock-10Mer 31 Jan 2024 - 10:17 par NIK SIURI

» » [phpBB3] Ajout d'un bloc de connexion/enregistrement en bas de page
[Edge] Flèches Haut et Bas qui s'adaptent à la couleur du thème Clock-10Mer 31 Jan 2024 - 10:07 par NIK SIURI

» » Centrer l'avatar, le pseudo & le rang dans les messages
[Edge] Flèches Haut et Bas qui s'adaptent à la couleur du thème Clock-10Mer 31 Jan 2024 - 10:06 par NIK SIURI

» » Modifier l'icône "On-line"
[Edge] Flèches Haut et Bas qui s'adaptent à la couleur du thème Clock-10Mar 23 Mai 2023 - 19:15 par Kionk

» » Insérer des boutons "Haut" & "Bas" de forum
[Edge] Flèches Haut et Bas qui s'adaptent à la couleur du thème Clock-10Mar 23 Mai 2023 - 11:40 par Kionk

Avril 2024
LunMarMerJeuVenSamDim
1234567
891011121314
15161718192021
22232425262728
2930     

Calendrier Calendrier

Le Deal du moment :
Jeux, jouets et Lego : le deuxième à ...
Voir le deal

[Edge] Flèches Haut et Bas qui s'adaptent à la couleur du thème

Voir le sujet précédent Voir le sujet suivant Aller en bas

Splash

StaffAdmin
StaffAdmin
Splash

MessageSplash Dim 3 Nov 2019 - 11:14

  • MP
  • Zoom
Hi,
Petite astuce qui permet de placer des flèches de navigation Haut et Bas sur votre forum.
La particularité de ces 2 flèches est qu'elles s'adaptent à la couleur du thème du forum.


Direction le template

Panneau d'administration / Affichage /Templates / Général / overall_footer_end


Dans le template overall_footer_end repérez ce bloc :
Code:
{PROTECT_FOOTER}
 </div>
 </div>
 </div>
</div>

Juste après déposez ceci :
Code:
<div id="CAFarrow"><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>  

Pensez à  Enregistrer   et à publier le template modifié en cliquant sur  Valider


Direction le CSS

Panneau d'administration / Affichage / Images et Couleurs / Couleurs / Feuille de style CSS


Mettre ce code à la CSS :
Code:
#CAFarrow {
    align-items: center; /*alignement des flèches*/
    bottom: 80px; /*position par rapport au bas de forum*/
    right: 64px; /*position par rapport à la bordure droite du forum*/
    display: flex; /*affichage des flèches*/
    flex-direction: column;
    font-size: 20px;
    position: fixed;
    width: 20px;
}

Pensez à  Valider 2



:u1:
À bientôt
Bye




  Pour bien réaliser cette astuce
Like a Star @ heaven  Dans cette astuce il est question d'intervenir dans le(s) template(s) pour le(s) modifier et de placer un code à la feuille de style (CSS), si vous n'êtes pas à l'aise avec ces démarches il existe ces tutos d'aide ici :

> Intervenir dans les templates
> La CSS
David1195

StaffModo
StaffModo
David1195

MessageDavid1195 Mar 5 Nov 2019 - 12:32

  • MP
  • Zoom
Merci beaucoup !
chrisnvidia

Membre
Membre
chrisnvidia

Messagechrisnvidia Mar 19 Nov 2019 - 11:44

  • MP
  • Zoom
Merci beaucoup !
Contenu sponsorisé

MessageContenu sponsorisé

  • MP
  • Zoom

Voir le sujet précédent Voir le sujet suivant Revenir en haut

Inscrivez-vous ou connectez-vous pour répondre

Vous devez être membre pour répondre.

Nous rejoindre

Inscrivez-vous pour participer au forum !


Nous rejoindre

Connexion

Vous êtes membre du forum, cliquez ici pour vous connecter.


Connexion

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum