phpBB2 : Déplacer le bouton "En ligne" dans les messages

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

  • 0

Astuce phpBB2 : Déplacer le bouton "En ligne" dans les messages

Message par Matriochka le Mar 2 Avr 2013 - 17:26

phpBB2 : Déplacer l’icône "En ligne" dans les messages


Ce tutoriel vous permettra de déplacer l’icône "En ligne" sur votre forum Forumactif, comme sur cet exemple : Démonstration en image.

Avant toute chose, assurez-vous :
- D’être en version phpBB2,
- D’être le fondateur de votre forum et d’avoir accès à ses templates,
- D’avoir bien affiché l’icône "En ligne" dans votre panneau d’administration



Première étape : les templates

Rendez-vous dans le template viewtopic_body :
Panneau d’administration ► Affichage ► Templates ► Général ► viewtopic_body

Trouvez cette partie, qui correspond à la zone de contact dans les messages :

Code:
      <td class="{postrow.displayed.ROW_CLASS} messaging gensmall"{postrow.displayed.THANK_BGCOLOR} width="100%" height="28">
         <table border="0" cellspacing="0" cellpadding="0">
            <tr>
               <td valign="middle">
                  {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field --> {postrow.displayed.ONLINE_IMG}
               </td>
            </tr>
         </table>
      </td>
Repérez la variable suivante et supprimez-la :
Code:
{postrow.displayed.ONLINE_IMG}
Celle-ci est celle qui génère l’image "En ligne" que nous désirons déplacer.

Une fois ceci fait, repérez la variable suivante, un peu plus haut dans le template :
Code:
{postrow.displayed.POSTER_AVATAR}
Celle-ci est chargée de générer l’avatar des membres dans la case "Auteur".

Déplacez la variable {postrow.displayed.ONLINE_IMG} juste au-dessus en lui attribuant une class, comme ceci :
Code:
<span class="icon_online">{postrow.displayed.ONLINE_IMG}</span>
Ce qui donne :
Code:
<span class="icon_online">{postrow.displayed.ONLINE_IMG}</span>
{postrow.displayed.POSTER_AVATAR}

Lorsque la modification est terminée, enregistrez le template en cliquant sur le bouton adéquat et publiez-le afin que la modification soit convenablement prise en compte.

Note importante : Si votre template a été modifié, aucun souci, vous pouvez effectuer malgré tout la modification en vous repérant grâce à la variable générant l’avatar : {postrow.displayed.POSTER_AVATAR}.


Seconde étape : la personnalisation CSS

Rendez-vous dans :
Panneau d’administration ► Affichage ► Couleurs ► Feuille de styles CSS

Maintenant que le template a été modifié et qu’une class a été attribuée à l’icône "En ligne", nous allons pouvoir la placer où bon nous semble en utilisant simplement ce code :
Code:
.icon_online {
position:absolute;
margin-left:***px;
margin-top:-***px;}

Explications :
- position:absolute permet ici de faire flotter l’image,
- margin-left:***px; permet de paramétrer la position de l’image par rapport à la gauche (on créé en fait une marge positive pour déplacer l’image par rapport à la gauche),
- margin-top:-***px; permet de paramétrer la position de l’image par rapport au haut (on créé cette fois-ci une marge négative pour déplacer l’image par rapport au haut)

Modifications :
Dans le code donné, vous devrez modifier margin-left:***px; et margin-top:-***px;. Remplacez les étoiles par les valeurs de votre choix.

Tutoriel en relation
- Icônes de contact sous le profil posteur (phpBB2)

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

Matriochka 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