Mettre le profil en haut d'un message Bouton_activeMettre le profil en haut d'un message Bouton_hoverMettre le profil en haut d'un message Fb-hoverMettre le profil en haut d'un message Fb-active
AccueilForumÉquipe 
CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur:

Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus!

Derniers sujets
» Système d'onglets simple et personnalisable
Mettre le profil en haut d'un message EmptyLun 03 Juin 2024, 17:20 par birds

» Fiche de Présentation RPG
Mettre le profil en haut d'un message EmptySam 30 Mar 2024, 22:07 par Peyton972

» [RPG] Fiche personnage avec bannière
Mettre le profil en haut d'un message EmptySam 30 Mar 2024, 22:06 par Peyton972

» Structure de Qui Est En Ligne (1)
Mettre le profil en haut d'un message EmptyLun 04 Mar 2024, 23:20 par Peyton972

» Qui Est En Ligne - Utopia
Mettre le profil en haut d'un message EmptyDim 24 Déc 2023, 18:16 par romee

» Pack forum complet "Androïd Sylver" RPU (N°2)
Mettre le profil en haut d'un message EmptyJeu 02 Nov 2023, 06:42 par Hydrar

» Formulaire de connexion rapide amélioré
Mettre le profil en haut d'un message EmptySam 04 Mar 2023, 18:57 par Krager

» Avatar centré dans le profil
Mettre le profil en haut d'un message EmptySam 11 Fév 2023, 06:04 par Krager

Le deal à ne pas rater :
SSD interne Crucial BX500 2,5″ SATA – 500 Go à 29,99€
29.99 €
Voir le deal

CSSActif :: Tutoriels de CSSActif :: ForumActif Pas à pas :: Le ProfilPartagez
 

Mettre le profil en haut d'un message

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Solaris
Solaris
{ Codeur en stage }
{ Codeur en stage }

Masculin Messages : 15



Mettre le profil en haut d'un message Empty

Mettre le profil en haut d'un message


Informations générales

Description :
Avec cette personnalisation F.A, vous parviendrez à mettre le profil utilisateur à l'horizontale au-dessus des messages, comme dans l'exemple fourni.

Démo :
Voici l'exemple !

Testé sur :
Firefox

Crédits :
Proposé par Solaris le 01/05/2012 | Hiro

Mise(s) à jour :

Le tutoriel


