Un Cadre Autour de L'Avatar CM

Qu'est-ce que cela a comme avantage ? Pour les fanatiques des avatars "effets fondus" avec le fond du forum il n'y a plus le problème pour le fond qui change de couleur suivant si on est sur un post pair ou impair. Le fond reste identique. Cela peut créer un style. C'est un choix, et un esthétisme différent !
A savoir, les codes qui seront à la suite seront à retravailler bien évidemment.
De plus, ce cadre que vous allez créer, avec un peu d'astuce vous pourrez aussi l'appliquée sur les informations dans les profils, c'est tout simple.

Première Etape : Votre CSS :

C'est donc un cadre. Vous allez devoir créer une nouvelle class. Vous lui donner donc le nom que vous voulez !
Il faudrait y ajouter un fond :

Code:

background-color : #COLOR ;
Ou
background-image : url("URL") ;

Il va vous falloir - ou pas des bordures :

Code:

border : Xpx solid/dotted/dashed/double #COLOR

Vous pouvez aussi leur ajouté un petit peu d'arrondis ... Allez allez :

Code:

-moz-border-radius: Xpx Xpx Xpx Xpx

Petit astuce, on commence par le coin en haut à gauche, et puis c'est dans le sens d'une aiguille d'une montre.

Selon la taille de votre avatar, vous pourrez ajouter une taille ou une largeur.

Code:

height : XXpx ;
width : XXpx ;

Ou alors tout simplement un padding, pour que l'avatar soit "écarté" de la bordure.

Code:

padding : XXpx ;

Récapitulons cette première étape :

Code:

.fondavatar {
background-color : #000000 ;
border : 5px solid #ffffff ;
-moz-border-radius: 5px 5px 5px 5px }

Deuxième Etape : Votre Template :
Pour pouvoir y accéder, il faut tout d'abord être sous le compte du fondateur.
> Panneau d'Administration
> Affichage
> Templates
> Général
> viewtopic_body

C'est ce passage qui va nous intéresser :

Code:

<span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span>

            <span class="postdetails poster-profile">
            {postrow.displayed.POSTER_RANK}

            {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}

Je vais vous expliquer un peu les variables de forumactif, ainsi vous pourrez personnaliser un peu plus que moi je peux vous le donner à la fin !

Code:

{postrow.displayed.POSTER_NAME} Le Pseudo.
{postrow.displayed.POSTER_RANK}  Le rang
{postrow.displayed.RANK_IMAGE} Une possible image dans votre Rang
{postrow.displayed.POSTER_AVATAR}  L'avatar n_n

Donc vous pouvez totalement changer de place le pseudo, le mettre sous l'avatar ou autre, c'est sympa ! C'est simple ! Et c'est donné à tout le monde.

Bref. Maintenant, que vous avez repérer ce que vous vouliez. Notre class ( ici "fondavatar" ) est à ajouté autour de ce que vous voulez.
Donc vous ajouter votre div autour de l'avatar, ou là où vous voulez n_n !

Code:

<div class="fondavatar">    </div>

Voilà vous savez tout !

Maintenant je vous montre ce que l'on peut faire un avec peut d'imagination :

Spoiler: