SOS-FORUM

Derniers sujets

» Silence Inside Me - Ouverture
par Solitude 3/3/2018, 12:36

» ATLANTIC CITY - rpg city
par Solitude 15/3/2017, 10:41

» Bonne Année 2015
par Chantra Chantrapa 5/3/2017, 20:31

» Rio de Janeiro
par Solitude 14/9/2015, 15:34

» Bon Anniversaire Zeco
par Laurent 29/5/2015, 06:29


Vous n'êtes pas connecté. Connectez-vous ou enregistrez-vous

Voir le sujet précédent Voir le sujet suivant Aller en bas  Message [Page 1 sur 1]

1 Bandeau sur l'avatar [phpBB2] le 21/4/2010, 21:53

avatar
Final-Blonde
Staff du forum
Voir le profil de l'utilisateur http://sansfil.forumactif.com/
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.

TEMPLATE ET CSS

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 :

plus petit plus grand

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.

Voir le sujet précédent Voir le sujet suivant Revenir en haut  Message [Page 1 sur 1]

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

 
  •  

Créer un forum | © PunBB | Forum gratuit d'entraide | Signaler un abus | Forum gratuit