Envie de customiser sa HP ??

Après avoir bien galéré pour customiser ma HP, je décide d'aider tout le monde en rassemblant ici les codes a ajouter pour obtenir des ptit truc sympa

parce que allez voir 10000 pages pour trouver 3 bouts de codes c pas evidents
car ces infos sont disséminée entre plusieurs forum et le blog
pas evident pour rechercher

tout d'abors, je tiens a remercier COBRA330, qui m'a pas mal aidé (et qui a trouvé les codes), mais aussi a 5Di (pour les infos sur son blog imvu)


les codes s'ajoutent en clikant sur le petit bouton "edit" puis custom html/css





une page d'aide au codage HTML/CSS

1)Nom des différents panels :

Code:

#aboutme_panel 
#gallery_panel 
#messages_panel
#blog_panel 
#url_panel 
#rss_panel
#room_panel 
#wishlist_panel 
#tagcloud_panel
#music_panel 
#friends_panel 
#visitors_panel
#streetteam_panel 
#stickers_panel 
#collect_panel
#cool_panel 
#contact_panel 
#rankings_panel
#special_panel
#groups_panel
#outfits_panel
#dev_panel

ca va servir pour la suite

2)Mettre des barres de defilement dans un panel :

Code:

<style>
 #messages_panel {
height:500;
overflow:auto;
}</style>

ici le code s'applique pour le panel des messages
et donc si on veux le faire pour un autre panel, il suffit de changer (liste au dessus, je vous disais bien que ca allait servir )

3)Ajouter son pseudo en grand au dessus de "about me" :

Code:

 <style>#avatar_name {
color:#882200;
font-size:1.6em;
font-family:deroos,"Times New Roman",Sans-serif;
}</style>

biensur on peut changer la couleur, la police, et surement la taille (la je ne sais pas quoi mettre)

=> Merci a Helliziel pour les infos suivantes sur la taille/couleur du texte

font-size:

Permet de définir la taille de la police de caractère.
Il existe plusieurs façon d'indiquer cette taille.
Dans l'exemple donné, l'unité utilisée est le em. (Pour info, il s'agit d'une unité relative).
Une écriture a.bem (ou a et b sont des entiers naturels) correspond à une taille de ab pixels.
Ainsi, 1.0em correspond à une taille de 10 pixels
1.2em correspond à une taille de 12 pixels
1.4em correspond à une taille de 14 pixels
1.6em correspond à une taille de 16 pixels
1.8em correspond à une taille de 18 pixels
2.0em correspond à une taille de 20 pixels
2.2em correspond à une taille de 22 pixels etc.
Il est possible de descendre plus bas que 1.0em (soit 0.8 ou 0.6 ou 0.4 etc.) et, bien sûr, de monter plus haut que 2.2em
Faites déjà des tests avec les sept exemples donnés plus haut, vous pourrez toujours affiner en fonction de vos envies une fois que vous aurez le compas dans l'oeil (ouille !) pour les tailles correspondantes Smile

Attention !
En CSS comme dans tout ce qui ressemble de près ou de loin à de la programation, la syntaxe est très importante. Si vous omettez un caractère ou si vous avez un caractère en trop, le code risque de n'etre plus lisible et de générer un bug :p
Veillez donc bien à respecter la syntaxe :

font-size: 1.6em;

- Pas de majuscule
- Ne pas oublier le trait d'union entre font et size
- Pas d'espace avant les deux points, mais un espace après (il est possible que cela fonctionne sans espace après les deux points, comme il est possible que ça bug. Autant écrire un code "propre" pour limiter les risques, hein? :p)
- Pas d'espace entre la taille exprimée sous la forme a.b et l'unité relative exprimée sous la forme em
- Pas d'espace entre em et le point-virgule
- Ne pas oublier le point-virgule


4)Changer la police et la taille des titres des panels :

Code:

<style>
#aboutme_panel TD.paneltitle, #gallery_panel TD.paneltitle, #messages_panel TD.paneltitle,
#blog_panel TD.paneltitle, #url_panel TD.paneltitle, #rss_panel TD.paneltitle,
#room_panel TD.paneltitle, #wishlist_panel TD.paneltitle, #tagcloud_panel TD.paneltitle,
#music_panel TD.paneltitle, #friends_panel TD.paneltitle, #visitors_panel TD.paneltitle,
#streetteam_panel TD.paneltitle, #stickers_panel TD.paneltitle, #collect_panel TD.paneltitle,
#cool_panel TD.paneltitle, #contact_panel TD.paneltitle, #rankings_panel TD.paneltitle
{font-family:deroos,"Times New Roman",Sans-serif;}
</style>

5)Changer le surseur de la souris :

la liste des curseurs disponible se trouce ici

Code:

<style>
body {cursor:crosshair;}
</style>

6)Mettre en Francais les titres des panels :

Code:

