Documentations et Dossiers [Mini-Tuto] Les flèches back top sur votre PBT L'ascenceur du phpboost !
Bonjour,
Pour commencer, téléchargez l'image ci-dessous et placez la dans le dossier "/templates/VOTRE_THEME/theme/images/sprite_bigNav.png"
Dans le dossier "/templates/VOTRE_THEME/theme/", ouvrez le design. css et tout à la fin placez ce code :
Enregistrez Fermer.
Et pour Finir à la racine de votre thème soit dans le dossier "/templates/VOTRE_THEME/", ouvrez le "footer.tpl" allez à la fin et remplacez ceci :
Et placez ce code
Et voilà, normalement vous devriez avoir ces "petites fléches" comme ascenseur sur votre site..
@imablement swan.
1/ L'image
Pour commencer, téléchargez l'image ci-dessous et placez la dans le dossier "/templates/VOTRE_THEME/theme/images/sprite_bigNav.png"
2/ Le desing.css
Dans le dossier "/templates/VOTRE_THEME/theme/", ouvrez le design. css et tout à la fin placez ce code :
Code CSS :
div#gotop { display: block; position: fixed; right: 60px; /* Positionnement sur la droite de l'image */ top: 150px; /* Positionnement sur la hauteur de l'image */ z-index: 150; /* Priorité sur les couches inférieurs de code ou d'image */ } div#gotop a { background: url("images/sprite_bigNav.png") no-repeat scroll center top transparent; float: left; height: 80px; /* Hauteur de l'image */ opacity: 0.2; /* Réglage de l'opacité de l'image */ width: 80px; /* Largeur de l'image */ } div#gobottom { display: block; position: fixed; right: 60px; /* Positionnement sur la droite de l'image */ top: 238px; /* Positionnement sur la hauteur de l'image */ z-index: 150; /* Priorité sur les couches inférieurs de code ou d'image */ } div#gobottom a { background: url("images/sprite_bigNav.png") no-repeat scroll center bottom transparent; float: left; height: 80px; /* Hauteur de l'image */ opacity: 0.2; /* Réglage de l'opacité de l'image */ width: 80px; /* Largeur de l'image */ }
Enregistrez Fermer.
3/ Le footer.tpl
Et pour Finir à la racine de votre thème soit dans le dossier "/templates/VOTRE_THEME/", ouvrez le "footer.tpl" allez à la fin et remplacez ceci :
Code CSS :
</body> </html>
Et placez ce code
Code CSS :
<div id="gotop" style="display: block;"> <a onclick="new Effect.ScrollTo('top_page',{duration:1.2}); return false;" href="#" id="gotop"></a> </div> <div id="gobottom" style="display: block;"> <a onclick="new Effect.ScrollTo('bottom_page',{duration:1.2}); return false;" href="#" id="gobottom"></a> </div> <div id="bottom_page" /></div> </body> </html>
Et voilà, normalement vous devriez avoir ces "petites fléches" comme ascenseur sur votre site..
@imablement swan.
Bonjour,
J'ai un souci ont ne voit pas les fleche elle sont comme transparante !!
Merci à vous !
EDIT : problème réglé, en faite les images DL ne prenez pas bien le nom : sprite_bigNav
Mais "sprite_bigNav45_5" donc le CSS ne le trouvais pas. Edité par Lucifer Le 28/06/2013 à 21h27
J'ai un souci ont ne voit pas les fleche elle sont comme transparante !!
Merci à vous !
EDIT : problème réglé, en faite les images DL ne prenez pas bien le nom : sprite_bigNav
Mais "sprite_bigNav45_5" donc le CSS ne le trouvais pas. Edité par Lucifer Le 28/06/2013 à 21h27
Répondre
Vous n'êtes pas autorisé à écrire dans cette catégorie