Styler l'ascenseur de Jimdo

23 avril 2013 : Jimdo a complètement modifié le code, le nom, la CSS et le fonctionnement du bouton de retour en haut aujourd'hui. Les codes donnés ci-dessous ne fonctionnent donc plus. Ils doivent être mis à jour. J'étudie le nouveau fonctionnement du bouton pour voir comment mettre à jour ce tutoriel.

Depuis quelque temps, Jimdo propose un bouton "Vers le haut" à ses utilisateurs : plus besoin d'installer d'ascenseur ni de retour en haut de page comme je vous le proposais dans ces tutoriels. Jimdo a tout prévu... our presque, puisqu'on ne peut pas choisir l'apparence de ce bouton : et si on le préfère rond ? Et si on n'aime pas l'animation de la flèche blanche ? Et si on veut qu'il soit rouge plutôt que gris ? Et si on préfère un gros bouton ? Et si... ?

 

Alors, comment "revamper" le bouton de Jimdo ? Première bonne nouvelle : c'est possible. Deuxième bonne nouvelle : c'est d'ailleurs ce que je vous propose dans ce tutoriel. Troisème bonne nouvelle : je vous ai mâché le travail. Je vous propose donc une quinzaine de codes prêts à l'emploi, et, pour les plus exigeants, un guide de customisation complet.

Démonstration du résultat

Vous en avez une ici-même : si vous faites défiler la page sur laquelle vous vous trouvez, vous voyez apparaître, dans le coin inférieur droit de la fenêtre, un bouton de remontée. Il s'agit du bouton "Vers le haut" de Jimdo que j'ai customisé :

J'ai ajouté un petit effet au survol de la souris
J'ai ajouté un petit effet au survol de la souris
Flèche vers le haut

Installation du bouton en trois étapes

L'installation est facile et se fait en 3 étapes : d'abord, vous activez le bouton dans l'administration de votre site. Ensuite, vous choisissez un design parmi ceux que je vous propose. Enfin, vous insérez le code fourni dans Jimdo par un simple copier-coller.

Etape 1 : activer le bouton dans Jimdo

D'abord, on active le bouton dans Jimdo. Pour cela, cliquez, dans la barre d'administration de votre site, sur Paramètres > Bouton "Vers le haut"

Cliquez sur l'icône Bouton 'Vers le haut'
Cliquez sur l'icône Bouton 'Vers le haut'

Dans la fenêtre qui s'affiche, cochez "Afficher le bouton" et choisissez sa position (à droite ou à gauche). Appuyez sur pour valider le changement.

Votre bouton apparaît déjà : c'est un petit carré gris orné d'une flèche blanche. Au survol de la souris, celle-ci s'anime et le bouton s'opacifie :

Etape 2 : choisir un design pour le bouton

Les codes fournis exploitent des propriétés CSS3 reconnues par les navigateurs modernes (Safari, Firefox, Chrome, Opera... ) mais pas par Internet Explorer. Les modifications ne seront donc pas visibles sur IE, (sauf celles de la série 1 qui sont "universelles").

Ce bouton fonctionne bien, donc nous allons seulement modifier son aspectJe vous propose 5 séries de designs : faites tranquillement votre marché. Si vous êtes pressé ou novice, optez pour un code prêt à l'emploi : un simple copier-coller et voilà ! Sinon, prenez le temps de le personnaliser avec la couleur et la taille de votre choix.

Le colorpicker pour personnaliser les couleurs

Etape 3 : insérer le code fourni dans Jimdo

Une fois que vous avez choisi (et éventuellement personnalisé) votre code, cliquez, dans la barre d'admin de votre site, sur Paramètres > Modier le head. Copiez-collez le code dans la fenêtre de saisie qui apparaît :

Cliquez sur et repassez en mode Aperçu pour voir le résultat.

Flèche vers le haut

Série 1 : changer juste la couleur et la taille du bouton

En utilisant un des codes ci-dessous, nous allons modifier la couleur de fond du bouton de défilement vers le haut de Jimdo, ainsi que sa taille (je trouve en effet que le bouton par défaut que propose Jimdo est un peu petit). L'animation de la flèche sur le bouton est conservée. Cette modification est mineure, facile à faire et à personnaliser.

Exemple 1 : un bouton gris agrandi

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

