Forum de Graph, aide Html et Css
 
AccueilAccueil  FAQFAQ  MembresMembres  GroupesGroupes  S'enregistrerS'enregistrer  ConnexionConnexion  

Partagez | 
 

 Un Cadre Autour de L'Avatar CM

Aller en bas 
AuteurMessage
Sweet Purple
Admin
avatar

Messages : 131
Date d'inscription : 12/07/2010
Age : 24

MessageSujet: Un Cadre Autour de L'Avatar CM   Jeu 28 Avr - 23:32

KETSIA a écrit:
Un Cadre Autour de L'Avatar


Niveau : Moyen / Intermédiaire
Auteur : Ketsia
A Quoi sa sert ? A mettre un cadre autour de l'avatar.


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:
 
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://couleurs-en-folies.forumsactifs.net
 
Un Cadre Autour de L'Avatar CM
Revenir en haut 
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Couleurs En Folie :: Codage :: Astuce &' Aide :: Templates-
Sauter vers: