Sommaire

• Entourer seulement l'avatar
  • Version PhpBB2
    
  • Version PunBB
    
  • Version Invision
    
  • Version PhpBB3
• Entourer le pseudo, le rang et l'avatar
  • Version PhpBB2
    
  • Version PunBB
    
  • Version PhpBB3
    
  • Version Invision
• Entourer le profil complet !
  • Version PhpBB2
    
  • Version PunBB
    
  • Version PhpBB3
    
  • Version Invision
• Conclusion

Entourer seulement l'avatar

C'est le plus facile, il s'agit juste de définir le sélecteur adéquat dans votre feuille de styles CSS. Voici les sélecteurs pour chaque version des thèmes de ForumActif, à personnaliser comme vous le souhaitez :

Version PhpBB2

Code:

.postdetails.poster-profile a img {
        padding:2px; /* une marge entre la bordure et l'intérieur du bloc */
        margin:2px; /* une marge entre la bordure et l'extérieur du bloc */
        border:2px dotted #990000; /* la bordure */
        background:#EF7A7A; /*une couleur de fond */
    }

Pour rappel, lorsque vous définissez une bordure, vous pouvez préciser trois valeurs, dans l'ordre que vous souhaitez, séparées par un espace. Ces trois valeurs sont :

• L'épaisseur de la bordure, indiquée généralement en pixels
  
