Comme indiqué dans le titre, aujourd'hui je vais vous montrer comment personnaliser l'infobulle (survolez pour voir l'effetRegardez, j'ai une superbe infobulle personnalisée !) avec quelques exemples.

C'est partiiiiiii !

Voici déjà le sélecteur de base :

#help_bubble {propriété: valeur;}

Et voici comment la personnaliser :

Les bordures :

#help_bubble {border: (taille en pixels)px (type de bordure (solid pour une bordure normale)) (couleur en HTML);}

La couleur des bordures :

#help_bubble {border-color: (couleur en HTML);}

La couleur du texte :

#help_bubble {color: (couleur en HTML);}

Le fond (avec une couleur) :

#help_bubble {background: (couleur en HTML);}

Le fond (avec une image) :

#help_bubble {background: url('(url de votre fond)');}

Les coins arrondis (pour changer l’arrondissement) :

#help_bubble {border-radius: (taille des coins arrondis en pixels (plus le nombre sera élevé, plus les coins seront arrondis))px;}

La police :

#help_bubble {font-family: (police);}

Taille du texte :

#help_bubble {font-size: (taille du texte en pixels)px;}

Donc c'est bien là, mais avec un petit exemple ce sera mieux non ?

Donc essayons de personnaliser notre infobulle comme celle d'EklaFastoche !

Dans l'infobulle du blog il y a eu cinq modifications :

• Ajout de coins arrondis
• Changement de bordures
• Changement de la couleur du texte
• Changement de la couleur du fond
• Changement de la police

Voici le code pour y procéder :

#help_bubble {border: 1px solid #8C8C8C; /* défini la bordure */
    color:#8C8C8C; /* change la couleur du texte */
    font-family: 'Open Sans', sans-serif; /* change la police */
    background: #E5E5E5; /* change le fond */
    border-radius: 5px;/* ajoute des coins arrondis */}

Et voilà !