Download NeoFrag
Connection

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

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

38 subjects, 883 replies

Contributors donors
Unread message
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" !
Return
7 participants
21 replies
eResnova

17 subjects, 875 replies

Contributors
Unread message
Non justement :)

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

17 subjects, 132 replies

donors
Unread message
@eResnova je vais me mettre en PLS :(
Gérant de la communauté Inferia Gaming
Vic Vipers

1 subject , 19 replies
Unread message
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 subjects, 132 replies

donors
Unread message
@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 subject , 19 replies
Unread message
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 subject , 19 replies
Unread message
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. ;)
Return