• La couleur de la bordure, indiquée en couleur web (red), en hexadécimal (#FF0000) ou en couleur rgb (rgb(255,0,0)).
  
• Le style de bordure, généralement solid, dashed (tirets), dotted (pointillés) ou double (à condition d'une épaisseur de 3px et plus).

Pour plus d'informations, consultez cette page.

Version PunBB

Code:

.pun .user-ident .user-basic-info a img {
        padding:2px; /* une marge entre la bordure et l'intérieur du bloc */
        margin:2px; /* une marge entre la bordure et l'extérieur du bloc */
        border:2px dotted #990000; /* la bordure */
        background:#EF7A7A; /*une couleur de fond */
    }

Version Invision

Code:

.postprofile-details.postdetails dt a img {
        padding:2px; /* une marge entre la bordure et l'intérieur du bloc */
        margin:2px; /* une marge entre la bordure et l'extérieur du bloc */
        border:2px dotted #990000; /* la bordure */
        background:#EF7A7A; /*une couleur de fond */
    }

Version PhpBB3

Code:

.postprofile > dl > dt a img {
        padding:2px; /* une marge entre la bordure et l'intérieur du bloc */
        margin:2px; /* une marge entre la bordure et l'extérieur du bloc */
        border:2px dotted #990000; /* la bordure */
        background:#EF7A7A; /*une couleur de fond */
    }

Entourer le pseudo, le rang et l'avatar.

Version PhpBB2

Allez dans viewtopic_body. Cherchez ceci :

Code:

      <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
                <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>

Etape 1 : Juste après la première ligne (L'ouverture de la cellule de profil, qui commence donc par <td ... >), sautez une ligne et ajoutez un nouveau bloc de la classe de votre choix, ici ce sera .blocProfil, et donc la ligne à ajouter sera la suivante :

Code:

<div class="blocProfil">

Etape 2 : Comme vous vous en doutez, il va vous falloir également fermer cette <div>, très exactement juste avant le profil (vu qu'on ne veut encadrer que le pseudo, le rang et l'avatar), c'est à dire avant la ligne <!-- BEGIN profile_field -->. Mais il y a un piège, bien sûr. Regardez bien votre code. Un <span> a été ouvert quelques lignes plus haut, et est fermé un peu plus bas. Vous ne pouvez raisonnablement pas fermer votre div à ce niveau là car il y aurait un croisement de balises ! (au lieu d'avoir []() ou [()] on aurait [(]), ce qui n'a pas de sens) Bref, vous devez donc fermer le span, puis la div, puis réouvrir une balise span avec les mêmes classes que précédemment.

En d'autres termes, le code à placer juste avant BEGIN profile_field est le suivant :

Code:

</span><!-- ON FERME LE SPAN .postdetails.poster-profile -->
    </div> <!-- ON FERME le DIV .blocProfil -->
    <span class="postdetails poster-profile"> <!-- ON REOUVRE UN SPAN -->

Ainsi, l'honneur est sauf et il n'y aura pas de croisement de balises. Le code résultant, pour un template de base, sera donc le suivant :

Code:

        <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
                <div class="blocProfil"> <!-- OUVERTURE DU DIV .blocProfil -->
                    <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 />
                    </span><!-- ON FERME LE SPAN .postdetails.poster-profile -->
                </div> <!-- ON FERME le DIV .blocProfil -->
                <span class="postdetails poster-profile"> <!-- ON REOUVRE UN SPAN -->
                    <!-- 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>

Etape 3 : Il ne vous reste plus qu'à définir la mise en forme de votre contour dans votre feuille de styles CSS :

Code:

.blocProfil {
        padding:2px; /* une marge entre la bordure et l'intérieur du bloc */
        margin:2px; /* une marge entre la bordure et l'extérieur du bloc */
        border:2px dotted #990000; /* la bordure */
        background:#EF7A7A; /*une couleur de fond */
    }

Voyez plus haut pour les explications sur la bordure.

Version punBB

La mise en page particulière de PunBB rend l'opération difficile, mais pas impossible. Dans la mesure où nous avons toutes les classes nécessaires à notre disposition, inutile d'éditer les templates (opération souvent sujette à erreurs).
Dans les faits, le code contenant le pseudo, l'avatar et le rang est intégralement placé dans une div de classe .user-ident. Mais en réalité, le pseudo est placé juste au-dessus de cette div via un peu de CSS. Vous pouvez décider de conserver les choses en l'état, ou bien trafiquer le code CSS de base de punBB pour "rectifier" le problème.
Le code "rectificatif" est le suivant :

Code:

.pun .user {
      padding-top:0; /* on retire l'espacement originellement prévu pour le haut du profil */
    }
    .pun .user-ident .username {
    position:static; /* on replace le pseudo dans le flux courant */
    }

Et le code de base pour entourer le profil (sans les champs de profil) est le suivant :

Code:

.pun .user .user-ident {
      padding:2px; /* une marge entre la bordure et l'intérieur du bloc */
      margin:2px; /* une marge entre la bordure et l'extérieur du bloc */
      border:2px dotted #990000; /* la bordure */
      background:#EF7A7A; /*une couleur de fond */
    }

Version phpBB3

Code:

.postprofile dl dt {
        padding:2px; /* une marge entre la bordure et l'intérieur du bloc */
        margin:2px; /* une marge entre la bordure et l'extérieur du bloc */
        border:2px dotted #990000; /* la bordure */
        background:#EF7A7A; /*une couleur de fond */
        width:150px; /* largeur */
    }

Vous noterez l'apparition de la propriété width. Dans les démonstrations qui accompagnent ce tutoriel, l'avatar fait 150px de large, or sur phpbb3 la largeur du profil (et donc du contour) est nettement supérieure. Histoire d'harmoniser la mise en page, on limite donc la largeur du profil à celle de l'avatar. Si votre avatar est assez large pour éviter le problème, vous pouvez vous passer de cette ligne.

Version Invision

Code:

.postprofile-details.postdetails dt {
        padding:2px; /* une marge entre la bordure et l'intérieur du bloc */
      margin:2px; /* une marge entre la bordure et l'extérieur du bloc */
      border:2px dotted #990000; /* la bordure */
      background:#EF7A7A; /*une couleur de fond */
      width:150px;
    }

Comme pour phpbb3, l'utilisation de la propriété width permet d'éviter que le contour ne prenne toute la largeur du profil. Si votre avatar est assez large, vous pouvez vous passer de cette ligne !

Entourer le profil complet !

Version PhpBB2

La procédure est similaire à la précédente, avec une petite subtilité qui rend la manipulation finalement plus simple.
Etape 1 : Identique à l'étape 1 précédente.
Etape 2 : Vous devez une fois de plus fermer le <div> que vous avez ouvert à l'étape 1, mais cette fois-ci nous voulons également envelopper le profil. De ce fait, pas besoin de nous compliquer la vie : vous pouvez donc placer votre balise fermante juste après le dernier </span>, ou plus simplement, sur une ligne vide juste avant ou après l'image (Donc le code ressemble à ceci, pour rappel : <img src="..." ... />).
Ce qui nous donne le code final suivant :

Code:

      <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
                <div class="blocProfil"> <!-- OUVERTURE DU DIV .blocProfil -->
                    <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 />
                </div> <!-- FERMETURE DU DIV .blocProfil -->
                <img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
            </td>

Etape 3 : Voir l'étape 3 de la partie précédente.

Version punBB

La personnalisation est ici assez limitée, toujours en raison de la structure de base de PunBB. Inutile de passer par les templates une fois de plus, vous vous en mordriez les doigts. Cette fois-ci, le sélecteur à personnaliser est le suivant :

Code:

.pun .post .user {
      padding-left:2px; /* une marge interne à gauche */
      border:2px dotted #990000; /* une bordure */
      background:#EF7A7A; /*une couleur de fond */
    }

NE RAJOUTEZ SURTOUT PAS DE MARGES. Le positionnement du profil est justement à base de marges, les modifier risquerait de l'envoyer se promener dans votre page.

Version phpBB3

Code:

.postprofile dl {
        padding:2px; /* une marge entre la bordure et l'intérieur du bloc */
      margin:2px; /* une marge entre la bordure et l'extérieur du bloc */
      border:2px dotted #990000; /* la bordure */
      background:#EF7A7A; /*une couleur de fond */
      width:166px; /* largeur */
    }

Comme pour la précédente partie, une propriété width a été ajoutée (elle vaut la largeur de l'avatar + 16px, en raison des marges par défaut de part et d'autre de l'avatar). Ce n'est pas nécessaire, mais cela permet d'harmoniser la mise en page.

Version Invision

Code:

.postprofile-details.postdetails {
        padding:2px; /* une marge entre la bordure et l'intérieur du bloc */
      margin:2px; /* une marge entre la bordure et l'extérieur du bloc */
      border:2px dotted #990000; /* la bordure */
      background:#EF7A7A; /*une couleur de fond */
      width:150px;
    }

Comme pour PhpBB3, il vaut mieux utiliser une largeur fixe, voire centrer le bloc (en remplaçant margin:2px; par margin:2px auto;) pour harmoniser la mise en page.

Conclusion

Evidemment, il y aura probablement quelques subtilités supplémentaires selon la version de ForumActif que vous utilisez. En cas de problème, n'oubliez pas de poser vos questions dans la section aide du forum et n'hésitez pas à laisser un commentaire pour toute suggestion d'amélioration du tutoriel ou simplement un remerciement voire un aperçu de votre propre résultat, parce que ça fait toujours plaisir.