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.
-15%
Le deal à ne pas rater :
(Adhérents) LEGO® Icons 10318 Le Concorde
169.99 € 199.99 €
Voir le deal

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

3 participants

Aller en bas

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

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

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

http://www.voixoff.com

Revenir en haut Aller en bas

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

Message par ZeTuto 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" ?
ZeTuto
ZeTuto

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

https://zetuto.jimdo.com

Revenir en haut Aller en bas

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

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

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

http://www.voixoff.com

Revenir en haut Aller en bas

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

Message par ZeTuto 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".
ZeTuto
ZeTuto

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

https://zetuto.jimdo.com

Revenir en haut Aller en bas

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

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

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

http://www.voixoff.com

Revenir en haut Aller en bas

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

Message par FredVig Mer 24 Juin 2015 - 9:24

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

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

http://fredvig.com

Revenir en haut Aller en bas

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

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

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

http://www.voixoff.com

Revenir en haut Aller en bas

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

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

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

http://fredvig.com

Revenir en haut Aller en bas

bouton - [Résolu] Modifier un bouton d'action et un bouton télécharger Empty liens soulignés

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

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

http://www.voixoff.com

Revenir en haut Aller en bas

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

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

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

https://zetuto.jimdo.com

Revenir en haut Aller en bas

bouton - [Résolu] Modifier un bouton d'action et un bouton télécharger Empty liens soulignés

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

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

http://www.voixoff.com

Revenir en haut Aller en bas

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

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

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

https://zetuto.jimdo.com

Revenir en haut Aller en bas

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

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

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

http://www.voixoff.com

Revenir en haut Aller en bas

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

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

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

http://www.voixoff.com

Revenir en haut Aller en bas

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

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

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

https://zetuto.jimdo.com

Revenir en haut Aller en bas

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

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

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

http://www.voixoff.com

Revenir en haut Aller en bas

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

Revenir en haut

- Sujets similaires

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