Ce tutoriel a été publié par Zeco & Final-Blond sur SOS-Forum. Afin que les tutoriels de SOS-Forum restent en libre accès, ainsi que par respect du travail accompli, tout tutoriel copié ou s'en inspirant publié ailleurs qu'ici, devra en citer le ou les auteurs ainsi que la provenance via un lien vers ce sujet sur le SOS-Forum.

Une joulie petite astuce pour phpBB2 (possible aussi sur SF-BB en l'adaptant avec le "hors ligne"), qui permet de mettre un bandeau "En ligne" sur l'avatar comme ici :


On commence par le célébrissime template viewtopic_body

Quelque soit la position des icônes du profil dans un post, situez avec une recherche (Ctrl+F) cette variable :

Code:

{postrow.displayed.ONLINE_IMG}

Coupez (Ctrl+X) et collez-la (Ctrl+V) juste après l'image de l'avatar :

Code:

{postrow.displayed.POSTER_AVATAR}{postrow.displayed.ONLINE_IMG}

Afin de pouvoir positionner par du CSS, il nous faut mettre chaque variable dans une div que nous pourront aussi dimensionner :

Code:

<div class="avapose">{postrow.displayed.POSTER_AVATAR}</div>
<div class="olpose">{postrow.displayed.ONLINE_IMG}</div>

Enregistrer et publier.

Dans la feuille de style CSS nous allons donner leurs propriétés à ces deux attributs "class" :

.avapose {height: 170px; padding: 0px; margin: 0px; text-align: center;}
.avapose img {max-height: 170px;}
.olpose {position: relative; top: -170px; text-align: right; padding: 0px; margin: 0px;}

Pour ce qui est de placer le bandeau à gauche, si on modifie juste le text-align: right en left il faudra aussi jouer sur la position par rapport au top (haut) pour le situer en bas à gauche vu l'inclinaison du bandeau.
Je vous invite à faire des essais car à partir de là tout ce passe dans le CSS et plus besoin d'aller dans les templates.
Concernant les valeurs 170, il est possible de les changer à votre guise. Notez que les avatars dépassant cette valeur seront redimensionnés automatiquement (dans les sujets uniquement).

NB : Pour l'exemple, c'est le bandeau par défaut qui a été utilisé dont vous pouvez modifier l'image dans
la gestion des images > mode avancé > onglet Boutons > En ligne : url_image


PS : Le sujet est verrouillé, mais pour toutes les questions et éventuels besoins d'aide, je vous donne rendez-vous dans la section Aide aux tutoriels.