#cc-scrolltotop-button {
background: grey !important; /* Choisissez ici la couleur de votre bouton */
padding: 6px !important; /* Indiquez en pixels la taille de votre bouton */
}

#cc-scrolltotop-button span {
background: url(http://s.jimdo.com/s/img/scrolltotop/transparent.png) center repeat-y !important;
}

/*]]>*/
</style>

Exemple 2 : un bouton bleu-vert agrandi

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

#cc-scrolltotop-button {
background: #7BB0B3 !important; /* Ici le bouton est bleu-vert */
padding: 8px !important; /* Il mesure 8 pixels de large */
}

#cc-scrolltotop-button span {
background: url(http://s.jimdo.com/s/img/scrolltotop/transparent.png) center repeat-y;
}

/*]]>*/
</style>

Comment personnaliser le code ?

J'ai commenté le code pour que vous vous y retrouviez. Vous pouvez modifier :

  • la couleur du bouton, sur la ligne background: #xxxxxx !important. Ne modifiez que ce qui est en orange. Il vous faut entrer la valeur hexadécimale de la couleur que vous voulez. Utilisez le colorpicker pour cela.
  • la taille du bouton sur la ligne padding: 8px !important. Remplacez le 8 par une valeur plus grande à votre guise : 10 ou 12 par exemple.
Flèche vers le haut

Série 2 : boutons ronds avec ombre animée au survol

Ce code revisite le modèle natif proposé par Jimdo. En effet, on supprime l'animation de la flèche au profit d'un effet d'ombre animée au survol de la souris et on arrondit le bouton (pour tous les navigateurs modernes sauf Internet Explorer naturellement... ). C'est l'option que j'ai choisie pour ce site : faites défiler la page, jusqu'à ce qu'apparaisse le bouton dans le coin inférieur droit de la fenêtre ; passez-y la souris : le bouton s'opacifie graduellement et son ombre s'anime discrètement.

Modèle n°1 : gris foncé

Voir le code

Modèle n°2 : orange

Voir le code

Modèle n°3 : vert

Voir le code

Modèle n°4 : fushia et plus gros

Voir le code

Modèle n°5 : rouge et plus petit

Voir le code
Flèche vers le haut

Série 3 : boutons ronds avec halo blanc animé au survol

Ce code revisite également le modèle natif proposé par Jimdo. En effet, on supprime l'animation de la flèche au profit d'un effet de halo blanc animé au survol de la souris et on arrondit le bouton (pour tous les navigateurs modernes sauf Internet Explorer naturellement... ) Quand la souris passe sur le bouton, graduellement le bouton s'opacifie et un discret halo blanc s'en dégage.

Modèle n°6 : orange

Voir le code

Modèle n°7 : bleu-vert

Voir le code

Modèle n°8 : vert pomme, encore plus petit

Voir le code
Flèche vers le haut

Série 4 : boutons carrés avec ombre animée au survol

Ce code revisite partiellement le modèle natif proposé par Jimdo. En effet, on supprime l'animation de la flèche au profit d'un effet d'ombre animée au survol de la souris. On garde la forme carrée du bouton mais en arrondissant ses angles (pour tous les navigateurs modernes sauf Internet Explorer naturellement... ). Quand la souris passe sur le bouton, celui-ci s'opacifie graduellement et son ombre s'anime discrètement.

Modèle n°9 : noir

Voir le code

Modèle n°10 : noir, moins arrondi

Voir le code

Modèle n°11 : bleu

Voir le code

Modèle n°12 : rose, plus petit

Voir le code
Flèche vers le haut

Série 5 : boutons carrés avec halo blanc animé au survol

Ce code revisite partiellement le modèle natif proposé par Jimdo. En effet, on supprime l'animation de la flèche au profit d'un effet de halo blanc au survol de la souris. On garde la forme carrée du bouton mais en arrondissant très légèrement ses angles (pour tous les navigateurs modernes sauf Internet Explorer naturellement... ). Quand la souris passe sur le bouton, graduellement il s'opacifie et un léger halo blanc s'en dégage.

Modèle n°13 : turquoise

Voir le code

Modèle 14 : violet

Voir le code

Modèle 15 : gris foncé

Voir le code
Flèche vers le haut

Comment faire son propre bouton ?

Choisissez le bouton dont l'aspect (surtout la taille) se rapproche le plus de ce que vous souhaitez : c'est son code que vous allez travailler en vue de le personnaliser.

