• Résolu Commentaires : avatar à gauche et bouton répondre


    Lundi 21 Juin à 23:30
    Bushidoka

    Bonjour,

    Les commentaires me déroutent un peu, car j'ai l'habitude de voir les avatars à gauche, et le lien "Répondre" se confond avec le texte du commentaire. J'en ai profité pour peaufiner un peu l'apparence.

    Je vous partage mon code :

    1. /* COMMENTAIRES */
    2. .commentavatar{float:left;padding-left:0px;padding-right:7px;/* avatar à gauche */
    3. .commentavatar img{border-radius:70px;/* avatar rond */
    4. .comment_normal, .comment_admin{width:auto;/* largeur non-fixe évite les dépassement en cas de bordure ou marge */
    5. .comment-reply{text-align:right;/* lien Répondre à droite */
    6. .comment-reply a{background:#292929;padding:3px 5px;color:#fff;opacity:0.5;/* lien Répondre en bouton */
    7. .comment-reply a:hover{background:#c40000;text-decoration:none;opacity:1;/* lien Répondre au survol */

    Je pense avoir suffisamment commenté mon code pour que vous puissiez comprendre la fonction de chaque règle CSS.

    Je vous invite à modifier les couleurs #292929 et #c40000 dans les règles concernant le bouton Répondre (générez vos codes couleur sur htmlcolorcodes.com par exemple).

    • Rappel : Ce code s'insère (sans les numéros de ligne) dans Apparence - Modifier le thème - Ajouter du CSS.
    • Vous pouvez aussi peaufiner le réglage des couleurs, police et marges dans les options de modification du thème.

    Amusez-vous bien !

    Mardi 22 Juin à 08:03
    Pipiou

    Bonjour,

    pour info tes lignes numérotées sont incomplètes : on ne voit pas la fin des lignes, du coup ça aide pas intello

    Je me permets (ce n'est qu'un avis), je cite
        "je vous invite à modifier les couleurs ... dans les règles..."
    au lieu de  dans les règles, je mettrais
        "dans Apparence, Modifier le thème, Boutons et champs"

    Comme j'ai "commenté" ton sujet > tu ne pourras pas l'éditer pour le modifier > copie-colle pour faire un Nouveau sujet (ce sujet là sera un brouillon qui pourra être supprimé). 

     

    Edit parce que j'ai oublié :  côté "Trucs et Astuces" je ne suis pas sûre que ça en soit, c'est plus "du code" > je suis pas sûre que le sujet soit validé en tant que "Trucs et astuces".  

    @ suivre

     

    Mardi 22 Juin à 16:07
    Bushidoka

    Bonjour et merci @Pipiou !

    En fait, je parlais des règles CSS (autrement dit, dans le code).

    Oui c'est étrange le fait que ce soit tronqué. J'ai encadré le tout dans une div avec un "max-width:500px" à cause de ça. Mais d'après ce que tu me dis, j'en déduis que c'est insuffisant.

    Je pense savoir où est le problème : la mise en forme du code copié-collé contient la règle "white-space: nowrap;". Toute façon par précaution, je vais mettre une barre de scroll.

    Edit : La barre de scroll ne fait strictement rien vu que les éléments sont à 100% de largeur. Le problème vient du fait que la cellule du tableau est masquée. Pour l'instant, je ne vois que la solution d'encadrer mon texte avec un div en "max-width:300px".

    Mardi 22 Juin à 22:40
    stormalo

    @ Bushidoka

    - J'ai fais une reprise de ton code:


    /* COMMENTAIRES */
    .commentavatar{float:left;padding-left:0px;padding-right:7px;} /* avatar à gauche */
    .commentavatar img{border-radius:70px;} /* avatar rond */
    .comment_normal, .comment_admin{width:auto;} /* largeur non-fixe évite les dépassement en cas de bordure ou marge */
    .comment-reply{text-align:right;} /* lien Répondre à droite */
    .comment-reply a{background:#292929;padding:3px 5px;color:#fff;opacity:0.5;} /* lien Répondre en bouton */
    .comment-reply a:hover{background:#c40000;text-decoration:none;opacity:1;}

     

    >> en utilisant dans la source de mon brouillon la balise <pre>  </pre> avec les propriétés ci-dessous (et surtout aucun style dans les lignes du code présenté)

    <pre style="word-wrap: break-word; white-space: pre-wrap; background-color: #eeeff; color: #993300;">
    ..........
    </pre>

    Mardi 22 Juin à 23:32
    Bushidoka

    Merci @stormalo, je note la technique. wink2

    Mercredi 23 Juin à 07:57
    stormalo

    De plus, ce qu'il faut absolument éviter de faire - et je pense que tu l'avais fait - c'est de faire du copié-collé "à la volée" à partir d'une page web ou d'un traitement de texte, car tu récupères aussi du code non approprié aux blogs (mise en forme, style, . . .)

    Comment faire ?   mon point de vue est dans Trucs et astuces

       Bon aujourd'hui sarcastic

    Mercredi 23 Juin à 16:37
    Bushidoka

    Oui, c'est exactement ça : j'ai copié-collé avec la mise en forme.
    D'habitude, je privilégie le collage via Ctrl+Maj+V Mais là je trouvais que la colorisation syntaxique apportait plus de visibilité (ironiquement, LOL!).

    Jeudi 24 Juin à 08:34
    Pipiou

    Yo,

    reste à savoir si c'est bien un "Truc et Astuce", pour moi c'est du codage, qui a certes l'avantage d'être prêt à servir... SI on lit jusqu'à la correction de stormalo...

    > refaire le sujet "au propre" me parait indispensable pour que le codage "prêt à servir" soit dans le sujet et pas dans les commentaires :( 

     

    Lundi 28 Juin à 11:53
    Stéphanie Staff

    Bonjour, 

    On va déménager le topic dans besoin d'aide.
    C'est ok pour vous Bushidoka ? 

    Merci, 




    Vous devez être membre pour poster un message.