Welcome to Gaia! ::

Les premiers pas étant franchis, je vais établir une liste la plus complète possible (mais pas du tout exhaustive), de tout ce qui est modifiable sur les profils (Old School et New Profile) grâce au CSS. Cette liste vous sera utile si vous ne savez pas par quoi commencer, ou si vous voulez changer un point particulier mais ne savez pas comment.
Cette liste ne vous indique pas quels changements vous pouvez effectuer (pour cela référez-vous aux posts de Neo-Ryu), mais à quoi vous pouvez les appliquez. Si vous recherchez un code en particulier, faites Ctrl+F.

N'hésitez pas à apporter vos suggestions, vos appréciations et vos questions !
Si un code vous parait obscur ou si vous désirez connaitre la signification d'un code qui n'apparait pas dans la liste, vous pouvez le poster !


La liste comporte le nom des sections (ID, classes ou "tags") en gras suivi de leur description; plus on entrera dans les détails, plus le texte sera décalé sur la droite. Toutes les caractéristiques sont ici définies par défaut.
Pour certains codes, vous devrez trouver/choisir celui qui vous convient le mieux en testant par vous-même.

Sommaire :

1. Introduction et html (Vous êtes ici)
2. Old School / v.1
3. New Profile / v.2
4. Les "Codes Mystère"
5. Old School <> New Profile, les équivalences

Pour commencer, voici quelques "tags" provenant du langage html et communes aux deux versions de profil, ainsi qu'à de nombreuses sortes de code :


html
___La fenêtre du navigateur (la barre de défilement comprise)

body
___Le corps entier de la page

a:link
___Les liens qui n'ont pas été visités

a:hover
___Ces mêmes liens lorsque l'on y passe le curseur

a:visited
___Les liens qui ont été visités

h2
___S'applique aux en-têtes des sections ('#journal h2' par exemple)

wahmbulance Attention !! La particularité de cette version nécessite votre vigilance ! wahmbulance
La page d'édition est une première etape, l'usage du CSS en est une seconde. Avant de commencer à coder, vous devez en effet vous assurer de la présence ou de l'absence des sections selon que vous les désiriez ou non. Prenez soin d'avoir ajouté et/ou supprimé le nécessaire, il est inutile de modifier une section qui n'apparaitra pas !





#header
___L'en-tête de votre profil. Absente par défaut.
____#header a :link
________Les liens de l'en-tête : My Gaia, Community,... Edit My Profile et Sign Out
____#header a:hover
________Ces mêmes liens lorsque l'on passe son curseur dessus
____#header a:visited
_______Ces mêmes liens une fois que l'on a cliqué dessus
#header_left
___Les liens de gauche : My Gaia, Community, Games, World, Contribute, Votre pseudo
____#header_left img
_______Le logo Gaiaonline situé au début des liens d'en-tête
____#header_left a.user_info img
_______La zone cliquable aux côtés de votre pseudo qui affiche vos informations >
#header_right
___Les liens de droite : Edit my Profile, Sign Out

#columns
___Le contenant des colonnes

#column_1
___La colonne (ou contenant) de gauche

#column_2
___La colonne du milieu

#column_3
___La colonne "bonus", située en bas à gauche tant que vous ne modifiez pas son emplacement

.panel
___Vous permet de définir des caractéristiques a l’ensemble des sections de la page sans avoir à les traiter une par une

.panel h2
___Vous permet de traiter la totalité des en-têtes de vos sections


.details_panel
___La section ou s'affichent votre avatar et vos détails
.details_panel img
___Votre avatar
____.details_panel strong
_______Les titres de vos détails

.equipped_list_panel
___La section affichant ce que vous portez
____.equipped_list_panel .item_info (img)
_______Les cases individuelles des items que vous portez

.wish_list_panel
___La section montrant les items dont vous rêvez
____.wish_list_panel .item_info (img)
_______Les cases individuelles des items dont vous rêvez

___#item_info
______Les sections s'ouvrant lorsque l'on clique sur les items de votre profil
___#item_info img
______La case contenant l'image de l'item
___#item_info p
______Les cases contenant les données de l'item
___#item_info li
______Les cases "Add to Wish List" et "Check Marketplace"
___#item_info a
______Les liens contenus dans la section

.forums_panel
___La section affichant votre nombre de post et le lien pour y accéder
____.forums_panel strong
_______Les titres "Posts per Day" et "Total Posts"

.about_panel
___La section contenant le texte censé vous concerner

.friends_panel
___La section affichant la liste de vos amis
____.friends_panel li
_______Les cases regroupant les noms et les avatars de vos amis
____.friends_panel img (ou .friends_panel ul li img)
_______Les avatars de vos amis et le bouton aux cotés de leur avatar
____.friends_panel a.user_info img
_______Les boutons d'information
____.friends_panel p span a (ou .friends_panel ul li p span a)
_______Les pseudos de vos amis

.journal_panel
___La section consacrée aux posts de votre journal
____.journal_panel h3
_______Le titre de votre journal
____.journal_panel #entries
_______Les articles de votre journal

