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

information personnage derrière avatar
Voir le sujet précédent Voir le sujet suivant Aller en bas

 :: Entraides :: CSS & HTML
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


Soyons extraordinaires ensemble, plutôt qu’ordinaires séparément.
Je veux mourir dans tes bras à 110 ans ou plus. Voila ce que je veux.
   
avatar

En savoir plus
Nombre de forum: 1
Emploi/loisir: crochet, bracelet brésilien, cuisiner, dessiner, cartonnage !
Un peu +:
Voir le profil de l'utilisateur
Féminin

✎ Citation : Chaque personne qu’on s’autorise à aimer, est quelqu’un qu’on prend le risque de perdre.
✎ Blabla : 1973
✎ PeaCPt's : 9782
✎ Musique du moment : Aucune je me passe de musique
✎ Livre du moment : Je n'arrive pas à lire en ce moment
✎ Gif :
Revenir en haut Aller en bas
MessageSujet: Re: information personnage derrière avatar 02.12.13 17:43
merci
Invité
Invité
Revenir en haut Aller en bas
MessageSujet: Re: information personnage derrière avatar 21.06.14 17:14
Codage revu et corrigé par Oswinwho


Soyons extraordinaires ensemble, plutôt qu’ordinaires séparément.
Je veux mourir dans tes bras à 110 ans ou plus. Voila ce que je veux.
   
avatar

En savoir plus
Nombre de forum: 1
Emploi/loisir: crochet, bracelet brésilien, cuisiner, dessiner, cartonnage !
Un peu +:
Voir le profil de l'utilisateur
Féminin

✎ Citation : Chaque personne qu’on s’autorise à aimer, est quelqu’un qu’on prend le risque de perdre.
✎ Blabla : 1973
✎ PeaCPt's : 9782
✎ Musique du moment : Aucune je me passe de musique
✎ Livre du moment : Je n'arrive pas à lire en ce moment
✎ Gif :
Revenir en haut Aller en bas
MessageSujet: Re: information personnage derrière avatar 10.08.14 15:48
merci I love you
Invité
Invité
Revenir en haut Aller en bas
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


Soyons extraordinaires ensemble, plutôt qu’ordinaires séparément.
Je veux mourir dans tes bras à 110 ans ou plus. Voila ce que je veux.
   
avatar

En savoir plus
Nombre de forum: 1
Emploi/loisir: crochet, bracelet brésilien, cuisiner, dessiner, cartonnage !
Un peu +:
Voir le profil de l'utilisateur
Féminin

✎ Citation : Chaque personne qu’on s’autorise à aimer, est quelqu’un qu’on prend le risque de perdre.
✎ Blabla : 1973
✎ PeaCPt's : 9782
✎ Musique du moment : Aucune je me passe de musique
✎ Livre du moment : Je n'arrive pas à lire en ce moment
✎ Gif :
Revenir en haut Aller en bas
MessageSujet: Re: information personnage derrière avatar 04.08.15 2:36
merci
Invité
Invité
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-
Sauter vers: