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.

Tutoriel : Stylez vos boutons de partage

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

Tutoriel : Stylez vos boutons de partage

Message par Solie le Jeu 12 Mai 2016 - 15:15

Tutoriel : Stylez vos boutons de partage



Le présent tutoriel vous permettra d'accorder vos boutons de partage sur les réseaux sociaux avec les couleurs de votre site.



Vous conserverez l'effet Rollover grossissant de Jimdo au passage de la souris.

Démo


Au choix, deux tailles d'icônes (la moyenne 32px ou la grande 64px), et les trois formes (carrée, ronde, ou hexagonale).


cliquez sur l'image pour agrandir



TUTORIEL



Étape 1



Ajoutez un élément "Partager" en cliquant sur + ajouter un élément.


Cochez les réseaux sociaux ou outils (partager par e-mail) que vous souhaitez ajouter sur votre page.


cliquez sur les images pour agrandir


Choisissez l'emplacement de vos icônes :
    à gauche
    centre
    à droite

Choisissez la taille de vos icônes :
    32px
    64px

Choisissez le format de vos icônes :
    carré
    rond
    hexagonal

Choisissez la couleur de base de vos icônes :
    noir & blanc (black)
    transparent (white)

Enregistrez.



Étape 2



Cliquez sur Paramètres > Modifier le head.





Si vous avez choisi la couleur "noir & blanc", entrez ce code :
Code:
<style type="text/css">
/*<![CDATA[*/

/* changer la couleur des boutons share noir & blanc*/
div.cc-sharebuttons-element.cc-sharebuttons-style-black a::before {color: #BACF22;}

/*]]>*/
</style>
La référence couleur #BACF22 (qui correspond ici à un vert pomme avec logo blanc) est à remplacer par la couleur de votre choix.



Si vous avez choisi la couleur "transparent", entrez ce code :
Code:
<style type="text/css">
/*<![CDATA[*/

/* changer la couleur des boutons share transparent */
div.cc-sharebuttons-element.cc-sharebuttons-style-white a::before {color: #BACF22;}

/*]]>*/
</style>
La référence couleur #BACF22 (qui correspond ici au vert pomme avec logo gris de la première photo) est à remplacer par la couleur de votre choix.


Enregistrez et fermez les paramètres.



Rafraîchissez votre page pour voir le résultat Wink
avatar
Solie

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

http://www.voixoff.com

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