Gérer la position des smileys et images dans les messages

Voir le sujet précédent Voir le sujet suivant Aller en bas

  • 0

Astuce Gérer la position des smileys et images dans les messages

Message par Ea le Ven 2 Avr 2010 - 18:05

Gérer la position verticale des smileys
et images dans les messages


Cette astuce fonctionne pour tout les types
de forum forumactif et est réalisable
avec juste un petit ajout dans le
CSS personnalisé du forum.


Comment ajouter la propriété ?

    C'est très simple, il suffit d'aller dans la page du css personnalisé comme suit :

      Panneau d'administration
      L'onglet Affichage
      Le cadre Images et Couleurs
      La page Couleurs
      L'onglet Feuille de style CSS
    Là il vous suffira d'ajouter tout à la fin de la zone de saisie le code qui suit :

    Code:
    sélecteur { vertical-align: valeur; }
    Dans lequel il faudra que vous ayez remplacé sélecteur et valeur suivant ce que vous souhaitez par rapport à ce qui est expliqué dans les deux points suivants.

    Pour terminer vous n'aurez qu'à cliquer sur le bouton Valider se trouvant juste à droite en dessous de la zone de saisie.

Les sélecteurs pour les différentes versions :

    Un sélecteur CSS c'est comme son nom l'indique un peu, l'expression qui va sélectionner les éléments auxquels on veut que les propriétés CSS qui suivent entre accolades s'appliquent.

    Chaque version a sa propre structure et donc les sélecteurs pour arriver à récupérer les images des messages dépendent de la version.

      Pour phpBB2 :

        On a une imbrication html comme ceci :

        Et nous on veut appliquer la propriété aux images dans le message, on peut donc tout simplement prendre les balises images ( img ) se trouvant dans une balise ayant la classe postbody ( cela s'écrit tout simplement en mettant un . devant le nom de la classe donc .postbody ).

        On arrive donc au sélecteur pour phpbb2 ( il y a plein d'autres possibilités ) suivant :

        Code:
        .postbody img

      Pour phpBB3 :

        On a alors cette imbrication là :

        C'est pareil que php pour le départ, on doit sélectionner les images ( img ) étant dans un élément avec la classe postbody ( .postbody ) mais en plus elles doivent être dans des éléments avec la classe content ( .content ) qui se trouve dans la balise avec la classe postbody.

        On a alors le sélecteur pour phpbb3 suivant :

        Code:
        .postbody .content img

      Pour PunBB :

        On a maintenant ceci comme structure html au niveau d'un message :

        C'est assez simple, il suffit de sélectionner les images ( img ) se trouvant dans un élément avec la classe entry-content ( .entry-content ), ce qui nous donne donc cette fois ce sélecteur pour punbb :

        Code:
        .entry-content img

      Pour Invision :

        Voici maintenant la dernière version, invision qui elle a une structure comme ceci :

        Comme en punbb c'est assez simple, on sélectionne les images ( img ) étant dans un élément avec la classe post-entry ( .post-entry ) ce qui nous donne donc le sélecteur pour invision :

        Code:
        .post-entry img


Les remplacements pour valeur et leurs significations :

    baseline

      Le bas de l'image est mis à la hauteur de la ligne de base ( la ligne horizontale qu'on pourrait tracer en touchant les bas des lettres b, a, s, u, m, i, e, ... mais qui couperait les g, p, j, ... ).


    top

      Le haut de l'image est mis à la hauteur du haut de la ligne de texte ( suivant la hauteur des lignes de texte le résultat sera donc différent ).


    bottom

      Le bas de l'image est mis à la hauteur du bas de la ligne de texte ( cela donnera donc aussi un résultat différent selon la hauteur des lignes ).


    middle

      L'image se mettra au milieu de la ligne de texte.


    text-top

      Le haut de l'image se mettra à la hauteur de la plus grande lettre de la ligne ( l'image sera donc plus haute pour une ligne où il n'est écrit que "b" que pour ligne où il n'est écrit que "a" ).


    text-bottom

      C'est le même principe mais pour le bas ( l'image sera donc plus basse avec une ligne où il n'est écrit que "g" qu'une ligne où il n'est écrit que "a" ).


    super

      L'image se met à la ligne de base des exposants.

      Un texte en exposant c'est par exemple : ceci.


    sub

      L'image se met à la ligne de base des indices.

      Un texte en indice c'est par exemple : cela.


    mesure en px, em, % ou ex

      L'image se met à la distance spécifiée de la ligne de base, si c'est négatif ce sera vers le dessous et si c'est positif vers le dessus, par exemple en mettant 4px l'image se mettra 4 pixels au dessus de la ligne de base :



Quelques exemples d'applications :

      Code:
      /* phpbb2 : mis au milieu */

      .postbody img { vertical-align: middle; }
      Code:
      /* phpbb3 : mis en exposant */

      .postbody .content img { vertical-align: super; }
      Code:
      /* punbb : mis 3 pixels en dessous de la ligne de base */

      .entry-content img { vertical-align: -3px; }
      Code:
      /* invision : mis à la ligne de base */

      .post-entry img { vertical-align: baseline; }



Ea
Aidactif
Aidactif

Messages : 23429
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum