https://www.facebook.com/tr?id=1475801249377226&ev=PixelInitialized
partage

Note de l'utilisateur: 0 / 5

Donnez une note !
0 sur 5 - 0 votes
Merci d'avoir noté cet article.

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;  }}

 

partage