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.

[Résolu] Remplacer l'image du bouton retour vers le haut

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

[Résolu] Remplacer l'image du bouton retour vers le haut

Message par Solie le Lun 18 Avr 2016 - 20:21

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 :
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 Crying or Very sad


Dernière édition par Solie le Mer 20 Avr 2016 - 18:34, édité 1 fois (Raison : ajout de la balise [Résolu])
avatar
Solie

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

http://www.voixoff.com

Revenir en haut Aller en bas

Re: [Résolu] Remplacer l'image du bouton retour vers le haut

Message par FredVig le Mar 19 Avr 2016 - 16:55

ç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;}

_________________
Les codes de ce forum ne sont valables que pour UN site précis, à une date précise. Inutile de les essayer sans comprendre comment cela fonctionne.
Si vous avez apprécié mon aide, aidez en retour.
Acupuncture Bordeaux - Tailam (école Arts Martiaux) - MTC Tours - Maison des arts martiaux Tours L'étape à pâtes (Restaurant)Association Bohaires de Gasconha
avatar
FredVig

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

http://fredvig.com

Revenir en haut Aller en bas

Re: [Résolu] Remplacer l'image du bouton retour vers le haut

Message par Solie le Mer 20 Avr 2016 - 7:33

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

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

http://www.voixoff.com

Revenir en haut Aller en bas

Re: [Résolu] Remplacer l'image du bouton retour vers le haut

Message par Solie le Mer 20 Avr 2016 - 8:08

Finalement, j'ai réussi !



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 Neutral


Dernière édition par Solie le Mer 20 Avr 2016 - 18:17, édité 1 fois
avatar
Solie

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

http://www.voixoff.com

Revenir en haut Aller en bas

Re: [Résolu] Remplacer l'image du bouton retour vers le haut

Message par FredVig le Mer 20 Avr 2016 - 8:44

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…) Embarassed

_________________
Les codes de ce forum ne sont valables que pour UN site précis, à une date précise. Inutile de les essayer sans comprendre comment cela fonctionne.
Si vous avez apprécié mon aide, aidez en retour.
Acupuncture Bordeaux - Tailam (école Arts Martiaux) - MTC Tours - Maison des arts martiaux Tours L'étape à pâtes (Restaurant)Association Bohaires de Gasconha
avatar
FredVig

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

http://fredvig.com

Revenir en haut Aller en bas

Re: [Résolu] Remplacer l'image du bouton retour vers le haut

Message par Solie le Mer 20 Avr 2016 - 8:53

tongue Wink
Aide-moi à enlever le repeat, s'il te plaît...
avatar
Solie

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

http://www.voixoff.com

Revenir en haut Aller en bas

Re: [Résolu] Remplacer l'image du bouton retour vers le haut

Message par FredVig le Mer 20 Avr 2016 - 9:09

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 ?


Dernière édition par FredVig le Mer 20 Avr 2016 - 9:17, édité 1 fois

_________________
Les codes de ce forum ne sont valables que pour UN site précis, à une date précise. Inutile de les essayer sans comprendre comment cela fonctionne.
Si vous avez apprécié mon aide, aidez en retour.
Acupuncture Bordeaux - Tailam (école Arts Martiaux) - MTC Tours - Maison des arts martiaux Tours L'étape à pâtes (Restaurant)Association Bohaires de Gasconha
avatar
FredVig

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

http://fredvig.com

Revenir en haut Aller en bas

Re: [Résolu] Remplacer l'image du bouton retour vers le haut

Message par FredVig le Mer 20 Avr 2016 - 9:16

Hum… ne fonctionne pas sous Safari en effet !

_________________
Les codes de ce forum ne sont valables que pour UN site précis, à une date précise. Inutile de les essayer sans comprendre comment cela fonctionne.
Si vous avez apprécié mon aide, aidez en retour.
Acupuncture Bordeaux - Tailam (école Arts Martiaux) - MTC Tours - Maison des arts martiaux Tours L'étape à pâtes (Restaurant)Association Bohaires de Gasconha
avatar
FredVig

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

http://fredvig.com

Revenir en haut Aller en bas

Re: [Résolu] Remplacer l'image du bouton retour vers le haut

Message par Solie le Mer 20 Avr 2016 - 9:20

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

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

http://www.voixoff.com

Revenir en haut Aller en bas

Re: [Résolu] Remplacer l'image du bouton retour vers le haut

Message par FredVig le Mer 20 Avr 2016 - 9:20

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;}
Center center, c'est le background-position, l'emplacement initial de l’arrière-plan, il faut conserver cette indication ou la modifier pour positionner l'A-P. repeat-y indique de répéter verticalement le background. par défaut c'est répétition dans les deux axes. pour ne pas répéter c'est no-repeat.