.media_panel
___La section ou votre multimédia se trouve
.media_panel embed
___Votre multimédia (sa taille notamment)

.comments_panel
___La section affichant les commentaires
____.comments_panel dl.style1
_______La case contenant tous vos commentaires
____.comments_panel dd (ou .comments_panel dl.style1 dd)
_______Les grandes cases contenant vos commentaires
____.comments_panel dd .avatar (ou .comments_panel dl.style1 dd .avatar)
_______Les avatars de vos commentateurs
____.comments_panel dd p (ou .comments_panel dl.style1 dd p)
_______Vos commentaires
____.comments_panel dt (ou .comments_panel dl.style1 dt)
_______Les cases comprenant les pseudos de vos commentateurs et la date de vos commentaires
________.comments_panel dt span.date
___________La date de vos commentaires
________.comments_panel dt span.username
___________Les pseudos de vos commentateurs
____.comments_panel img
_______Prend en compte toutes les images de la section: les avatars, les smileys, les boutons (.user_info img)...
____.deletecomment
_______L'onglet de suppression de commentaire (uniquement visible par le propriétaire)

a.user_info img (ou .username a img)
___Les zones cliquables aux côtés des pseudos dans vos commentaires affichant leurs informations >
#user_info
___Les sections contenant vos informations et celles de vos commentateurs
____#user_info img
_______La case comportant l'avatar
____#user_info p
_______Les trois premières cases des sections: "Close", Le pseudo et l'avatar
____#user_info li
_______Les cases suivantes: "Add...", "Send Message", "Trade Items", "View Posts" et "View Guilds"
____#user_info a
_______Les liens contenus dans la section

.interests_panel
___La section affichant vos intérêts
____.interests_panel h3
_______Les titres de vos intérêts
____.interests_panel ul.interest_tags (li)
_______Les cases contenant vos "tags"

.contact_panel
___La section permettant aux visiteurs de vous contacter (ajouter à la friendlist, envoyer un message, échanger des items)
____.contact_panel ul
_______La grande case contenant les liens pour vous contacter
____.contact_panel ul li
_______Les petites cases individuelles de ces liens

.signature_panel
___La section consacrée à votre signature

.house_panel
___La section affichant votre maison

.guilds_panel
___La section permettant aux visiteurs de voir à quelle(s) guilde(s) vous appartenez et d'y accéder

.store_panel
___La section affichant la "page d’accueil" de votre boutique


exclaim Important : exclaim
Cette version de profil vous permet d'ajouter des sections plus facilement, par exemple d'exposer plusieurs multimédias, zones de texte... Mais les customizer separément implique de traiter leur ID respective et unique, dans le cas contraire, vos changements s'appliqueront à l'ensemble des sections du même style (si vous avez deux vidéos par exemple, utiliser la classe .media_panel pour chacun n'aura pour effet que d'appliquer une même modification aux deux vidéos).

POUR CELA : vous devrez créer une section de votre choix dans la page d'édition de votre profil en utilisant l'onglet "Content"; prenons par exemple une section de type "custom". Pour mieux pouvoir l'identifier par la suite, vous y écrirez un petit texte (en cliquant dans la fenêtre sur "Edit"), ici "Blah blah".
Puis vous cliquerez sur "View Profile". Une fois votre profil chargé, vous irez dans la section Affichage de votre navigateur puis sur "Source" (ou "Code source de la page" sur Firefox). Lorsque le bloc-note sera ouvert vous irez dans Edition > Rechercher et vous taperez votre texte, "Blah blah" (illustration de l'exemple). Au dessus de ce texte vous pourrez alors voir quelque chose comme ceci :

Un petit récapitulatif générique des equivalences des deux versions:


Old School System <> v2 System

body <> html
#extendedProfileBody #header h1 <> #header
.section <> .panel
.section h2 <> .panel h2
#content <> #columns
#content #main <> #column_2
#content #sidebar <> #column_1
#multimedia embed <> .media_panel embed
#profile .items <> .equipped_list_panel
#wishlist <> .wish_list_panel
#multimedia <> .media_panel
#signature <> .signature_panel
#profile <> .details_panel
#friends <> .friends_panel
#journal <> .journal_panel
#about <> .about_panel
#comments <> .comments_panel

réservé

réservé

C'est intéressant, mais un peu effrayant quand même ^^" J'essaierai de m'y coller sérieusement quand j'aurai assez de temps. Bravo pour tout ce boulot en tout cas ! ^^

C'est vrai que c'est impressionnant avec tout les terme technique... sweatdrop par contre, y'as une chose que je n'est pas comprise : il faut taper ou ces code pour pouvoir modifier son profile?

Je suis désespérément à la recherche du tag permettant de gérer les icônes "questing", "donated", "bought", etc. dans la wishlist. J'ai cherché ici et là, fait des tests, mais rien à faire. sweatdrop Est-ce que quelqu'un l'aurait par hasard ?
Merci !