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] Modifier un bouton d'action et un bouton télécharger

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

[Résolu] Modifier un bouton d'action et un bouton télécharger

Message par Solie le Mar 23 Juin 2015 - 17:28

Bonjour,

Ici ma page.

Et voici mon code, travaillé depuis un modèle gradient de ZeTuto :
Code:
<style type="text/css">

/*<![CDATA[*/


/*bouton d'action gradient black green style 2 */

.j-calltoaction-link-style-2 {-webkit-border-radius:7px;-moz-border-radius:7px;-ms-border-radius:7px;-o-border-radius:7px;border-radius:7px !important;text-shadow:0 -1px 0px rgba(0, 0, 0,
0.25);border:none;padding:5px 18px 6px 18px;font-size:14px;font-family:"Lucida Grande",Arial,Verdana,san-serif;color:#62A64E !important;text-decoration:none
!important;display:inline-block;cursor:pointer}

.j-calltoaction-link-style-2 {background:#424242;background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #424242), color-stop(100%, #000000));background:-webkit-linear-gradient(#424242,#000000);background:-moz-linear-gradient(#424242, #000000);background:-o-linear-gradient(#424242, #000000);background:linear-gradient(#424242, #000000);overflow:hidden;*zoom:1;border:1px solid #424242;border-bottom-color:#000000 !important;}

.j-calltoaction-link-style-2:hover {background:#62A64E;background:-webkit-gradient(linear, 50% 0%, 50% 100%,color-stop(0%,#62A64E),color-stop(100%,#62A64E));background:-webkit-linear-gradient(#62A64E,#62A64E);
background:-moz-linear-gradient(#62A64E,#62A64E);
background:-o-linear-gradient(#62A64E,#62A64E); background:linear-gradient(#62A64E,#62A64E);border-bottom-color:#000000}


 /*]]>*/
</style>

Sur la partie hover, il faudrait que je puisse entrer la font-color en noir #000000.

Peut-être faut-il également que je déplace ma couleur verte #62A64E du "Général" vers le mode normal puisque cette couleur est celle du background en mode actif.

Je ne sais pas comment m'y prendre...

Pouvez-vous m'aider ?


Dernière édition par Solie le Sam 12 Sep 2015 - 12:59, é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] Modifier un bouton d'action et un bouton télécharger

Message par ZeTuto le Mar 23 Juin 2015 - 18:22

Bonjour,

pour la couleur du texte, il suffit de "font-color:#000000 !important;" ou "color:#000000 !important;" :
Code:
<style type="text/css">
/*<![CDATA[*/

.j-calltoaction-link-style-2 {
-webkit-border-radius:7px;-moz-border-radius:7px;-ms-border-radius:7px;-o-border-radius:7px;
border-radius:7px !important;text-shadow:0 -1px 0px rgba(0, 0, 0,
0.25);border:none;padding:5px 18px 6px 18px;font-size:14px;font-family:"Lucida Grande",Arial,Verdana,san-serif;color:#62A64E !important;text-decoration:none
!important;display:inline-block;cursor:pointer;background:#424242;background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #424242), color-stop(100%, #000000));background:-webkit-linear-gradient(#424242,#000000);background:-moz-linear-gradient(#424242, #000000);background:-o-linear-gradient(#424242, #000000);background:linear-gradient(#424242, #000000);overflow:hidden;*zoom:1;border:1px solid #424242;border-bottom-color:#000000 !important;
}

.j-calltoaction-link-style-2:hover {

color:#000000 !important;

background:#62A64E;background:-webkit-gradient(linear, 50% 0%, 50% 100%,color-stop(0%,#62A64E),color-stop(100%,#62A64E));background:-webkit-linear-gradient(#62A64E,#62A64E);
background:-moz-linear-gradient(#62A64E,#62A64E);
background:-o-linear-gradient(#62A64E,#62A64E); background:linear-gradient(#62A64E,#62A64E);border-bottom-color:#000000;
}

/*]]>*/
</style>

Par contre, je ne comprends pas votre deuxième question, que pensez vous en disant mode "normal" ?
avatar
ZeTuto

Messages : 203
Date d'inscription : 08/10/2014

http://www.zetuto.com

Revenir en haut Aller en bas

Re: [Résolu] Modifier un bouton d'action et un bouton télécharger

Message par Solie le Mar 23 Juin 2015 - 18:26

Je pense Non-actif. A l'affichage de la page, sans la souris.

Merci bien, je vais essayer votre code de suite...
avatar
Solie

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

http://www.voixoff.com

Revenir en haut Aller en bas

Re: [Résolu] Modifier un bouton d'action et un bouton télécharger

Message par ZeTuto le Mar 23 Juin 2015 - 19:04

@Solie a écrit:Je pense Non-actif. A l'affichage de la page, sans la souris.

Merci bien, je vais essayer votre code de suite...
A d'accord, j'ai cru que vous parliez déjà de non-actif en disant mode "général".
avatar
ZeTuto

Messages : 203
Date d'inscription : 08/10/2014

http://www.zetuto.com

Revenir en haut Aller en bas

Re: [Résolu] Modifier un bouton d'action et un bouton télécharger

Message par Solie le Mar 23 Juin 2015 - 19:13

Oui, j'ai un peu de mal avec les termes Lol
J'ai mis votre code. Avec !important, ça fonctionne parfaitement, le noir est pris en compte.

Merci beaucoup ZeTuto Smile

Il ne me reste plus qu'à trouver un code plus efficace pour enlever le soulignage des liens. Le mien n'a aucun effet pour les boutons. Je vais voir tout ça !
avatar
Solie

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

http://www.voixoff.com

Revenir en haut Aller en bas

Re: [Résolu] Modifier un bouton d'action et un bouton télécharger

Message par FredVig le Mer 24 Juin 2015 - 9:24

genre :
Code:
#content_area a:active,#content_area a:hover, #content_area a:active {
    text-decoration: none !important;
}
?

_________________
Sauf indication contraire, les codes de ce forum sont valables pour UN site précis, à une date précise. Essayez-les, mais essayez surtout de comprendre comment ils fonctionnent.
Je suis 'Expert' Jimdo affilié, bénévole du forum et indépendant rémunéré par mes clients.
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 : 1856
Date d'inscription : 07/10/2014

http://fredvig.com

Revenir en haut Aller en bas

Re: [Résolu] Modifier un bouton d'action et un bouton télécharger

Message par Solie le Mer 24 Juin 2015 - 15:16

Hey Fred ! Tu arrives à point Wink
Avant que je rentre le code... c'est normal a:active deux fois sur la zone de contenu ?
avatar
Solie

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

http://www.voixoff.com

Revenir en haut Aller en bas

Re: [Résolu] Modifier un bouton d'action et un bouton télécharger

Message par FredVig le Mer 24 Juin 2015 - 15:51

Tu as raison C'est un doublon inutile. J'ai fait vite

Je rappelle qu'on ne risque rien à rentrer toutes sortes de codes sans modifier le Head, (du moment qu'on sauvegarde d'anciennes versions)
Et vous pouvez les essayer d'abord dans l'inspecteur. Cela ne change le site qu'en consultation temporaire, pour vous seul.

_________________
Sauf indication contraire, les codes de ce forum sont valables pour UN site précis, à une date précise. Essayez-les, mais essayez surtout de comprendre comment ils fonctionnent.
Je suis 'Expert' Jimdo affilié, bénévole du forum et indépendant rémunéré par mes clients.
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 : 1856
Date d'inscription : 07/10/2014

http://fredvig.com

Revenir en haut Aller en bas

liens soulignés

Message par Solie le Mer 24 Juin 2015 - 20:18

J'ai enlevé mon code original...

<link rel="stylesheet" type="text/css" href="http://www.snipzookeeper.com/29011301serv/16PX79700231/license79700231node0011ZHfdLeYHaKlzAXnLzxdnQsga.css" />
... pour le remplacer par le tien et avoir ainsi un seul code pour tous les liens dans le head :

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

/* supprimer les liens soulignes */

#content_area a:active, #content_area a:hover {
    text-decoration: none !important;
}

/*]]>*/
</style>

ça marchait sur les boutons ! plus sur les liens textes.

J'ai tenté d'ajouter un a:link, sans être sûre que c'est le bon truc, comme ceci :

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

/* supprimer les liens soulignes */

.content_area a:active .content_area a:hover .content_area a:link {text-decoration: none !important;}

/*]]>*/
</style>

C'est pareil ; boutons ok, textes pas ok.

J'imagine que le a:link est mal formulé. Pourtant, c'est bien sur le content que je le souhaite.

Je suis perdue Question
avatar
Solie

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

http://www.voixoff.com

Revenir en haut Aller en bas

Re: [Résolu] Modifier un bouton d'action et un bouton télécharger

Message par ZeTuto le Mer 24 Juin 2015 - 21:27

Attention à votre code :
      <style type="text/css">
   /*<![CDATA[*/

   /* supprimer les liens soulignes */

   .content_area a:active .content_area a:hover .content_area a:link {text-decoration: none !important;}

   /*]]>*/
   </style>

Il manque la séparation entre les différentes class des éléments à styler : .content_area a:active, .content_area a:hover, .content_area a:link

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

    /* supprimer les liens soulignes */

    .content_area a:active, .content_area a:hover, .content_area a:link {text-decoration: none !important;}

    /*]]>*/
    </style>
avatar
ZeTuto

Messages : 203
Date d'inscription : 08/10/2014

http://www.zetuto.com

Revenir en haut Aller en bas

liens soulignés

Message par Solie le Mer 24 Juin 2015 - 21:52

Oups, je me souviendrai des virgules. Merci ZeTuto

J'ai mis le code corrigé, ça n'agit toujours que sur les boutons. Et aucun effet sur les liens textes .

Comment faire ?
avatar
Solie

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

http://www.voixoff.com

Revenir en haut Aller en bas

Re: [Résolu] Modifier un bouton d'action et un bouton télécharger

Message par ZeTuto le Mer 24 Juin 2015 - 22:18

Pour les liens simples de votre site, le plus simple devrait fonctionner :
Code:
a:link {text-decoration: none !important;}
avatar
ZeTuto

Messages : 203
Date d'inscription : 08/10/2014

http://www.zetuto.com

Revenir en haut Aller en bas

Re: [Résolu] Modifier un bouton d'action et un bouton télécharger

Message par Solie le Mer 24 Juin 2015 - 23:28

Exact. Vive la simplicité !

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

    /* supprimer les liens soulignes */

    .content_area a:active, .content_area a:hover, a:link  {text-decoration: none !important;}

    /*]]>*/
    </style>

Merci de votre aide.

J'en profite pour saluer les excellents tutos "boutons" de votre site. Ils sont compatibles avec les nouveaux designs, customisables à volonté, et c'est super !
avatar
Solie

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

http://www.voixoff.com

Revenir en haut Aller en bas

Modifier un bouton Télécharger

Message par Solie le Ven 26 Juin 2015 - 21:10

Bonsoir,

Me voici de nouveau, pour un bouton "Télécharger" cette fois-ci.

Ici, ma page.

Ici, le modèle flat du bouton Télécharger :

Code:
<style type="text/css">

/*<![CDATA[*/

 

/* Un bouton de téléchargement rose code zetuto.com */

 

.cc-m-download-link {-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;-o-border-radius:4px;border-radius:4px;text-shadow:0 -1px 0px rgba(0, 0, 0,

0.25);border:none;padding:5px 18px 6px 18px;font-size:14px;font-family:"Lucida Grande",Arial,Verdana,san-serif;color:white !important;text-decoration:none

!important;display:inline-block;cursor:pointer}

.cc-m-download-link

{background:#FF358B;background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #FF358B), color-stop(100%, #FF358B));background:-webkit-linear-gradient(#FF358B,

#FF358B);background:-moz-linear-gradient(#FF358B, #FF358B);background:-o-linear-gradient(#FF358B, #FF358B);background:linear-gradient(#FF358B, #FF358B);overflow:hidden;*zoom:1;border:1px

solid #FF358B;border-bottom-color:#FF358B}

.cc-m-download-link:hover {background:#FF358B;background:-webkit-gradient(linear, 50% 0%, 50%

100%,color-stop(0%,#FF358B),color-stop(100%,#FF358B));background:-webkit-linear-gradient(#FF358B,#FF358B);background:-moz-linear-gradient(#FF358B,#FF358B);background:-o-linear-gradient(#FF358B,#FF358B);background:linear-gradient(#FF358B,#FF358B);border-bottom-color:#FF358B}

.cc-m-download-link:active {background:#FF358B;text-shadow:none}

 

/*]]>*/

</style>

Je souhaiterais que le bouton soit de couleur #F68C1F avec un border-top-width: 2px en solid et de couleur #F15128 .

Voici où j'en suis dans mon code :

Code:
<style type="text/css">

/*<![CDATA[*/

 

/* bouton de téléchargement tournesol habillage */

 

.cc-m-download-link {-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px !important;text-shadow:0 -1px 0px rgba(0, 0, 0,

0.25);border:solid;padding:5px 18px 6px 18px;font-size:14px;font-family:"Lucida Grande",Arial,Verdana,san-serif;color:black !important;text-decoration:none

!important;display:inline-block;cursor:pointer}

.cc-m-download-link

{background:#F68C1F;background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #F68C1F), color-stop(100%, #F68C1F));background:-webkit-linear-gradient(#F68C1F,

#F68C1F);background:-moz-linear-gradient(#F68C1F, #F68C1F);background:-o-linear-gradient(#F68C1F, #F68C1F);background:linear-gradient(#F68C1F, #F68C1F);overflow:hidden;*zoom:1; border:1px;

solid #F15128;border-top-color:#F15128}

.cc-m-download-link:hover {background:#FCBB01;background:-webkit-gradient(linear, 50% 0%, 50%

100%,color-stop(0%,#FCBB01),color-stop(100%,#FCBB01));background:-webkit-linear-gradient(#FCBB01,#FCBB01);background:-moz-linear-gradient(#FCBB01,#FCBB01);background:-o-linear-gradient(#FCBB01,#FCBB01);background:linear-gradient(#FCBB01,#FCBB01);border-bottom-color:#FCBB01}

.cc-m-download-link:active {background:#FCBB01;text-shadow:none}

 

/*]]>*/

</style>

J'ai remplacé le border-bottom-color par border-top-color, mais rien ne se passe. Je précise qu'en laissant border-bottom-color, aucune bordure orange n'apparait en bas non plus...

J'ai tenté de virer cette ligne et de la remplacer par
border:solid; border-top-width:2px; border-top-color:#F15128}

avec, ou sans !important... rien à faire.

Y aurait-il dans le code quelque chose qui empêche les modifs ? J'ai tenté de remplacer le border:none du début par border:solid... C'est pareil, mon bouton est tout jaune tournesol, mais sans la border-top-color orange.

Alors si vous voyez un truc qui cloche dans le code, n'hésitez pas les amis Wink
avatar
Solie

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

http://www.voixoff.com

Revenir en haut Aller en bas

Re: [Résolu] Modifier un bouton d'action et un bouton télécharger

Message par ZeTuto le Ven 26 Juin 2015 - 22:03

Bonsoir,

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

/* bouton de téléchargement tournesol habillage */

.cc-m-download-link {-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px !important;text-shadow:0 -1px 0px rgba(0, 0, 0,
0.25);border:solid;padding:5px 18px 6px 18px;font-size:14px;font-family:"Lucida Grande",Arial,Verdana,san-serif;color:black !important;text-decoration:none
!important;display:inline-block;
cursor:pointer;background:#F68C1F;background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #F68C1F), color-stop(100%, #F68C1F));background:-webkit-linear-gradient(#F68C1F,
#F68C1F);background:-moz-linear-gradient(#F68C1F, #F68C1F);background:-o-linear-gradient(#F68C1F, #F68C1F);background:linear-gradient(#F68C1F, #F68C1F);overflow:hidden;*zoom:1; border:1px solid #F15128 !important;border-top-color:#F15128 !important;border-top-width:2px !important;}

.cc-m-download-link:hover {background:#FCBB01;background:-webkit-gradient(linear, 50% 0%, 50%
100%,color-stop(0%,#FCBB01),color-stop(100%,#FCBB01));background:-webkit-linear-gradient(#FCBB01,#FCBB01);background:-moz-linear-gradient(#FCBB01,#FCBB01);background:-o-linear-gradient(#FCBB01,#FCBB01);background:linear-gradient(#FCBB01,#FCBB01);border-bottom-color:#FCBB01 !important}

.cc-m-download-link:active {background:#FCBB01;text-shadow:none}

/*]]>*/
</style>

Bon, je ne sais pas si c'est le résultat que vous souhaitez avoir (visuellement), mais en tout cas en ajoutant !important et en enlevant certaines anomalies, cela fonctionne très bien.
avatar
ZeTuto

Messages : 203
Date d'inscription : 08/10/2014

http://www.zetuto.com

Revenir en haut Aller en bas

Re: [Résolu] Modifier un bouton d'action et un bouton télécharger

Message par Solie le Sam 27 Juin 2015 - 0:01

Oui, ça fonctionne très bien. La border-top est prise en compte. J'ai juste changé la réf. couleur de la bordure générale et c'est exactement le résultat que je souhaitais.

Je vous remercie ZeTuto !
avatar
Solie

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

http://www.voixoff.com

Revenir en haut Aller en bas

Re: [Résolu] Modifier un bouton d'action et un bouton télécharger

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