Choisir la couleur

Choisissez votre propre couleur de bouton. Vous devez modifier conjointement deux éléments :

  • la couleur du bouton, sur la ligne background: #xxxxxx !important. Ne modifiez que ce qui est en orange. Il vous faut entrer la valeur hexadécimale de la couleur que vous voulez. Utilisez le valeur hexadécimale de la couleur que vous voulez. Utilisez le colorpicker pour cela.
  • la couleur transparente du bouton, sur la ligne background: rgba(51, 51, 51, 0.7) !important. Ne modifiez que ce qui est en orange. Pour cela, utilisez cet outil de conversion :
    • Entrez le code de la couleur que vous avez choisie plus haut (#xxxxxx)
    • Réglez l'opacité sur 70%.
    • Appuyez sur le bouton pour récupérer la traduction rgba de votre couleur sous la forme rgba(x, x, x, 0.7)
Convertisseur de code couleur en rgba
Convertisseur de code couleur en rgba

Choisir la taille du bouton

Vous pouvez fixer votre propre taille de bouton en modifiant la valeur (en orange) dans cette portion de code :

#cc-scrolltotop-button span {
height: 50px !important;
width: 50px !important;
...
}

Choisir l'ombre ou le halo

Vous pouvez choisir la taille (en orange) et la couleur de l'ombre ou du halo (en vert) autour du bouton au repos, en modifiant ces lignes :

#cc-scrolltotop-button {
... -webkit-box-shadow: 0 0 6px #777; -moz-box-shadow: 0 0 6px #777; -o-box-shadow: 0 0 6px #777; box-shadow: 0 0 6px #777; }

De même, vous pouvez modifier la taille (en orange) et la couleur de l'ombre ou du halo (en vert) autour du bouton au survol de la souris, en modifiant ces lignes :

#cc-scrolltotop-button:hover {
...
-webkit-box-shadow: 0 0 10px #fff; 
-moz-box-shadow: 0 0 10px #fff; 
-o-box-shadow: 0 0 10px #fff;
box-shadow: 0 0 10px #fff;
}

Notez que la taille de l'ombre / du halo doit être plus grande au survol qu'au repos.

Flèche vers le haut

Option : écarter ou rapprocher le bouton du coin

Ce dernier morceau de code est compatible avec tous les codes précédents. Il sert à modifier la position du bouton par rapport au coin de la fenêtre. Par défaut, le bouton se situe à 60 pixels des deux bords de la fenêtre : il me semble trop éloigné... Avec ce code, que vous pouvez adapter à vos besoins, le bouton peut être rapproché des bords de la fenêtre.

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

#cc-scrolltotop-button {
bottom: 20px !important;
right: 20px;

}
#cc-scrolltotop-button.cc-scrolltotop-left {
left: 20px !important;
}

/*]]>*/
</style>

Dans l'exemple, j'ai choisi de placer mon bouton à 20 pixels des bords de la fenêtre. Vous pouvez opter pour une autre valeur : 18, 26, 35... Dans le code, remplacez la valeur 20 (écrite en orange) par la vôtre (attention, cette valeur doit être répétée 3 fois dans le code).

Des commentaires ?

Écrire commentaire

Commentaires : 4
  • #1

    Siri99 (mercredi, 13 mars 2013 16:31)

    Superbe tutoriels merci ISA !

  • #2

    mathtice31 (mercredi, 03 avril 2013 03:10)

    merci

  • #3

    Rigaud Mickael (mardi, 23 avril 2013 17:40)

    Salut,

    pour moi ça ne fonctionne pas sur chrome. Mais j'ai un design personnel c'est peut-être pour cela.

  • #4

    Isabelle (mardi, 23 avril 2013 21:36)

    Bonsoir !

    En effet, cela ne fonctionne plus non plus chez moi depuis aujourd'hui. Un coup d'oeil au code et je constate que Jimdo a complètement changé les codes et la CSS... Cela dit, cela fonctionnait très bien jusqu'à aujourd'hui, y compris sous Chrome (Win8 et Mac). Il faut donc que je revoie/modifie tous les codes dans le tuto, car Jimdo utilise maintenant une liste à puce UL au lieu d'une DIV...

    Merci de m'avoir prévenue !

Ruban