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 :
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.
<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
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 ?
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
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 !
jeremy (jeudi, 16 juillet 2015 22:44)
merci beaucoup pour ce tuto ;-)
GROUPEMENT EUROMILLIONS (dimanche, 10 janvier 2016 10:26)
Merci ze tuto