Tutoriel : Remplacer l'icône retour vers le haut

[Solie]

REMPLACER L'IMAGE DU RETOUR VERS LE HAUT EN 5 ÉTAPES

---

Avant de commencer, vérifiez que la fonction "Retour vers le haut" est bien activée... Paramètres >> Retour vers le haut.
Activez le bouton (à gauche ou à droite), puis enregistrez.


1) Fabriquez (ou recherchez dans Google images) une icône "Scroll Up", "Scroll to Top", "Back to top", assortie à votre site (taille maxi 64px).

2) Hébergez l'image dans une page cachée* de votre site.

3) Visitez votre page cachée et copiez l'adresse de l'image (clic-droit sur icône).

4) Dans le code ci-après, remplacez l'adresse url "https://xxxxxx.png" par l'adresse de votre image.

5) Collez le code dans Modifier le head. 
Paramètres >> Modifier le head.

Code:

<style type="text/css">
/*<![CDATA[*/

/*Remplacer image retour vers le haut par Scroll up perso*/

.cc-FloatingButtonBarContainer .cc-FloatingButtonBarContainer-button-scroll span {
    background: url("https://xxxxxxxxxAdresseDeVotreimage.png") center center repeat-y;}
    .cc-FloatingButtonBarContainer .cc-FloatingButtonBarContainer-button-scroll span{background-size :100%;}
    .cc-FloatingButtonBarContainer li a{background-color:rgba(0,0,0,0); border:0px;}
.cc-FloatingButtonBarContainer li a span {opacity: 0.9;}

/*]]>*/
</style>

Exemples:






Démo :
Cliquez pour voir la démo avec le Smooth scroll to top Jimdo.



Le présent tutoriel fait suite au topic Remplacer l'image du bouton retour vers le haut.



* Aide Jimdo
Cacher une page http://aide.jimdo.com/basiques/présentation/navigation/#cacher
Vidéo

[FredVig]

Merci Solie !
Est-il nécessaire de préciser que la nouvelle image doit avoir les m^mes dimensions que l'ancienne ?
Autre question : penses-tu que la classe à modifier est toujours la même sur tous les sites ?

[Solie]

L'image Jimdo est à 64px. Et si la taille de la nouvelle est égale ou inférieure, ça fonctionne très bien.

Pour la deuxième question, on dirait bien. J'ai testé le code avec les designs Malaga, Rome, Miami, et ça fonctionne nickel (voir exemples).

[FredVig]

Parfait ! merci pour le tuto.

[Contenu sponsorisé]