Laden Sie NeoFrag herunter
Anmelden

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

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

38 Fach, 883 Antworten

Mitwirkende Geber
Ungelesene Nachricht
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" !
Rückkehr
7 Teilnehmer
21 Antworten
eResnova

17 Fach, 875 Antworten

Mitwirkende
Ungelesene Nachricht
Non justement :)

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

17 Fach, 132 Antworten

Geber
Ungelesene Nachricht
@eResnova je vais me mettre en PLS :(
Gérant de la communauté Inferia Gaming
Vic Vipers

1 Fach , 19 Antworten
Ungelesene Nachricht
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 Fach, 132 Antworten

Geber
Ungelesene Nachricht
@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 Fach , 19 Antworten
Ungelesene Nachricht
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 Fach , 19 Antworten
Ungelesene Nachricht
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. ;)
Rückkehr