• Description personnalisée.

    Deux liens à conserver: Microbidouille et la Gentille Rebelle nous offrent de nombreuses façons de personnaliser et de protéger nos blogs.

    Le sujet ici est de personnaliser une bulle d'information, au survol d'un image ou d'un paragraphe quelconque, et, pour moi, sur un seul article et non sur l'ensemble du blog, comme vous le trouverez chez Microbidouille.

    Première chose à vérifier, comme il l'indique, vérifier que la configuration de votre blog Ekla permet l'affichage des descriptions, au survol d'un élément:

    Onglet Configuration/configuration générale/ Avancé et cocher la case: "Afficher la description de l'image lors du survol de la souris"/Enregistrer.

    Quel que soit le moyen de publication de votre image, il vous faudra savoir ouvrir le code source (<>) et ajouter le descriptif et les lignes CSS le concernant.

    Si vous hébergez vos images dans un album, par exemple, il vous faudra savoir récupérer l'adresse de chaque image.

    Le programme ajoute un code alt="texte alternatif" à chaque image afin de pallier à une lenteur de connexion; ainsi, le texte apparaît avant que l'image ne s'affiche; ce texte alternatif  est celui que nous allons décorer et afficher au survol.

    Il est identifié comme "help_bubble" et nous allons, en CSS, définir les paramètres de cet élément.

    Nous pouvons rédiger nos articles comme d'habitude, texte et images comprises et, à la fin, ouvrir le code source et écrire le descriptif de chacune des images et le code CSS de ces descriptifs.

    Je vais publier une image hébergée en album G5 et dont l'adresse est: http://ekladata.com/vZhiB2chyc5eCh6yp8fNyI1cWMg.jpg, par la façon qui me convient.

    Paysage d'automne, près de chez moi; les oliviers sont toujours avec leur feuillage gris vert mais les érables se colorent très vite, ainsi que d'autres arbustes; les chênes pubescent attendront les premiers froids pour rougir d'abord et ensuite, devenir marron et le rester jusqu'à ce que les nouvelles feuilles les poussent, au printemps.

    J'ai cliqué droit sur l'image afin de la centrer dans ma page, par l'outil de centrage: le code source a écrit:

    <p><img style="display: block; margin-left: auto; margin-right: auto;" src="http://ekladata.com/vZhiB2chyc5eCh6yp8fNyI1cWMg.jpg" alt="..." /></p>.

    Entre les guillemets de alt"...", je vais écrire mon descriptif; sans décoration personnelle, il va se présenter sous forme d'un rectangle, à fond jaune clair et avec la police par défaut à taille par défaut.

    Pour personnaliser le descriptif, je vais ajouter un code CSS qui va concerner le descriptif de Alt, identifié automatiquement par help_bubble; rien à modifier dans la ligne de l'image..

    <style><!--
    #help_bubble{color:#000000; border-radius:20px; background:url('http://ekladata.com/Fg3OAWM_NWnDXlfMpKWR28rQgiI/arc1000x1500.jpg'); background-size:cover; box-shadow:5px 5px 10px black; border: 4px ridge #FFEECC; width:400px; padding:8px;font-size: 18px;}
    --></style>

    Entre les accolades {...}, vous placez les attributs que vous affectez à ce descriptif:

    color: couleur du texte, ici noire.

    border-radius: arrondi du cadre.

    background: fond image ou coloré. avec ou non background-size.

    box-shadow: ombre.

    border: bordure du descriptif.

    width:largeur en pixels.

    padding: espace entre les bords du cadre et le texte.

     font_size: taille de la police.

    Vous pouvez ajouter d'autres attributs, par exemple une police externe.