Personnaliser le Bouton Retour en haut de page

Dans le site de démonstration, Purity III n'a pas de bouton "Retour en haut de page", mais vous pouvez ajouter le bouton à votre site. Pour ce guide, vous pouvez également vous référer à la documentation de T3, il est le même pour tous les templates développés avec le framework T3.

http://t3-framework.org/documentation/bs3-customization#back-to-top

Étape 1: activez le bouton "Retour vers le haut"

Pour ajouter ce bouton dans votre site, ouvrez le fichier templates/t3_bs3_blank/tpls/blocks/footer.php puis ajoutez le code suivant au fichier.

<!-- BACK TOP TOP BUTTON --> <div id="back-to-top" data-spy="affix" data-offset-top="300" class="back-to-top hidden-xs hidden-sm affix-top">   <button class="btn btn-primary" title="Back to Top"><i class="fa fa-angle-up"></i></button> </div>   <script type="text/javascript"> (function($) {      // Back to top  $('#back-to-top').on('click', function(){               $("html, body").animate({scrollTop: 0}, 500);           return false;   }); })(jQuery); </script> <!-- BACK TO TOP BUTTON -->

Etape 2: ajoutez du style au bouton"Retour vers le haut"

Ouvrez le fichier templates/t3_bs3_blank/less/style.less puis ajouter la règle de style :

// Back to Top// -----------#back-to-top {  position: fixed;  right: @t3-global-margin;  top: auto;  z-index: 999;  display: none;  bottom: -60px;   @media (min-width: @screen-sm-min) {    display: block;  }   .btn {    background: none;    border: 2px solid @brand-primary;    color: @brand-primary;    height: 40px;    width: 40px;    border-radius: 50%;    line-height: 1;    padding: 0;    text-align: center;    .opacity(0.7);    .transition(0.2s);     &:hover, &:active, &:focus {      background: none;      outline: none;      .opacity(1);    }  }   &.affix {    bottom: @t3-global-margin * 2;  }   a {    outline: none;  }   i {    font-size: @font-size-large + 10;    line-height: 22px;  }}

 

Sauvegarder
Choix utilisateur pour les Cookies
Nous utilisons des cookies afin de vous proposer les meilleurs services possibles. Si vous déclinez l'utilisation de ces cookies, le site web pourrait ne pas fonctionner correctement.
Tout accepter
Tout décliner
Fonctionnels