L'Auteur du site

Passionné par le web, je suis un JimdoFriend et mets à disposition des tutoriels et astuces pour Jimdo gratuitement.

Rechercher

Sur Facebook

Réseaux sociaux

Retrouvez moi sur Twitter et Google+ également.

Newsletter

Styler le bouton de téléchargement

Un nouveau tutoriel, cette fois c'est le module de téléchargement Jimdo qui est concerné. Ce tutoriel vous montre comment faire du simple lien de téléchargement un bouton personnalisé. Ne vous inquiétez pas, même si vous n'avez pas la moindre idée de ce que signifie les codes qui vont suivre, cela reste très simple et il suffit de suivre les quelques indications pour l'intégrer à votre site Jimdo.

 

Étape 1 : l’insertion du code

Les codes qui vont suivre sont à insérer dans "Modifier le head" qui se trouve dans "Paramètres" :

Étape 2 : le choix du style

Un style plutôt simple pour commencer :

 

Jimdo
Exemple de fichier téléchargeable.
avatar_m.jpg
Image JPG 1.6 KB

Voici le code :

<style type="text/css">

/*<![CDATA[*/

 

/* Un bouton de téléchargement 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}.button:active{text-shadow:none} .cc-m-download-link {background:#646464;background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #646464), color-stop(100%, #3e3e3e));background:-webkit-linear-gradient(#646464,

#3e3e3e);background:-moz-linear-gradient(#646464, #3e3e3e);background:-o-linear-gradient(#646464, #3e3e3e);background:linear-gradient(#646464, #3e3e3e);overflow:hidden;*zoom:1;border:1px solid

#646464;border-bottom-color:#313131} .cc-m-download-link:hover {background:#4b4b4b;background:-webkit-gradient(linear, 50% 0%, 50%

100%,color-stop(0%,#4b4b4b),color-stop(100%,#313131));background:-webkit-linear-gradient(#4b4b4b,#313131);background:-moz-linear-gradient(#4b4b4b,#313131);background:-o-linear-gradient(#4b4b4b,#313131);background:linear-gradient(#4b4b4b,#313131);border-bottom-color:#313131} .cc-m-download-link:active {background:#313131}

 

/*]]>*/

</style>

Le même en différentes couleurs :

En orange

Voici le code :

<style type="text/css">

/*<![CDATA[*/

 

/* Un bouton de téléchargement 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;background:#ff954d;background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ff954d), color-stop(100%, #ff6700));background:-webkit-linear-gradient(#ff954d,

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

solid #ff954d;border-bottom-color:#e65d00}

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

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

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

 

/*]]>*/

</style>

En rose :

Voici le code :

<style type="text/css">

/*<![CDATA[*/

 

/* Un bouton de téléchargement 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;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>

En gris clair :

Voici le code :

<style type="text/css">

/*<![CDATA[*/

 

/* Un bouton de téléchargement 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;background:#c1c1c1;background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #c1c1c1), color-stop(100%, #9b9b9b));background:-webkit-linear-gradient(#c1c1c1,

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

solid #c1c1c1;border-bottom-color:#8e8e8e}

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

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

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

 

/*]]>*/

</style>

Et pour finir, un style un peu plus soft

Jimdo
Exemple de fichier téléchargeable.
jimdo_logo.gif
Format Grafik Interchange 1.7 KB

<style type="text/css">

/*<![CDATA[*/

 

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

 

.cc-m-download-link {margin-top:10px;-webkit-border-radius:10px;-moz-border-radius:10px;-ms-border-radius:10px;-o-border-radius:4px;border-radius:10px;text-shadow:0 -1px 0px rgba(0, 0, 0, 0.25);border:none;padding:5px 18px 6px 18px;

color:white !important;text-decoration:none !important;display:inline-block;cursor:pointer;text-transform:uppercase;background:#00b7ea;background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #00b7ea), color-stop(100%, #009ec3));background:-webkit-linear-gradient(#00b7ea, #009ec3);background:-moz-linear-gradient(#00b7ea, #009ec3);

background:-o-linear-gradient(#00b7ea, #009ec3);background:linear-gradient(#00b7ea, #009ec3);

overflow:hidden;*zoom:1;border:1px solid #00b7ea;border-bottom-color:#009ec3;

height:35px;width:150px;text-align:center;font:17px/35px Helvetica, Verdana, sans-serif;}

 

/*]]>*/

</style>

Écrire commentaire

Commentaires : 5
  • #1

    Solie (samedi, 20 juin 2015 18:31)

    Merci beaucoup. Grâce à votre tuto et à la fonction modifier le head par page des nouveaux designs, on peut maintenant styler les boutons télécharher à l'infini. Et en ajoutant !important sur les border-radius, aucun conflit avec le pré-réglage !

    Un tuto pour les boutons d'action ?

  • #2

    Ze Tuto (samedi, 20 juin 2015 20:29)

    Bonjour Solie et merci pour votre commentaire,

    Si je ne trompe pas, on peut déjà customiser les boutons d'appels à l'action via l'interface Jimdo même (dans Style). Si vous voulez aller plus loin dans la personnalisation de ces derniers, voici un exemple (en reprenant le style d'un bouton de téléchargement gris) :

    .j-calltoaction-link-style-1 {-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}

    .j-calltoaction-link-style-1 {background:#c1c1c1;background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #c1c1c1), color-stop(100%, #9b9b9b));background:-webkit-linear-gradient(#c1c1c1,#9b9b9b);background:-moz-linear-gradient(#c1c1c1, #9b9b9b);background:-o-linear-gradient(#c1c1c1, #9b9b9b);background:linear-gradient(#c1c1c1, #9b9b9b);overflow:hidden;*zoom:1;border:1px solid #c1c1c1;border-bottom-color:#8e8e8e}

    .j-calltoaction-link-style-1:hover {background:#a8a8a8;background:-webkit-gradient(linear, 50% 0%, 50% 100%,color-stop(0%,#a8a8a8),color-stop(100%,#8e8e8e));background:-webkit-linear-gradient(#a8a8a8,#8e8e8e);
    background:-moz-linear-gradient(#a8a8a8,#8e8e8e);
    background:-o-linear-gradient(#a8a8a8,#8e8e8e); background:linear-gradient(#a8a8a8,#8e8e8e);border-bottom-color:#8e8e8e}

    Ces lignes de codes vont modifier le bouton de "Style 1", pour le style 2 c'est .j-calltoaction-link-style-2 et pour le style 3 c'est .j-calltoaction-link-style-3

    Cordialement

  • #3

    Solie (dimanche, 21 juin 2015 01:48)

    Vous ne vous trompez pas, c'est moi qui suis maniaque avec les couleurs. Je me sentais assez restreinte avec trois choix pour tout le site.

    Merci infiniment pour ces codes, Ze Tuto :D
    J'ai hâte d'essayer tout ça !

  • #4

    jeremy (jeudi, 16 juillet 2015 22:44)

    merci beaucoup pour ce tuto ;-)

  • #5

    GROUPEMENT EUROMILLIONS (dimanche, 10 janvier 2016 10:26)

    Merci ze tuto