Personnalisation Profil MySpace 2.0

Les codes ci-dessous fonctionnent pour le Profil 2.0 uniquement.

Si vous avez un profil classique (ou un profil MySpace Music), consultez cette page

Un problème de CSS ? Trouvez la réponse avec le générateur spécial Profil 2.0 !

Enfin si vous souhaitez passer au profil 2.0 et ne savez pas comment faire, regardez cette vidéo

Remplacer le titre d’un module de profil 2.0 par une image

Voici un exemple avec le module Blog. Vous pouvez modifier la classe du module pour appliquer le changements à un autre module. N’oubliez pas de préciser l’URL de votre image.

.a {apply the background image for only the header}
div.blogsModule h3.moduleHead {background-image:url(URL); height:30px;}
.a {hide the default text for the header}
div.blogsModule h3.moduleHead span {display:none;}

Voici la liste des modules :

    div.basicInfoModule {}
    div.blogsModule {}
    div.statusMoodModule {}
    div.musicPlayerModule {}
    div.interestsModule {}
    div.blurbsModule {}
    div.friendSpaceModule {}
    div.detailsModule {}
    div.schoolsModule {}
    div.companiesModule {}
    div.networkingModule {}
    div.videoSliderModule {}
    div.commentsModule {}
    div.mdpApplicationModule {}

Modifier la couleur de la barre de navigation du profil 2.0

Ajustez les codes couleurs dans le code ci-dessous :

.a {background color above the navigation bar}
div#googlebar, div#leaderboard {background-color:#00ff00;}
.a {colors for navigation bar}
div#topnav, div#header div#topnav ul li a, div#header div#topnav ul li a small {color:#ff00ff; background-color:transparent;}
div#topnav {background-color:#00ffff;}
.a {hover colors for navigation bar}
div#header div#topnav ul#leftNav li a:hover,
div#header div#topnav ul li a:hover, div#header div#topnav ul li a:hover small {color:#0000ff; background-color:#ff0000;}

Pour rendre le header et la navigation transparente, ajoutez :

.a {background color above the navigation bar}
div#topnav, div#header, div#googlebar, div#leaderboard {background-color:transparent;}

Supprimer les bordures de la barre de navigation du Profil 2.0

Ajoutez ce code dans le menu CSS de l’éditeur de page :

.katamari {remove navigation bar borders}
div.wrap div#header div#topnav * {border:0px;}

Créer une bannière cliquable en haut d’un profil 2.0

Vous devez procéder en 2 étapes :
1- Créer un div contenant l’image dans la section « Qui je suis »

Ca marche aussi avec du flash…

2- Dans le menu CSS, ajoutez, et ajustez les valeurs en fonction de la taille de votre image :

.a {create the space}
div.wrap div.content {margin-top:300px;}
.a {position the banner}
div.clickableTopBanner {position:absolute; top:190px; left:50%; margin-left:-450px;}
.a {resize the clickable image}
div.clickableTopBanner img {width:900px;}

Modifier la taille de l’avatar du profil 2.0

Placer ce code dans le menu CSS de l’éditeur de page. Vous devrez ajuster les valeurs en fonction de celles de votre image.

.katamari {adjust size of default picture}
div.basicInfoModule div.photo,
div.basicInfoModule div.photo a img.photo {width:170px; max-height:265px; height:265px;}
.katamari {adjust height of basic info section}
div.basicInfoModule div.moduleBody {height:210px;}

Masquer les Noms et Prénoms dans votre Top Amis

Placer ce code dans le menu CSS de l’éditeur de page.

.katamari {hide the real name in your friends list: that thing under the pic}
div.friendSpaceModule span.msProfileLink a span.pilRealName {display:none;}

Scroll dans les modules du profil 2.0

Exemple avec la section Commentaires. Liste des autres module en dessous.
Placer ce code dans le menu CSS de l’éditeur de page :

.a {scroll uniquement le corps des commentaires}
.a {Le titre restera fixe}
div.commentsModule div.moduleBody {height:200px; overflow:auto;}

Variante :

.a {Scrolle les commentaires}
.a {Le titre scrollera evec les commentaires}
div.commentsModule div.moduleMid2 {height:200px; overflow:auto;}

Liste des différents modules du profil 2.0 :

    div.basicInfoModule {}
    div.blogsModule {}
    div.statusMoodModule {}
    div.musicPlayerModule {}
    div.interestsModule {}
    div.blurbsModule {}
    div.friendSpaceModule {}
    div.detailsModule {}
    div.schoolsModule {}
    div.companiesModule {}
    div.networkingModule {}
    div.videoSliderModule {}
    div.commentsModule {}
    div.mdpApplicationModule {}

Donner la même largeur aux colonnes du Profil 2.0

Placer ce code dans le menu CSS de l’éditeur de page :

.a {make columns the same width}
div.content div.column {width:472px;}
div.content div.profileLayout {width:944px;}

Si vous ajustez les valeurs, modifiez bien les 2 à la fois.

Remplacer le nom du profil 2.0 par une Image

Placer ce code dans le menu CSS de l’éditeur de page :

div.basicInfoModule div.basicInfoDetails h2 {display:block; width:100px; height:30px; font-size:0px; letter-spacing:-500px; background-image:url(URL); background-repeat:no-repeat;}

Vous devrez modifier la hauteur et la largeur en fonction de la taille de votre image et ajouter l’url absolue de votre image.

Les lecteurs de cette page ont aussi apprécié ces autres articles :

Une réflexion au sujet de « Personnalisation Profil MySpace 2.0 »

Laisser un commentaire