Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

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
Membre actif

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