Scarica NeoFrag
registrati

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

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

38 soggetti, 883 risposte

Hanno contribuito donatori
Messaggio non letto
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" !
ritorno
7 partecipanti
21 risposte
eResnova

17 soggetti, 875 risposte

Hanno contribuito
Messaggio non letto
Non justement :)

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

17 soggetti, 132 risposte

donatori
Messaggio non letto
@eResnova je vais me mettre en PLS :(
Gérant de la communauté Inferia Gaming
Vic Vipers

1 soggetto , 19 risposte
Messaggio non letto
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 soggetti, 132 risposte

donatori
Messaggio non letto
@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 soggetto , 19 risposte
Messaggio non letto
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 soggetto , 19 risposte
Messaggio non letto
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. ;)
ritorno