Communauté francophone - Jimdo
Bienvenue sur le nouveau forum de discussion officiel de la communauté francophone des utilisateurs de Jimdo.

Ce forum annule et remplace le précédent forum Jimdo, qui a malheureusement dû être fermé pour raisons techniques.

Vous avez un ou plusieurs sites Jimdo ? Enregistrez vous sur le forum, posez vos questions et prenez part aux discussions !

Vous êtes simple visiteur ? Vous pouvez consulter nos pages, mais vous ne pourrez pas laisser de message.

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

Voir le sujet précédent Voir le sujet suivant Aller en bas

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

Message par Solie le Lun 25 Avr 2016 - 7:10

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
avatar
Solie

Messages : 513
Date d'inscription : 06/05/2015

http://www.voixoff.com

Revenir en haut Aller en bas

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

Message par FredVig le Lun 25 Avr 2016 - 9:37

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 ?

_________________
'Expert' Jimdo affilié, bénévole du forum et indépendant rémunéré par mes clients.
avatar
FredVig

Messages : 1882
Date d'inscription : 07/10/2014

http://fredvig.com

Revenir en haut Aller en bas

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

Message par Solie le Lun 25 Avr 2016 - 10:41

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).
avatar
Solie

Messages : 513
Date d'inscription : 06/05/2015

http://www.voixoff.com

Revenir en haut Aller en bas

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

Message par FredVig le Lun 25 Avr 2016 - 13:51

Parfait ! merci pour le tuto.

_________________
'Expert' Jimdo affilié, bénévole du forum et indépendant rémunéré par mes clients.
avatar
FredVig

Messages : 1882
Date d'inscription : 07/10/2014

http://fredvig.com

Revenir en haut Aller en bas

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

Message par Contenu sponsorisé


Contenu sponsorisé


Revenir en haut Aller en bas

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum