Annonce ■ Placer une info dans les formulaires Commentaire / Réponse

 Faisant suite à une demande de Marc81 sur le forum d'aide  ☞ c'était ici

Il est possible, via l'affichage d'une image, de placer une information à coté du formulaire de saisie des commentaires et/ou réponses. Par exemple :

• pour informer d'un différé d'affichage (modération)
• pour rappeler qu'un le blog est en pause
• pour différencier formulaire Commentaire et formulaire Réponse
• pour formuler un souhait etc..
• simple illustration
• . . .

Préalable :

• préparer une petite image avec le texte à afficher, sur fond uni ou transparent pour une bonne lisibilité
• loger cette image sur internet pour avoir une adresse (url) par ex: via Médiathèque EB ou direct sur le blog

-----------------------------------------------------------------------------------------------------------

  Exemple de codes CSS pour placer la/les images :

✔ concernant le formulaire Commentaire :

/* message pour Commentaire */
#commentform.comment-form {
    background-image: url("adresse de l'image") ;
    background-repeat: no-repeat;
    background-position: top right;
 }

Remplacer adresse de l'image par l'url de l'image à afficher (un exemple ci-dessous) :

http://ekladata.com/HJ05XkJDKOBAyT_c9yeOen_aMrk.png    qui a donné ce résultat:

✔  concernant la saisie d'une Réponse :

Même code que ci dessus, mais remplacer le sélecteur #commentform.comment-form  par ul.block-reply .comment-form

✔  Cas d'une même image pour  Commentaire et pour Réponse  :

On peut regrouper les deux codes en un seul, comme ceci

/* meme message pour Commentaire et Reponse */
#commentform.comment-form,
    ul.block-reply .comment-form {
    background-image: url("adresse de l'image") ;
    background-repeat: no-repeat;
    background-position: top right;
 }

➣ pour ces 3 cas, si besoin, ajuster la taille de l'image en ajoutant entre { et } :
background-size: - - px - - px ;                 - - px valeurs largeur / hauteur

---------------------------------------

 ☞ sujet forum

Merci stormalo !   

j'essaierai... rien que pour le plaisir !

PS : l'image en exemple est un peu petite c'est normal ?

@ Pipiou  ici ce n'est qu'une illustration. En cliquant dessus elle apparait plus grande, et dans le sujet forum un lien l'affiche en taille réelle. En situation dans un blog elle représente un Post-it © , pas plus.
L'astuce n'est pas brevetée, chacun peut confectionner son image

Et pour essayer rien que pour le plaisir, il est possible de mettre le css dans le code source d'un article, entre des balises <style> et </style>.
Ça ne fonctionnera alors que pour cet article, tant que le code sera en place. 

donc quand on clique sur l'illustration on a un mini-Post-it 

j'ai plus qu'à essayer. et pour pas oublier je vais me coller un Post-it

thanks stormalo 

Hello !

Hé hé, extra, j'ai vu la chose se fabriquer en direct dans le forum d'aide :)

Maintenant j'ai une question... j'aimerais qu'on puisse cliquer sur l'image pour revenir aux derniers articles (url blog/recent). C'est possible Monsieur Cadbury ?

J'ai trouvé une solution pour masquer artificiellement les virgules des tags, mais réaliser une image de fond cliquable .... sauf a en placer une transparente au dessus pour donner l'illusion.

Pourquoi ne pas mettre une petite image fixe, en bas/droite de l'écran, avec le lien qui va bien ? Ce serait facile à réaliser.

Si nécessaire je peux faire une image de petit gâteau façon Cadbury avec cette flèche moulée sur la face chocolatée

Coucou

J'ai fait autrement : une petite image en bas à droite de chaque article.

Ah ben, tu l'as vue ! Pfff

Oui, faut que je m'occupe des tags.

Pardon stormalo, je t'ai beaucoup sollicité, tu es adorable ! ♥

Merci pour ce post it lol cet astuce pourrai me servir dans l'avenir

Bonjour.

Super cette idée d'image. Par contre je n'ai pas compris ou coller ce bout de code pour mettre ça dans mon blog ?

@ Servane Megard,

Ce "bout de code" css concerne tout le blog, il faut donc le mettre dans Apparence > Modifier le thème > Ajouter du css (ce dernier lien est tout en bas de la fenêtre Personnalisation du thème)