_________________
Les codes de ce forum ne sont valables que pour UN site précis, à une date précise. Inutile de les essayer sans comprendre comment cela fonctionne.
Si vous avez apprécié mon aide, aidez en retour.
Acupuncture Bordeaux - Tailam (école Arts Martiaux) - MTC Tours - Maison des arts martiaux Tours L'étape à pâtes (Restaurant)Association Bohaires de Gasconha
avatar
FredVig

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

http://fredvig.com

Revenir en haut Aller en bas

Re: [Résolu] Remplacer l'image du bouton retour vers le haut

Message par FredVig le Mer 20 Avr 2016 - 9:23

Oui : center center no-repat
background est une propriété qui peut inclure d'autres propriétés (background-size, -origin, etc…)

_________________
Les codes de ce forum ne sont valables que pour UN site précis, à une date précise. Inutile de les essayer sans comprendre comment cela fonctionne.
Si vous avez apprécié mon aide, aidez en retour.
Acupuncture Bordeaux - Tailam (école Arts Martiaux) - MTC Tours - Maison des arts martiaux Tours L'étape à pâtes (Restaurant)Association Bohaires de Gasconha
avatar
FredVig

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

http://fredvig.com

Revenir en haut Aller en bas

Re: [Résolu] Remplacer l'image du bouton retour vers le haut

Message par FredVig le Mer 20 Avr 2016 - 9:26

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

_________________
Les codes de ce forum ne sont valables que pour UN site précis, à une date précise. Inutile de les essayer sans comprendre comment cela fonctionne.
Si vous avez apprécié mon aide, aidez en retour.
Acupuncture Bordeaux - Tailam (école Arts Martiaux) - MTC Tours - Maison des arts martiaux Tours L'étape à pâtes (Restaurant)Association Bohaires de Gasconha
avatar
FredVig

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

http://fredvig.com

Revenir en haut Aller en bas

Re: [Résolu] Remplacer l'image du bouton retour vers le haut

Message par Solie le Mer 20 Avr 2016 - 9:59

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

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

http://www.voixoff.com

Revenir en haut Aller en bas

Re: [Résolu] Remplacer l'image du bouton retour vers le haut

Message par FredVig le Mer 20 Avr 2016 - 10:18

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

_________________
Les codes de ce forum ne sont valables que pour UN site précis, à une date précise. Inutile de les essayer sans comprendre comment cela fonctionne.
Si vous avez apprécié mon aide, aidez en retour.
Acupuncture Bordeaux - Tailam (école Arts Martiaux) - MTC Tours - Maison des arts martiaux Tours L'étape à pâtes (Restaurant)Association Bohaires de Gasconha
avatar
FredVig

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

http://fredvig.com

Revenir en haut Aller en bas

Re: [Résolu] Remplacer l'image du bouton retour vers le haut

Message par Solie le Mer 20 Avr 2016 - 10:25

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

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

http://www.voixoff.com

Revenir en haut Aller en bas

Re: [Résolu] Remplacer l'image du bouton retour vers le haut

Message par FredVig le Mer 20 Avr 2016 - 14:26

De rien Wink
(Et il faut absolument quelque chose pour ces portraits qui ne renvoient pas sur des hautes définitions… Smile

_________________
Les codes de ce forum ne sont valables que pour UN site précis, à une date précise. Inutile de les essayer sans comprendre comment cela fonctionne.
Si vous avez apprécié mon aide, aidez en retour.
Acupuncture Bordeaux - Tailam (école Arts Martiaux) - MTC Tours - Maison des arts martiaux Tours L'étape à pâtes (Restaurant)Association Bohaires de Gasconha
avatar
FredVig

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

http://fredvig.com

Revenir en haut Aller en bas

Re: [Résolu] Remplacer l'image du bouton retour vers le haut

Message par Solie le Jeu 21 Avr 2016 - 9:37

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 :
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".
avatar
Solie

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

http://www.voixoff.com

Revenir en haut Aller en bas

Re: [Résolu] Remplacer l'image du bouton retour vers le haut

Message par FredVig le Jeu 21 Avr 2016 - 10:50

Ne te reste plus qu'à écrire un post pour la rubrique "tuto"

_________________
Les codes de ce forum ne sont valables que pour UN site précis, à une date précise. Inutile de les essayer sans comprendre comment cela fonctionne.
Si vous avez apprécié mon aide, aidez en retour.
Acupuncture Bordeaux - Tailam (école Arts Martiaux) - MTC Tours - Maison des arts martiaux Tours L'étape à pâtes (Restaurant)Association Bohaires de Gasconha
avatar
FredVig

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

http://fredvig.com

Revenir en haut Aller en bas

Re: [Résolu] Remplacer l'image du bouton 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