Allez dans les Templates de votre forum (Panneau d'administration => Affichage => Templates), et repérez, dans la catégorie général, le template viewtopic_body. Une fois cela fait, cliquez sur le petit engrenage jaune afin de commencer l'édition.

Spoiler:

En jetant un oeil à ce screenshot, vous remarquerez une très grande différence par rapport à ce que vous verrez dans votre panneau d'administration. En effet, mon template est déjà modifié, et j'ai ajusté les élément pour faire un screenshot pas trop grand.

Ensuite, une fois dedans, repérez la ligne :
Code:

<!-- BEGIN displayed -->

Repérez ces lignes, situées quelques lignes après :

Code:

<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
<table><tr><td class="profil_contour">
         <span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br />
            <span class="postdetails poster-profile">
            {postrow.displayed.POSTER_RANK}<br />
            {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br /><br />
            <!-- BEGIN profile_field -->
            {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
            <!-- END profile_field -->
            {postrow.displayed.POSTER_RPG}
         </span><br />
         <img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
            </td></tr></table>

Remplacez par :

Code:

<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} align="left" valign="top" width="100%">
<table><tr><td class="profil_contour">
            <span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br />
               <span class="postdetails poster-profile">
                                        <div align="left" width="200">{postrow.displayed.POSTER_RANK}</div><br />
                                        <table><tr><td>{postrow.displayed.RANK_IMAGE}</td>
                                        <td>{postrow.displayed.POSTER_AVATAR}</td>
               <!-- BEGIN profile_field -->
                                        <td>{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}</td>
               <!-- END profile_field -->
                                        <td>{postrow.displayed.POSTER_RPG}</td></tr></table>
            </span><br />
            <img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
                  </td></tr></table>

Voici maintenant votre profil en haut de vos messages ! Cependant, il reste une petite manipulation à faire. En effet, manipuler cet endroit en change une autre, nous allons y remédier. Repérez ces lignes :

Code:

<tr>
      <td class="{postrow.displayed.ROW_CLASS} browse-arrows"{postrow.displayed.THANK_BGCOLOR} align="center" valign="middle" width="150">
         <a href="#top">{L_BACK_TO_TOP}</a> <a href="#bottom">{L_GOTO_DOWN}</a>
      </td>
      <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>
   </tr>

Elles sont situées une dizaine de lignes avant :

Code:

<!-- END displayed -->

Remplacez-les par :

Code:

<tr>
      <td class="{postrow.displayed.ROW_CLASS} messaging gensmall"{postrow.displayed.THANK_BGCOLOR} width="60%" height="28">
         <table border="0" cellspacing="0" cellpadding="0">
            <tr height="28">
               <td style="display:inline-block; max-height:50px;">
                                          <table><tr><td>{postrow.displayed.PROFILE_IMG}</td><td>{postrow.displayed.PM_IMG}</td><td>{postrow.displayed.EMAIL_IMG}</td><td><!-- BEGIN contact_field -->{postrow.displayed.contact_field.CONTENT}<!-- END contact_field --></td><td>{postrow.displayed.ONLINE_IMG}</td></tr></table>
               </td>
            </tr>
         </table>
      </td>
   </tr>
     <tr>
      <td class="{postrow.displayed.ROW_CLASS} browse-arrows"{postrow.displayed.THANK_BGCOLOR} align="center" valign="middle" style="width:150px;">
         <a href="#top">{L_BACK_TO_TOP}</a> <a href="#bottom">{L_GOTO_DOWN}</a>
      </td>
     </tr>

Vos images en bas de messages ne doivent donc pas dépasser 50px. Si c'est le cas, modifiez cette valeur :

Code:

max-height:50px;

Et voilà, normalement, cela devrait fonctionner, si je n'ai rien oublié. Merci à vous d'avoir pris le temps de lire cette personnalisation, en espérant qu'elle vous plaise.

EDIT 04/05/2012 : Et oui, j'avais bien oublié quelque chose.

Alors chaque valeur de premières tables (comment expliquer, les tables qui n'ont pas de table parent, il y en a plein et elles sont toutes concernées), au lieu de 100%, vous mettez la valeur que vous avez définie pour votre forum (en % ou en px)

Ensuite, cherchez cette ligne :

Code:

<th class="thRight" nowrap="nowrap" colspan="2">{L_MESSAGE}</th>

Et placez là dans un nouveau tr avant ces lignes :

Code:

<tr>
               <td><span class="postdetails"><img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" border="0" />{L_POST_SUBJECT}: {postrow.displayed.POST_SUBJECT}   <img src="{postrow.displayed.MINI_TIME_IMG}" alt="" border="0" />{postrow.displayed.POST_DATE}</span></td>
               <td valign="top" nowrap="nowrap" class="post-options">
                  {postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG}
               </td>
            </tr>

Ce qui devrait donner cela :

Code:

<tr>
                                     <th class="thRight" nowrap="nowrap" colspan="2">{L_MESSAGE}</th>
                             </tr>
            <tr>
               <td><span class="postdetails"><img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" border="0" />{L_POST_SUBJECT}: {postrow.displayed.POST_SUBJECT}   <img src="{postrow.displayed.MINI_TIME_IMG}" alt="" border="0" />{postrow.displayed.POST_DATE}</span></td>
               <td valign="top" nowrap="nowrap" class="post-options">
                  {postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG}
               </td>
            </tr>

Ensuite, descendez vers le bas de votre viewtopic-body et cherchez cette ligne :

Code:

<td align="right" nowrap="nowrap"><span class="gensmall">{L_JUMP_TO}: {S_JUMPBOX_SELECT} <input class="liteoption" type="submit" value="{L_GO}" /></span></td>

Et mettez là dans un nouveau tr en dessous du tr dans lequel elle est, comme ceci :

Code:

<tr>
      <td align="left" valign="middle" nowrap="nowrap" {WIDTH_GALLERY}>
         <span class="nav">
            <!-- BEGIN switch_user_authpost -->
            <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}Newtopic" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a>   
            <!-- END switch_user_authpost -->
            <!-- BEGIN switch_user_authreply -->
            <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
            <!-- END switch_user_authreply -->
         </span>
      </td>
      <!-- BEGIN moderation_panel -->
      <td align="center">
         <span class="gensmall">{moderation_panel.U_YOUR_PERSONAL_MODERATE}</span>
      </td>
      <td align="center" width="250">
         <span class="gensmall"> </span>
      </td>
      <!-- END moderation_panel -->
   </tr>
     <tr>
   <!-- BEGIN viewtopic_bottom -->
      
             <td width="250" align="right" nowrap="nowrap"><span class="gensmall">{L_JUMP_TO}: {S_JUMPBOX_SELECT} <input class="liteoption" type="submit" value="{L_GO}" /></span></td>
   <!-- END viewtopic_bottom -->
     </tr>

Enfin, déplacez cette ligne dans un nouveau tr :

Code:

<td>{postrow.displayed.POSTER_RPG}</td>

Comme ceci :

Code:

<table>
                                          <tr><td>{postrow.displayed.RANK_IMAGE}</td>
                                           <td>{postrow.displayed.POSTER_AVATAR}</td>
                  <!-- BEGIN profile_field -->
                                             <td>{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}</td>
                  <!-- END profile_field -->
                                          </tr>
                                          <tr>
                                           <td colspan="2">{postrow.displayed.POSTER_RPG}</td>
                                          </tr></table>

Voilà, cette fois-ci, c'est bel et bien terminé (j'espère sincèrement). Alors à vous et contactez-moi en cas de soucis Wink


Dernière édition par 'Christa le Sam 22 Sep 2012, 12:59, édité 9 fois (Raison : Maintien du code)
MessageSujet: Mettre le profil en haut d'un message   Mettre le profil en haut d'un message EmptyMar 01 Mai 2012, 10:52
Revenir en haut Aller en bas
http://www.i-love-harvard.com/
Kaiji
Kaiji
Blanche-Neige
Blanche-Neige

Féminin Messages : 5578



Mettre le profil en haut d'un message Empty
FAQ


Q
//

R
//


Pour toute question sur ce tutoriel, merci de poster une demande d'aide ici :
http://www.css-actif.com/f17-aide-css-xhtml
MessageSujet: Re: Mettre le profil en haut d'un message   Mettre le profil en haut d'un message EmptySam 02 Juin 2012, 18:51
Revenir en haut Aller en bas
http://www.css-actif.com
mafi
{ Membre }
{ Membre }

Masculin Messages : 12



Mettre le profil en haut d'un message Empty
merci
MessageSujet: Re: Mettre le profil en haut d'un message   Mettre le profil en haut d'un message EmptyDim 14 Juil 2013, 07:51
Revenir en haut Aller en bas
http://falonasynae.forumactif.com
Lyo
{ Membre }
{ Membre }

Féminin Messages : 65



Mettre le profil en haut d'un message Empty
Merci !
MessageSujet: Re: Mettre le profil en haut d'un message   Mettre le profil en haut d'un message EmptyVen 17 Avr 2015, 10:50
Revenir en haut Aller en bas
Contenu sponsorisé




Mettre le profil en haut d'un message Empty
MessageSujet: Re: Mettre le profil en haut d'un message   Mettre le profil en haut d'un message Empty
Revenir en haut Aller en bas
 

Mettre le profil en haut d'un message

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

 Sujets similaires

-
» Mettre sujet/message/dernier message avant description..
» Mettre le menu en haut [Résolu]
» Mettre un contour au profil et/ou à l'avatar
» Case "dernier message" décalée vers le haut
» Nom du personnage en haut de l'avatar dans le profil

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: Tutoriels de CSSActif :: ForumActif Pas à pas :: Le Profil-
ChatBox
:
AccueilAccueil  RechercherRechercher  Dernières imagesDernières images  Connexion  S'enregistrerS'enregistrer  

Partenaires Or

← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | ©phpBB | Forum gratuit d'entraide | Signaler un abus | Cookies | Forum gratuit