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.

Rejoignez le forum, c’est rapide et facile

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.
Communauté francophone - Jimdo
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
-46%
Le deal à ne pas rater :
Oceanic OCEAB120W Batteur électrique – Blanc
7.51 € 13.91 €
Voir le deal

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

2 participants

Aller en bas

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

Message par Solie 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])
Solie
Solie

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

http://www.voixoff.com

Revenir en haut Aller en bas

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

Message par FredVig 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;}
FredVig
FredVig

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

http://fredvig.com

Revenir en haut Aller en bas

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

Message par Solie Mer 20 Avr 2016 - 7:33

Merci Fred, le noir est parti.

Il restait un filtre blanc ainsi qu'une bordure blanche en radius.

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

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

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

http://www.voixoff.com

Revenir en haut Aller en bas

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

Message par Solie Mer 20 Avr 2016 - 8:08

Finalement, j'ai réussi !

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

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.

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

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

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

http://www.voixoff.com

Revenir en haut Aller en bas

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

Message par FredVig 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
FredVig
FredVig

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

http://fredvig.com

Revenir en haut Aller en bas

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

Message par Solie Mer 20 Avr 2016 - 8:53

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

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

http://www.voixoff.com

Revenir en haut Aller en bas

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

Message par FredVig 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
FredVig
FredVig

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

http://fredvig.com

Revenir en haut Aller en bas

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

Message par FredVig Mer 20 Avr 2016 - 9:16

Hum… ne fonctionne pas sous Safari en effet !
FredVig
FredVig

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

http://fredvig.com

Revenir en haut Aller en bas

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

Message par Solie 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 ?
Solie
Solie

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

http://www.voixoff.com

Revenir en haut Aller en bas

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

Message par FredVig 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.
FredVig
FredVig

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

http://fredvig.com

Revenir en haut Aller en bas

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

Message par FredVig 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…)
FredVig
FredVig

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

http://fredvig.com

Revenir en haut Aller en bas

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

Message par FredVig 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
FredVig
FredVig

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

http://fredvig.com

Revenir en haut Aller en bas

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

Message par Solie 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.
Solie
Solie

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

http://www.voixoff.com

Revenir en haut Aller en bas

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

Message par FredVig 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
FredVig
FredVig

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

http://fredvig.com

Revenir en haut Aller en bas

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

Message par Solie 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
Solie
Solie

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

http://www.voixoff.com

Revenir en haut Aller en bas

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

Message par FredVig 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
FredVig
FredVig

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

http://fredvig.com

Revenir en haut Aller en bas

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

Message par Solie 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.

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

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

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

http://www.voixoff.com

Revenir en haut Aller en bas

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

Message par FredVig Jeu 21 Avr 2016 - 10:50

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

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

http://fredvig.com

Revenir en haut Aller en bas

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

Message par Contenu sponsorisé


Contenu sponsorisé


Revenir en haut Aller en bas

Revenir en haut

- Sujets similaires

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