Spécifier en CSS la taille des smiley (Créer un compte)

  • Statut : non résolu
12 sujets de 1 à 12 (sur un total de 12)
  • Auteur
    Messages
  • #528773
    CAMEO172
    Participant
    Maître WordPress
    1395 contributions

    Bonjour,

    Ma configuration WP actuelle
    – Version de WordPress : un poil en retard mais c’est voulu
    – Version de PHP/MySQL :
    – Thème utilisé : GraphPress largement modifié
    – Extensions en place : plein mais je me soigne
    – Nom de l’hebergeur : 02 Switch
    – Adresse du site : http://www.concertsenboite.fr

    Problème(s) rencontré(s) :

    Lors du test de cette page ( http://www.concertsenboite.fr/2013/07/23/chronique-photos-live-nadeah-5 ) je constate que mes smiley n’ont pas de hauteur et largeur défini. Ils sont bien défini par la class wp-smiley

    J’ai ajouté à mon CSS
    img.wp-smiley {
    padding:0;
    border: none;
    width:15px;
    height:15px;
    }

    mais rien à faire :(
    ça doit être plus compliqué à définir en CSS mais ça dépasse mes capacités.

    quelqu’un a une piste ?

    #914777
    CAMEO172
    Participant
    Maître WordPress
    1395 contributions

    personne qui s’y connait assez en CSS pour trouver une solution ? 😳

    #914778
    friends93
    Participant
    Initié WordPress
    31 contributions

    Salut,

    J’ai été voir ta page où sont présent tes smileys et pour moi ils ont la bonne taille.

    #914779
    CAMEO172
    Participant
    Maître WordPress
    1395 contributions
    friends93 wrote:
    Salut,

    J’ai été voir ta page où sont présent tes smileys et pour moi ils ont la bonne taille.

    le soucis n’est pas la taille du smiley (15*15) mais sa bonne déclaration au navigateur !!

    #914780
    kayorn
    Participant
    Chevalier WordPress
    439 contributions

    pour gérer une image dans les css, il faut d’abord trouver l’id ou la classe dont elle dépend. Pour cela, installer Firebug.

    Voici le html.

    <img class="wp-smiley" alt="😉” src=”http://file.concertsenboite.fr/wp-includes/images/smilies/icon_wink.gif”&gt;

    Chercher cette image dans le thème et la changer éventuellement.

    #914782
    CAMEO172
    Participant
    Maître WordPress
    1395 contributions

    mon soucis reste entier et je patauge un peu.

    pour résumer :

    – mes smiley ont la class “wp-smiley”
    – j’ai déclaré en Css des attributs pour img.wp-smiley au niveau de la largeur et de la hauteur des smileys

    -> ces attributs ne sont pas appliqués.

    Si quelqu’un sait que déclarer en CSS pour que la class soit bien impacté

    #914781
    JHugues
    Membre
    Initié WordPress
    19 contributions

    Tu les as déclarées où et comment ?

    Pour l’heure, tu as :

    img.wp-smiley {
    border: medium none;
    height: 15px;
    padding: 0;
    width: 15px;
    }

    qui doit venir du css officiel.

    Si tu veux modifier ces valeurs, tu peux passer par Apparence > Theme Options et y insérer tes changements.

    #914784
    CAMEO172
    Participant
    Maître WordPress
    1395 contributions
    JHugues wrote:
    Tu les as déclarées où et comment ?

    Pour l’heure, tu as :

    img.wp-smiley {
    border: medium none;
    height: 15px;
    padding: 0;
    width: 15px;
    }

    qui doit venir du css officiel.

    Si tu veux modifier ces valeurs, tu peux passer par Apparence > Theme Options et y insérer tes changements.

    sauf que d’après Gtmétrix la taille des smiley n’est pas indiquée d’où la perte de quelques millième de seconde à l’affichage des pages le temps que le navigateur calcule tout ça.
    Oui c’est probablement ridicule comme perte, mais intellectuellement j’aimerai quand même résoudre ce point.

    d’après moi, la déclaration img.wp-smiley est incomplète mais je ne sais quoi mettre (Css et moi ça fait deux quand il faut vraiment rentrer dedans)

    #914785
    JHugues
    Membre
    Initié WordPress
    19 contributions

    Okay.

    A priori, Gtmétrix doit vouloir dire que ta balise doit contenir les informations largeur/hauteur.
    Un smiley doit être converti via la méthode bbcode j’imagine.

    Et tu dois avoir un squelette pour la balise. Il suffirait de trouver où se trouve ce squelette et de le compléter avec tes deux attributs. Je pense que ça sort du domaine css. C’est la balise html qui doit être renseignée.

    Suis-je clair ?

    Par contre, n’utilisant pas Gtmétrix, je ne suis pas sur de mon analyse.

    #914786
    CAMEO172
    Participant
    Maître WordPress
    1395 contributions
    JHugues wrote:
    Okay.

    A priori, Gtmétrix doit vouloir dire que ta balise doit contenir les informations largeur/hauteur.
    Un smiley doit être converti via la méthode bbcode j’imagine.

    Et tu dois avoir un squelette pour la balise. Il suffirait de trouver où se trouve ce squelette et de le compléter avec tes deux attributs. Je pense que ça sort du domaine css. C’est la balise html qui doit être renseignée.

    Suis-je clair ?

    Par contre, n’utilisant pas Gtmétrix, je ne suis pas sur de mon analyse.

    tout à fait clair mon capitaine mais :

    – la génération des smiley est faite par une fonction de wordpress. je veux bien la modifier mais alors à chaque mise à jour je suis bon pour retaper dans le code

    – la taille d’une balise peut se faire en css via sa class et c’est la méthode que j’aimerais utiliser plutôt que du html.

    #914787
    JHugues
    Membre
    Initié WordPress
    19 contributions

    Yep, on est d’accord sur tous les points.

    Je vais peut-être dire une bêtise, donc à prendre avec des pincettes.
    Il me semble que lorsque la balise img html est chargée, si les deux attributs height et width sont renseignés, la place que devra occuper la balise est fixée. Si ce n’est pas le cas, il faudra attendre les données du css qui fera le resize, d’où un petit recalcul. Ce doit être ça que Gtmétrix te signale. Et ce, même si le css resize à la taille de l’image.
    Encore une fois, à prendre avec des pincettes.

    Tu aurais le message d’erreur complet ?

    #914783
    JHugues
    Membre
    Initié WordPress
    19 contributions

    Je viens de checker ta page avec Gtmetrix.

    To prevent reflows, specify the width and height of all images, either in the HTML tag, or in CSS.

    A priori, l’explication confirme ce que je disais, au détail près que le fait d’avoir renseigné le css devrait prévenir le problème.

    De mon point de vu css la définition ne peut pas être plus complète.
    Je crains de sécher. Désolé.

    Et désolé pour le doublon.

12 sujets de 1 à 12 (sur un total de 12)
  • Vous devez être connecté pour répondre à ce sujet.