<script type="text/javascript" src="http://bp.la/imvu/v2/ppimvuptw.php"></script>
<div style="display: none;" id="PP_DONT_TOUCH_THIS">welcome:0;panelreplace_aboutme:Au_sujet_de_moi;
panelreplace_wishlist:Ma_liste_de_souhaits;panelreplace_messages:Mes_messages;panelreplace_contact:
Me_contacter;panelreplace_room:Ma_salle;panelreplace_streetteam:Equipe_de_rue;panelreplace_rankings:
Mes_rangs;panelreplace_gallery:Ma_galerie;panelreplace_tagcloud:Mes_interets;panelreplace_stickers:
Mes_stickers;panelreplace_cool:Nouvelles_personnes_cool;panelreplace_collect:Mes_collections;
panelreplace_music:Ma_musique;panelreplace_blog:Mon_blog;panelreplace_rss:
Mon_RSS;panelreplace_url:Ma_banniere;panelreplace_dev:Mes_nouveaux_produits;
pngfix:1;removeaviimg:0;changemsghead:1;headermode:0;topnotifier:0;avatarname:1;
betacolor:%23FF0000;linklayer:0;panelreplace_friends:Mes_amis;panelreplace_visitors:
Mes_visiteurs;avatarname_picture://img100.imageshack.us/img100/2160/bigbannierefk8.gif;
welcomemsg:BIENVENUE%20SUR%20MA%20HOME%20PAGE;shortaviname:1;</div>

/!\ A partir de id=PP don"t ... il faut que tout le code soit sur la meme ligne

il permet de modifier son message d'accueil, de changer le titre de la plupart des panels en francais, et d'autres encore....
/!\ Ne marche pas avec le 3)

7)Mettre plusieurs spécial someone :

Code:

<div><table border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td><div style="font-size: 0.8em; line-height: 20px;"><table style="font-size: 0.8em; line-height: 20px;" border="0" cellpadding="0" cellspacing="2" width="100%"><tbody><tr><td align="left" valign="top" width="20%"><table cellpadding="5"><tbody><tr><td><a href="http://avatars.imvu.com/COBRA330><img src="http://www.imvu.com/catalog/web_av_pic.php?av=COBRA330" border="0" height="110" width="80"></a></td></tr></tbody></table></td><td width="80%"><a href="http://avatars.imvu.com/COBRA330"><span name="COBRA330">COBRA330</span></a>
<br><i><font style="font-size: 1.1em;">
<font color="#ff0000"><span name="Le message doit être ici">Le message doit être ici</span>
</font></i></td></tr></tbody></table></div></td></tr></tbody></table></div>

a changer :
le pseudo (ici Cobra330) je pense qu'il ne faut pas oublier le Guest_ s'il y en a un
le message est a écrire en double
on peut mettre la couleur de notre choix

8)Changer le fond du Blog
Merci a Loonete

Code:

<style>
#blog_panel_body_inner div {
height:762px;  /* cette ligne pour la hauteur */
overflow:auto; /* cette ligne pour les ascenseur */
/* ensuite la couleur ou l'image de fond */

/* cette ligne pour votre code couleur*/
background-color:#336699;

/* cette ligne pour votre image de fond */
background-image:url(http://img514.imageshack.us/img514/4822/fondmessagesos4.jpg);
}
</style>

9)Mettre une image incrustée a droite dans le texte du Blog
Merci a Loonete

Code:

<style>
#blog_panel_body_inner div img {
float:left;
padding-right:5px;
padding-bottom:5px;
}
</style>

10)Remplacer son nom d'avatar qui se situe au dessus du panneau about par une image
Merci a Loonete


l'intérêt de faire cela est de un retirer le guest_ (uniquement sur cette partie donc juste pour des raison esthétique), ensuite permettre l'utilisation de toutes sorte de police de caractère, ainsi que de couleur, la méthode est simple et utilise les css comme toujours, d'abord il faut créer une image qui viendra remplacer votre texte, une image sans fond c'est mieux, moi j'ai fait cela :




je note la hauteur de mon image quelque part elle va servir pour la suite donc pour moi mon image fait 47 pixels de haut

ensuite on va modifier le style css de deux éléments .mypageheading et #avatar_name, ce sont deux élément imbriqué .mypageheading correspond au fond du texte et #avatar_name au texte lui même, donc on va placer notre image en fond de .mypageheading et décaler #avatar_name pour le faire sortir du champ de vision et donc le cacher ce qui nous donne :

Code:

<style>
.mypageheading {
/* j'indique l'url de mon image de remplacement */
background-image: url(http://img101.imageshack.us/img101/8398/avatarkp9.png);

/* ici je vais indiquer la hauteur de mon image */
height:42px;

/* je spécifie que mon image de fond ne doit pas se répéter */
background-repeat:no-repeat;
}

#avatar_name {
/* ici j'indique que le texte doit etre décalé de -5000 pixel sur la gauche pour le cacher */
position:relative;
left:-5000px;
}
</style>

