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


    Lundi 23 Novembre 2015 à 13:44
    stormalo

     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

    Lundi 23 Novembre 2015 à 16:22
    Pipiou

    Merci stormalo !  cool 

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

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

     

    Lundi 23 Novembre 2015 à 19:59
    stormalo

    @ 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
    biggrin

    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. 

    Mardi 24 Novembre 2015 à 08:31
    Pipiou

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

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

    thanks stormalo 

    Mercredi 25 Novembre 2015 à 19:27
    lulette

    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 ?

    Mercredi 25 Novembre 2015 à 22:00
    stormalo

    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 he

    Mercredi 25 Novembre 2015 à 22:27
    lulette

    Coucou

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

    Ah ben, tu l'as vue ! Pfff oops

    Oui, faut que je m'occupe des tags.

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

    Mercredi 2 Mars 2016 à 16:51
    La Gentille Rebelle

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

    Mercredi 9 Mars 2016 à 15:18
    stormalo

    Pour complément :

    En réponse à une question sur le forum j'ai également proposé de mettre une image avec le Titre de la Rubrique Contact.

    Voir ici:

    http://doc.eklablog.com/modifier-la-rubrique-contact-topic138010

     

     




    Vous devez être membre pour poster un message.