Easy-Design.Net forum




Documentations et Dossiers [Mini-Tuto] Les flèches back top sur votre PBT L'ascenceur du phpboost !

Swan Membre non connecté

Administrateur

Rang

Avatar

Inscrit le : 01/08/2009 à 22h53

Messages: 8431

Le 06/03/2013 à 15h27
Bonjour,

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.




swan_signature

Site web    
hight_tower Membre non connecté

Modérateur

Rang

Avatar

Modérateur(s)

Inscrit le : 17/09/2009 à 11h09

Messages: 2298

Le 06/03/2013 à 15h35
Merci pour ce tutoriel, euh je veux dire mini-tutoriel :p

:top Edité par hight_tower Le 06/03/2013 à 15h35



Chez Swan Site design Web phpboost3. Membre depuis 2009 & modérateur depuis 2011.
Pinky Membre non connecté

EDN Curieux(se)

Rang

Avatar

Inscrit le : 05/03/2013 à 19h27

Messages: 48

Le 06/03/2013 à 15h51
Merci Swan d'avoir pris le temps de nous faire ce mini-tutos ^^ !! Formidable.


Ma version de Phpboost: V4



Site web    
Lucifer Membre non connecté

EDN actif(ve)

Rang

Avatar

Inscrit le : 28/06/2013 à 13h51

Messages: 24

Le 28/06/2013 à 21h08
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
Site web    
Swan Membre non connecté

Administrateur

Rang

Avatar

Inscrit le : 01/08/2009 à 22h53

Messages: 8431

Le 29/06/2013 à 00h36
Bien ^^


swan_signature

Site web    
Répondre
Vous n'êtes pas autorisé à écrire dans cette catégorie