[Résolu] Remplacer l'image du bouton retour vers le haut
2 participants
Page 1 sur 1
[Résolu] Remplacer l'image du bouton retour vers le haut
Hello les amis !
Pour ce site, je souhaiterais remplacer l'image du bouton retour vers le haut par une image perso.
Voici les résultats trouvés :
.cc-FloatingButtonBarContainer .cc-FloatingButtonBarContainer-button-scroll span {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAMAAAAM7l6QAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABmUExURQAAAP///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////5WfaagAAAAhdFJOUwCNiZgQzB2E+vF9up/A0OpNdAWUawZoXLTHMfTkPzUXRrNwbC0AAAB0SURBVCjP7dJJDoMwDAVQA4WEhKllaJn5978kLkIVUQML2PJXtp7tlYnuXM3D898H+gFktasa3xR2HWMgTSTwtGngA21GEe8ru4YZUemxiz9NWKelzNndl8l8M+3X2uFJ1+Qa3fBrBKBNVnGz6YR07h85nxmEZAcBhovpBwAAAABJRU5ErkJggg==) center center repeat-y;}
Alors j'ai tenté ceci :
Mon image se superpose avec l'image noire de Jimdo qui reste visible
Pour ce site, je souhaiterais remplacer l'image du bouton retour vers le haut par une image perso.
Voici les résultats trouvés :
.cc-FloatingButtonBarContainer .cc-FloatingButtonBarContainer-button-scroll span {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAMAAAAM7l6QAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABmUExURQAAAP///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////5WfaagAAAAhdFJOUwCNiZgQzB2E+vF9up/A0OpNdAWUawZoXLTHMfTkPzUXRrNwbC0AAAB0SURBVCjP7dJJDoMwDAVQA4WEhKllaJn5978kLkIVUQML2PJXtp7tlYnuXM3D898H+gFktasa3xR2HWMgTSTwtGngA21GEe8ru4YZUemxiz9NWKelzNndl8l8M+3X2uFJ1+Qa3fBrBKBNVnGz6YR07h85nxmEZAcBhovpBwAAAABJRU5ErkJggg==) center center repeat-y;}
Alors j'ai tenté ceci :
- Code:
<style type="text/css">
/*<![CDATA[*/
/*remplacer image retour vers le haut*/
.cc-FloatingButtonBarContainer .cc-FloatingButtonBarContainer-button-scroll span {
background: url("https://image.jimcdn.com/app/cms/image/transf/none/path/sc222fcd30ab1fe50/image/i922f435c81096377/version/1460997416/image.png") center center repeat-y;}
/*]]>*/
</style>
Mon image se superpose avec l'image noire de Jimdo qui reste visible
Dernière édition par Solie le Mer 20 Avr 2016 - 18:34, édité 1 fois (Raison : ajout de la balise [Résolu])
Re: [Résolu] Remplacer l'image du bouton retour vers le haut
ça me semble bon, il te manque un
- Code:
.cc-FloatingButtonBarContainer .cc-FloatingButtonBarContainer-button-scroll span{background-size :170%!important;}
.cc-FloatingButtonBarContainer li a{background:rgba(0,0,0,0)!important;}
Re: [Résolu] Remplacer l'image du bouton retour vers le haut
Merci Fred, le noir est parti.
Il restait un filtre blanc ainsi qu'une bordure blanche en radius.
Le shadow de mon bouton scroll up était rogné sur les cotés à cause de la taille trop petite du container (Il faut dire que je n'avais pas pensé à réaliser une image carrée ! ). J'ai réussi péniblement à régler les deux derniers problèmes.
Voici mon code actuel..
Le filtre clair (opacity ?) qui délave à fond la couleur de mon bouton n'apparaît qu'en affichage normal. Au passage de la souris, c'est ok. Impossible pour moi de virer ce fichu filtre.
Il restait un filtre blanc ainsi qu'une bordure blanche en radius.
Le shadow de mon bouton scroll up était rogné sur les cotés à cause de la taille trop petite du container (Il faut dire que je n'avais pas pensé à réaliser une image carrée ! ). J'ai réussi péniblement à régler les deux derniers problèmes.
Voici mon code actuel..
- Code:
<style type="text/css">
/*<![CDATA[*/
/*remplacer image retour vers le haut*/
.cc-FloatingButtonBarContainer .cc-FloatingButtonBarContainer-button-scroll span {
background: url("https://image.jimcdn.com/app/cms/image/transf/none/path/sc222fcd30ab1fe50/image/i922f435c81096377/version/1460997416/image.png") center center repeat-y;}
.cc-FloatingButtonBarContainer .cc-FloatingButtonBarContainer-button-scroll span{background-size :100%!important;}
.cc-FloatingButtonBarContainer li a{background-color:rgba(0,0,0,0)!important; border:0px !important;}
.cc-FloatingButtonBarContainer li a span {height: 60px; width: 60px !important;}
/*]]>*/
</style>
Le filtre clair (opacity ?) qui délave à fond la couleur de mon bouton n'apparaît qu'en affichage normal. Au passage de la souris, c'est ok. Impossible pour moi de virer ce fichu filtre.
Dernière édition par Solie le Mer 20 Avr 2016 - 18:13, édité 1 fois
Re: [Résolu] Remplacer l'image du bouton retour vers le haut
Finalement, j'ai réussi !
--------
Par contre, il faudrait que je puisse supprimer la répétition de l'image une fois le clic effectué sur tactile.
Si je retire "center center repeat-y;", l'image n'est plus centrée
- Code:
<style type="text/css">
/*<![CDATA[*/
/*remplacer image retour vers le haut*/
.cc-FloatingButtonBarContainer .cc-FloatingButtonBarContainer-button-scroll span {
background: url("https://image.jimcdn.com/app/cms/image/transf/none/path/sc222fcd30ab1fe50/image/i922f435c81096377/version/1460997416/image.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 {height: 60px; width: 60px ; opacity: 1;}
/*]]>*/
</style>
--------
Par contre, il faudrait que je puisse supprimer la répétition de l'image une fois le clic effectué sur tactile.
Si je retire "center center repeat-y;", l'image n'est plus centrée
Dernière édition par Solie le Mer 20 Avr 2016 - 18:17, édité 1 fois
Re: [Résolu] Remplacer l'image du bouton retour vers le haut
Bien joué Solie !
(une pensée fraternelle aux "ceusses" qui vont désespérément cliquer sur les photos de la page d'accueil de Solange pour les voir en grand…)
(une pensée fraternelle aux "ceusses" qui vont désespérément cliquer sur les photos de la page d'accueil de Solange pour les voir en grand…)
Re: [Résolu] Remplacer l'image du bouton retour vers le haut
Aide-moi à enlever le repeat, s'il te plaît...
Re: [Résolu] Remplacer l'image du bouton retour vers le haut
As-tu essayé de le remplacer par no-repeat ?
(je suis un peu inquiet : je ne le vois plus du tout sur la prévisu ipod-touch de safari ?
(je suis un peu inquiet : je ne le vois plus du tout sur la prévisu ipod-touch de safari ?
Dernière édition par FredVig le Mer 20 Avr 2016 - 9:17, édité 1 fois
Re: [Résolu] Remplacer l'image du bouton retour vers le haut
Hum… ne fonctionne pas sous Safari en effet !
Re: [Résolu] Remplacer l'image du bouton retour vers le haut
Sur Firefox non plus sur mon vieux PC.
Cet affichage est un résidu de l'animation JS visible Chrome, on dirait. Qui entre-nous est un peu has been ! Jimdo devrait proposer un léger smoth.
Je l'écris comment ? center center no-repeat ?
Cet affichage est un résidu de l'animation JS visible Chrome, on dirait. Qui entre-nous est un peu has been ! Jimdo devrait proposer un léger smoth.
Je l'écris comment ? center center no-repeat ?
Re: [Résolu] Remplacer l'image du bouton retour vers le haut
Dans ce code
- Code:
{background: url("https://image.jimcdn.com/app/cms/image/transf/none/path/sc222fcd30ab1fe50/image/i922f435c81096377/version/1460997416/image.png") center center repeat-y;}
Re: [Résolu] Remplacer l'image du bouton retour vers le haut
Oui : center center no-repat
background est une propriété qui peut inclure d'autres propriétés (background-size, -origin, etc…)
background est une propriété qui peut inclure d'autres propriétés (background-size, -origin, etc…)
Re: [Résolu] Remplacer l'image du bouton retour vers le haut
Ce que tu devrais essayer, c'est de reprendre tes codes CSS et de les passer à "l'auto-prefixer", il vérifie qu'il n'y en a pas en trop, et rajoute les préfixes nécessaires pour les navigateurs les plus courants :
préfixes pour les navigateurs
préfixes pour les navigateurs
Re: [Résolu] Remplacer l'image du bouton retour vers le haut
Ah bé non... En fait, ce repeat, il a l'air de servir à répéter le processus. Tu cliques sur le scroll up, tu vas sur cc-inner (top de page), et là, le bouton scroll up revient. Parce que je viens de mettre center center no-repeat, et le bouton ne réapparaît pas après scroll up. Il faut recharger la page pour le voir de nouveau...
J'imagine que la seule solution serait de supprimer la partie d'animation moche du code JS de Jimdo (les flèches qui défilent et qui montent, visibles sur Chrome), mais on n'a pas accès à la totalité du code iframe avec l'inspecteur.
Tant pis, je vais laisser comme ça Si j'ai la patience, j'essaierai de rechercher une jolie animation JS "scroll top" sur le net.
NB / Bonne idée ! J'ai grand besoin de nettoyer mes codes en doublon.
J'imagine que la seule solution serait de supprimer la partie d'animation moche du code JS de Jimdo (les flèches qui défilent et qui montent, visibles sur Chrome), mais on n'a pas accès à la totalité du code iframe avec l'inspecteur.
Tant pis, je vais laisser comme ça Si j'ai la patience, j'essaierai de rechercher une jolie animation JS "scroll top" sur le net.
NB / Bonne idée ! J'ai grand besoin de nettoyer mes codes en doublon.
Re: [Résolu] Remplacer l'image du bouton retour vers le haut
hum… donc il faut garder le repeat, et corriger d'une autre façon. Il est possible que sur le navigateur où tu as la répétition de background visible, une des valeurs du background est mal interprétée. Sans doute (justement) le background-position.
Le principe est de conserver ce qui fonctionnait avant, et de ne remplacer que l'image.
Tu pourrais vérifier d'abord la dimension de ton image, il faut qu'elle soit identique à celle d'origine.
Ensuite, tu peux la placer en DATA URI, comme l'image de base : c'est un peu particulier et bien expliqué ici :
http://www.alsacreations.com/article/lire/1439-data-uri-schema.html
Le principe est de conserver ce qui fonctionnait avant, et de ne remplacer que l'image.
Tu pourrais vérifier d'abord la dimension de ton image, il faut qu'elle soit identique à celle d'origine.
Ensuite, tu peux la placer en DATA URI, comme l'image de base : c'est un peu particulier et bien expliqué ici :
http://www.alsacreations.com/article/lire/1439-data-uri-schema.html
Re: [Résolu] Remplacer l'image du bouton retour vers le haut
Houla, elle est énorme mon image d'origine ! Je ne sais pas travailler en mini. Il va falloir que je la refasse...
Oui, tu dois être sur la bonne piste, parce qu'avec le bouton d'origine de Jimdo, je n'ai pas "deux flèches" après clic tactile. Je vais me pencher sur mes colonnes qui ne sont plus en pleine largeur avec ce design, et je reprendrai tout ça.
Je suis contente déjà, ce bouton passe bien mieux avec le style attribué à la navigation.
Merci beaucoup pour ton aide
Oui, tu dois être sur la bonne piste, parce qu'avec le bouton d'origine de Jimdo, je n'ai pas "deux flèches" après clic tactile. Je vais me pencher sur mes colonnes qui ne sont plus en pleine largeur avec ce design, et je reprendrai tout ça.
Je suis contente déjà, ce bouton passe bien mieux avec le style attribué à la navigation.
Merci beaucoup pour ton aide
Re: [Résolu] Remplacer l'image du bouton retour vers le haut
De rien
(Et il faut absolument quelque chose pour ces portraits qui ne renvoient pas sur des hautes définitions…
(Et il faut absolument quelque chose pour ces portraits qui ne renvoient pas sur des hautes définitions…
Re: [Résolu] Remplacer l'image du bouton retour vers le haut
Je t'enverrai un poster dédicacé !!! ^^
C'était bien un souci dans les proportions. J'ai fabriqué de petites icônes en format carré et tout va bien.
Voici mon code final :
Si vous êtes intéressé, ça marche pour tous les sites:
- Activez dans "Paramètres" le bouton "Retour vers le haut" et enregistrez.
- Remplacez l'adresse url "https://xxxxxx.png" du code par l'adresse de votre image.
- Mettez votre code dans "Modifier le head".
C'était bien un souci dans les proportions. J'ai fabriqué de petites icônes en format carré et tout va bien.
Voici mon code final :
- Code:
<style type="text/css">
/*<![CDATA[*/
/*Remplacer image retour vers le haut par Scroll up blanc rond*/
.cc-FloatingButtonBarContainer .cc-FloatingButtonBarContainer-button-scroll span {
background: url("https://image.jimcdn.com/app/cms/image/transf/dimension=43x10000:format=png/path/sc222fcd30ab1fe50/image/i22b0c6d8d004056c/version/1461213471/image.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>
Si vous êtes intéressé, ça marche pour tous les sites:
- Activez dans "Paramètres" le bouton "Retour vers le haut" et enregistrez.
- Remplacez l'adresse url "https://xxxxxx.png" du code par l'adresse de votre image.
- Mettez votre code dans "Modifier le head".
Re: [Résolu] Remplacer l'image du bouton retour vers le haut
Ne te reste plus qu'à écrire un post pour la rubrique "tuto"
Sujets similaires
» [Résolu] Bouton retour vers le haut
» Tutoriel : Remplacer l'icône retour vers le haut
» Bouton lien vers un n° de tél. [resolu]
» [Résolu] Modifier un bouton d'action et un bouton télécharger
» Déplacer le logo vers le haut
» Tutoriel : Remplacer l'icône retour vers le haut
» Bouton lien vers un n° de tél. [resolu]
» [Résolu] Modifier un bouton d'action et un bouton télécharger
» Déplacer le logo vers le haut
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum