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

[Ea]

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; }

Ce tutoriel a été rédigé par le Staff du Forum des Forums, Et en particulier par Etana. Aucune reproduction possible sans notre accord, conformément à l’article L122-1 du CPI.