Télécharger NeoFrag
Connexion

[Tuto] - Flèche retour en haut de la page

198 vues
[Tuto] - Flèche retour en haut de la page
Zaekof

38 sujets, 883 réponses

Contributeurs Donateurs
Message non lu
Bonjour à tous,
Aujourd'hui nouveau tuto pour vous montrer comment ajouter/installer une flèche qui remonte en haut du site quand on appuie dessus quand on se trouve en bas ou milieu du site.

Déjà il vous faut créer un overrides comme ceci :

./overrides/themes/dungeon/views/body.tpl.php
/overrides/themes/dungeon/css/style.css

body.tpl.php :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript">
</script>

<script src="http://sd-1.archive-host.com/membres/up/3347790973941088/easing.js" type="text/javascript">
</script>

<script src="http://sd-1.archive-host.com/membres/up/3347790973941088/jqueryuitotop.js" type="text/javascript">
</script>

<script type="text/javascript">
//<![CDATA[
$.noConflict();
jQuery(document).ready(function() {
jQuery().UItoTop({ easingType: 'easeOutQuart' });
});
//]]>
</script>

style.css :

#toTop {
display:none;
text-decoration:none;
position:fixed;
bottom:20px;
right:20px;
overflow:hidden;
width:51px;
height:51px;
border:none;
text-indent:-999px;
background-image: url(http://sd-1.archive-host.com/membres/images/3347790973941088/uitotop.png);
background-repeat: no-repeat;
background-position: left top;

}

#toTopHover {
background:url(http://sd-1.archive-host.com/membres/images/3347790973941088/uitotop.png) no-repeat left -51px;
width:51px;
height:51px;
display:block;
overflow:hidden;
float:left;
opacity: 0;
-moz-opacity: 0;
filter:alpha(opacity=0);
}

#toTop:active, #toTop:focus {
outline:none;
}

archive complète :
https://mega.nz/#!Oxhz3bwL…

Screens :





Si vous avez des problème avec vos background faite comme ceci dans votre css :

body {
background-image: url('<?php echo $NeoFrag->config->dungeon_background ? path($NeoFrag->config->dungeon_background) : '/themes/dungeon/images/backgrounds/default.jpg'; ?>');
"N'arrêtez jamais d'apprendre" !
Retour
7 participants
21 réponses
eResnova

17 sujets, 875 réponses

Contributeurs Staff
Message non lu
Non justement :)

  • ./overrides/themes/default/css/style.css
  • ./overrides/themes/default/views/body.tpl.php
amir_games

17 sujets, 132 réponses

Donateurs
Message non lu
@eResnova je vais me mettre en PLS :(
Gérant de la communauté Inferia Gaming
Vic Vipers

1 sujet, 19 réponses
Message non lu
Pour le chemin d’accès c'est ok, et de mon côté ça marche sans problème pour les deux thèmes. As-tu apporté des modifications aux fichiers style.css et body.tpl.php ou sont-ils d'origines? Si tu le souhaite tu peux me les faire parvenir en mp et je test de mon côté pour voir ce qui cloche.
amir_games

17 sujets, 132 réponses

Donateurs
Message non lu
@Vic Vipers j'ai transférer les fichiers d'origine dans l'override puis j'ai modifier ceux ci comme indiquer dans le tuto.
Gérant de la communauté Inferia Gaming
Vic Vipers

1 sujet, 19 réponses
Message non lu
amir_games, pour ma part le btn apparait immédiatement lorsque la page défile vers le bas pour les deux thèmes. Il doit y avoir une erreur de frappe quelque part ou alors je ne vois pas... A moins de tester tes fichiers moi même je ne vois pas comment t'apporter mon aide. :(
Vic Vipers

1 sujet, 19 réponses
Message non lu
J'ai rencontrer un problème en intégrant un spoiler html pour l'utiliser dans un widget, celui ci utilise également un javascript. L'utilisation du spoiler fonctionne sans problème mais le btn haut de page lui n'apparait plus. Une fois retirer il apparait à nouveau.

J'en est donc conclu à un conflit entre les deux scripts. J'ai réglé ce problème de mon côté, à voir si ce n'est pas la même chose chez toi. ;)
Retour