AccueilAccueil  FAQFAQ  RechercherRechercher  MembresMembres  GroupesGroupes  S'enregistrerS'enregistrer  ConnexionConnexion  



 
Bonjour Invité
Merci d'avoir choisi city of pub



→ Pour poster dans la partie "AIDES CSS" il te faut te présenter:
"Fiche de présentation"
Des jeux pour vous, pour vos pubs et pour s'amuser !
C'est par ici: Jeu du JackPot et CityGame
Bonne chance à vous !
Recherche URGENT:
Graphiste, Aide RPG, Codeur, Correcteur,
En savoir + !!
Notre forum met en place sa fiche
Vous pouvez la mettre sur votre forum
une fois votre pub poster: Fiche du forum

Partagez | 
 

 information personnage derrière avatar

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage


Oswinwho

PROFIL Féminin

✎ Blabla : 1903
✎ PeaCPt's : 9682
✎ Musique du moment : Still loving you de Scorpion
✎ Livre du moment : Atom(ka) de Franck Thilliez
✎ Gif :
PETIT +
En savoir plus
Nombre de forum: 1
Emploi/loisir: ...
Un peu +:
MessageSujet: information personnage derrière avatar   05.11.13 22:33

Information personnage derrière avatar

Aujourd'hui je vais vous montrer comment faire un avatar qui cache/montre les infos de la feuille personnage.

Pour cela il faut que vous soyez Admin, ayez accès au template et connaissez les bases du CSS.

Voilà le résultat avatar de 200x310 !


Alors au lieu de copier/collé bêtement les codes, je vais vous expliquer vite fait.

Alors commençons par le template.
Panneau Administration >> Affichage >> Template >> Général >> viewtopic_body

Les variables à se préoccuper:

{postrow.displayed.POSTER_AVATAR} => Avatar du poster
{postrow.displayed.POSTER_RPG} => Feuille de personnage

Là on veut mettre {postrow.displayed.POSTER_RPG} derrière l'avatar.

Donc vous repèrez dans le template.

Code:
{postrow.displayed.POSTER_AVATAR}
Et vous l'entourez d'une DIV class et d'une ID.

Remplacer par:

Veuillez poster pour voir le codage:


Ensuite comme on veut mettre la feuille de personnage derrière l'avatar, on repère:

Code:
{postrow.displayed.POSTER_RPG}
et on l'entoure aussi d'une Div.

Remplacer par:

Veuillez poster à la suite pour voir le code:


Ensuite enregistrez, cliquez sur la croix verte pour qu'on voit sur votre forum. Passons maintenant au CSS.
Donc on a ajouté des div dans votre templates avec les noms: "glisse_avatar", "slide_avatar" et "infos_avatar".

Donc dans votre CSS, comme il y a une ID, on commence par mettre un # (dièse) suivit du nom de l'id (slide_avatar) et on ouvre une accolade. La taille de votre avatar largeur et hauteur (ici 200x310), le contour, les arrondissements et on ferme avec une accolade

Ce qui donne:

Veuillez poster à la suite pour voir le codage


ensuite on s'occupe de l'avatar qui glisse:

donc là pas besoin de dièse, c'est une class. on met donc un point suivit du nom de la div: glisse_avatar on ouvre une accolade et on met la taille de l'avatar suivit des transitions normal et ceux des autres navigateurs et on ferme l'accolade.

ça nous donne:

Veuillez poster à la suite pour voir le codage


On repart sur le slide de l'avatar quand on doit passer la souris dessus. On reprend le dièse (#) le nom du slide suivi sur la même ligne de hover et de glisse_avatar on ouvre une accolade et on rajoute margin-left et la largeur de l'avateur on ferme avec une accolade.

Veuillez poster à la suite pour voir le codage


Et pour conclure (enfin oui) on va créer le dernier CSS pour les infos derrière l'avatar.
Dans ce cas, on met un point suivit du nom de la div: infos_avatar ouvrir une accolade mettre le fond (image ou couleur) taille d'écriture, taille de l'avatar. fermer avec une accolade.

Veuillez poster à la suite pour voir le codage


à présent, enregistrez votre CSS et normalement vos infos sont derrière l'avatar.

Un souci avec ce tuto ? N'hésitez pas à me le faire savoir.

édit:

ceci est Champ du profil, Valeur du champ profil et Mode de séparation du champ du profil

Code:
<!-- BEGIN profile_field -->
      {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
       <!-- END profile_field -->

Si vous les avez placé dans la div de l'avatar, ils irons sous l'avatar et s’afficheront ainsi:



Ils seront au dessus du fond et non dessus alors assurez-vous qu'ils soient bien placé dans la div si vous les voulez derrière l'avatar pour qu'ils soient sur l'image de fond !
©City pub



“Vivre, c'est espérer et attendre.”


Dernière édition par Oswinwho le 21.06.14 17:14, édité 5 fois
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://xlittletenshix.tumblr.com/
Invité

Invité

PROFIL
PETIT +
MessageSujet: Re: information personnage derrière avatar   02.12.13 17:43

merci
Revenir en haut Aller en bas


Oswinwho

PROFIL Féminin

✎ Blabla : 1903
✎ PeaCPt's : 9682
✎ Musique du moment : Still loving you de Scorpion
✎ Livre du moment : Atom(ka) de Franck Thilliez
✎ Gif :
PETIT +
En savoir plus
Nombre de forum: 1
Emploi/loisir: ...
Un peu +:
MessageSujet: Re: information personnage derrière avatar   21.06.14 17:14

Codage revu et corrigé par Oswinwho



“Vivre, c'est espérer et attendre.”
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://xlittletenshix.tumblr.com/
Invité

Invité

PROFIL
PETIT +
MessageSujet: Re: information personnage derrière avatar   10.08.14 15:48

merci I love you
Revenir en haut Aller en bas


Oswinwho

PROFIL Féminin

✎ Blabla : 1903
✎ PeaCPt's : 9682
✎ Musique du moment : Still loving you de Scorpion
✎ Livre du moment : Atom(ka) de Franck Thilliez
✎ Gif :
PETIT +
En savoir plus
Nombre de forum: 1
Emploi/loisir: ...
Un peu +:
MessageSujet: Re: information personnage derrière avatar   11.08.14 11:40

Bonjour Plastic Bird et bienvenu parmi nous cela aurait été bien de te présenter Smile



“Vivre, c'est espérer et attendre.”
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://xlittletenshix.tumblr.com/
Invité

Invité

PROFIL
PETIT +
MessageSujet: Re: information personnage derrière avatar   04.08.15 2:36

merci
Revenir en haut Aller en bas


Contenu sponsorisé

PROFIL
PETIT +
MessageSujet: Re: information personnage derrière avatar   Aujourd'hui à 1:59

Revenir en haut Aller en bas
 

information personnage derrière avatar

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

 Sujets similaires

-
» information personnage derrière avatar
» Comment ajouter une information sous l'avatar d'un membre
» Info de profil caché derrière l'avatar
» "L'URL de l'avatar est invalide" à la modification de l'avatar du profil
» Code avatar qui disparait

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
city of pub :: Entraides :: CSS & HTML-