voilà, j'ai tester sur IE, Firefox et Opera ça fonctionne bien Very Happy

vous pouvez voir le résultat sur ma page : http://avatars.imvu.com/Guest_loonette2007

11)augmenter l'espace entre les panneau
avec du CSS
Merci a Loonete

en css on peut spécifier des marges interne et des marges externe pour éviter les problèmes de compatibilité entre navigateurs on va utiliser les marges interne qui sont correctement supporté partout, cette propriété c'est le "padding" donc pour augmenter la marge de 10 pixels au dessus d'un élément on utilise padding-top:10px; pour augmenter la marge de 10 pixels sous un élément on utilise padding-bottom:10px; pour la marge de droite padding-right:10px; et pour la marge de gauche padding-left:10px; donc dans la css pour espacer le panneau de la galerie par rapport au panneau qui est au dessus on ajoute

Code:

<style>
#gallery_panel {
padding-top:20px;
}
</style>


on fait pareil pour les autres panneau, cela va espacer les panneau de 20 pixels (on peut changer cette valeur) sur la hauteur


----------------------------------
voila, c'est fini pour le moment
si jamais des nouveaux éléments sont disponibles sur le forum French ou imvu, je les aujouterai (je fais confiance aux modo, s'ils veulent ajouter 2-3 ptites choses, je n'y vois pas d'inconvénients)

en esperant que ca vous a plus

=> si vous voulez des screens pour que ca soit plus facile a comprendre demander moi

woaiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii !!!!!

Cool, merci beaucoup ! Je vais pourvoir customiser un peu plus ma hp ^^
Avec tous ces codes il y a de quoi faire

Merci Tohrno, mais il est important de rappeler, qu'on court toujours un risque en introduisant du code dans sa HP ; elle risque de se bloquer, ou d'afficher n'importe quoi, je parle en connaissance de cause.
Alors si vous n'étes pas surs de ce que vous faites, évitez de le faire, ca peut prendre trés longtemps de remettre sa page en état de marche, a moins de se contenter d'un truc affreux, aux antipodes de l'idée d'origine.

Si ça marche pas tu retire le code
Merci pour ces codes =)

oui
Au pire, tu vas dans "Edit profile", et tu reviens à l'état par défaut des cadres qui merdouillent (reset Panels, en sélectionnant les cadres qui t'embêtent). :p

moi par exemple, j'ai mis un défilement sur des images et je peux plus le retirer
Je me sens roulé
( le bouton édit n'apparait pas -_-" )

Tohrno a écrit:

Code:

#aboutme_panel 
#gallery_panel 
#messages_panel
#blog_panel 
#url_panel 
#rss_panel
#room_panel 
#wishlist_panel 
#tagcloud_panel
#music_panel 
#friends_panel 
#visitors_panel
#streetteam_panel 
#stickers_panel 
#collect_panel
#cool_panel 
#contact_panel 
#rankings_panel

arff il en manque 4
j'en ai trouvé 3 :
#special_panel
#groups_panel
#outfits_panel

j'ai pas trouvé celui pour le new products
mais je désespère pas ^^

EDIT :
j'ai trouvé le nom du dernier panel! c'est :
#dev_panel
voila maintenant tous les panels pourront être modifiés ^^

Merci
j'ai rajouté dans mon premier message

mais de rien si je peux aider...

par contre je te cache pas que j'ai bien cherché pour trouver ces nom ^^

sans blague ? mais tout le monde sais que les codes c'est du pif !!! non ?
mdrrrrrrrrrr

Cool, je vois que mes petit codes servent bien ...
Heureux de m'ètre cassé la tête pour vous

Merci pour tous sa ^^!!!! c'est super sympa!!!!
mais heu je c meme pas commen fair et a koi sa sert hihi!...
^^

j'ajoute ma trouvaille pour le fond du blog, si vous voulez le modifier le css c'est :

Code:


<style>
#blog_panel_body_inner div {
height:762px;  /* cette ligne pour la hauteur */
overflow:auto; /* cette ligne pour les ascenseur */
/* ensuite la couleur ou l'image de fond */

/* cette ligne pour votre code couleur*/
background-color:#336699;

/* cette ligne pour votre image de fond */
background-image:url(http://img514.imageshack.us/img514/4822/fondmessagesos4.jpg);
}
</style>


forcement pour l'image de fond ici c'est celle que j'utilise il faut la changer par la votre pareil pour le code couleur etc...

voilà

Merciiiiiiiiiii
j'ai ajouté au premier post

catmine13 a écrit:Merci pour tous sa ^^!!!! c'est super sympa!!!!
mais heu je c meme pas commen fair et a koi sa sert hihi!...
^^

Me too

Quand on est null ben... on est null...

Aidez nous