Refaire un Layout Myspace en xHTML et CSS

Guest-blogging : cet article a été écrit par un ami qui a souhaité vous livrer quelques astuces sur la refonte de design myspace avec la modification complète des css et du code html.

myspace_logo

Tips pour refaire un Myspace : Design + programmation (CSS + XHTML)

Je ne vais m’attacher à rentrer tout à fait dans la technique car ceci prendrait énormément de temps. Cependant je vais présenter quelques tips (astuces) pour éviter de perdre énormément de temps sur des petits soucis techniques facilement évitables lors de la création d’un design pour Myspace.

Ayez tout d’abord en tête comme objectif de faire votre Myspace comme un site classique. Vous commencez donc par votre design puis vous le découpez.

Viens ensuite la partie délicate qui consiste en son intégration dans Myspace. Je vous avoue que faire du CSS pour Myspace est une sorte de bricolage/rafistolage comparé à faire du CSS pour un site classique. Ainsi, n’espérez pas être conforme W3C 😀

Règles de bases : même si le but est de “tout péter” le Myspace d’origine, certaines choses sont intouchables:
-la pub d’en haut doit restée visible sans scroll (je me suis déjà fait supprimé un compte sans faire exprès à cause de ça).
-les copyrights de myspace doivent également être visible (même si, comme moi vous les refaites 🙂 ).

Une fois ceci bien compris, il y a plusieurs stratégies:

  1. vous récupérez des codes à droite à gauche sur internet pour bouger telle ou telle catégorie et faire en sorte qu’elle s’affiche au bon endroit du design
  2. vous masquez le myspace de base et vous recréez tout par dessus
  3. vous mixez 1) et 2) (c’est ce que j’ai fait) !

Première astuce très utile pour votre layout Myspace!

Vous venez de faire votre design et tout content vous copiez le code de votre design dans la section “membres” de votre profil. Vous faites “preview” et là malheur! La preview affiche votre design par dessous le reste et du coup vous ne pouvez pas cliquer sur “submit” pour valider le tout (voir image ci-dessous). Vous ne pourrez donc jamais montrer votre superbe design aux visiteurs !
Heureusement il y a une solution !

Placez-vous dans votre profil dans la section “edit profile”, à l’endroit où vous pouvez choisir la section à modifier. Entrer ensuite ceci dans la barre d’adresse :
javascript: editInterest(‘members’); ceci vous renverra directement à la page vous permettant de coller votre code dans la section membres!
javascript: editInterest(‘bio’); fera de même mais dans la partie “bio” si c’est ici que vous souhaitez coller votre code.

Ensuite vous cliquez donc sur “preview” et qui vous affiche quelque chose comme l’image ci-dessous. Vu que vous n’avez pas accès au bouton “submit”, entrez ceci dans la barre d’adresse qui le remplacera :
javascript:document.forms[1].submit();

Et la magie s’opère ! A noter que cette astuce semble mieux fonctionner sous Internet Explorer (IE) que sous les autres browsers (navigateurs).

Seconde astuce pour votre layout Myspace

Nous parlions de masquer le Myspace de base. Cette technique n’est pas encore validée W3C mais elle tout de même très utile pour coder en CSS pour Myspace. Il s’agit d’utiliser des couches. Ainsi vous mettez votre design en couche 1 et automatiquement, le myspace de base sera caché dessous. C’est pour cette raison que vous verrez apparaître parfois des myspaces classiques sur la page avant que le design ne soit chargé par dessus.

Voici donc la mise en place de ces couches. Exemple sur l’affichage du player :
table table td.text object {z-index:3; position:relative; top:315px!important;left:10px!important;visibility:visible; width:443px; height:352px;display: block; }
}

L’attribut z-index indique que le player de mon Myspace music sera donc placé sur la couche 3. Vous pouvez ainsi jouer avec la valeur de vos z-index à souhait!

3e astuce Layout Myspace

La troisième astuce et pas des moindre consiste à utiliser des hacks pour assurer une compatibilité dans tous les navigateurs. Un hack est un code CSS permettant de dire “mozilla tu feras ça” ou “IE tu feras ça etc…”. Voici donc quelques Hacks que j’ai testé et qui sont en place sur le myspace music que j’ai créé (voir lein à la fin de ce post):

Hack pour firefox :

@-moz-document url-prefix() {
}

Ce hack recherche les navigateur contenant le mot “moz” ce qui a l’avantage de marcher pour toutes les version de mozilla !

Exemple sur la position du player sous mozilla:

@-moz-document url-prefix() {
table table td.text object {z-index:3; position:relative; top:315px!important;left:10px!important;visibility:visible; width:443px; height:352px;display: block; }
}

Hack pour IE:
*html

Ce même player sous IE:

*html table table td.text object {z-index:3; position:relative; top:630px; left:38px; visibility:visible; width:436px; height:351px; }

Vous trouverez des hacks de ce genre pour Safari Opera etc… Une fois le principe compris…

Exemple Layout Myspace

Pour voir un exemple d’application des ces techniques rendez-vous sur http://www.myspace.com/devongravesmusic . Ceci est le myspace music de Devon Graves, composititrice et chanteuse, très douée au passage. Autant se faire plaisir en observant la technique CSS pour myspace 🙂

devongraves

[/Guest-blogging] Le lien ci-dessus est un exemple de ce que l’on peut faire avec ces astuces xHtml et Css pour Myspace. Si vous souhaitez plus d’infos ou si vous êtes intéressés par la refonte de votre Myspace, laissez un commentaire et l’auteur pourra vous répondre.

Advertisements

18 thoughts on “Refaire un Layout Myspace en xHTML et CSS”

  1. Hum moi j’ia un soucis avec cette nouvelle version de Myspace 2.0…
    J’aimerais modifier les trois petites images qu’il m’a mises par défaut (et issues de mes albums photos) en haut à droite de mon profil (juste sous “envoyer un emssage” et “envoyer un commentaire”)…
    Impossible de trouver l’astuce… :/ Please help! Merci d’avance 😉

    Like

  2. Hello, en fait je suis entrain de refaire un myspace music et je cherche des astuces pour (comme l’exemple de myspace music ci dessus) changer la place des boutons de la table de contact pour les placer en haut de page et placer des images a la places de la case “shows a venir”, “amis”, “membres du groupes”, “label”, … Malheureusement je ne trouves aucunes astuces pour ça 😕

    Help me !?

    Merci! 😉

    Maxim.

    Like

  3. bonjour ! je suis le chanteur/guitariste de SeCreTOF , comment ça va ? nous sommes un peu en galère pour le myspace car faire de la musique on adore , faire partager notre musique aussi , mais quand sa touche à l’informatique , au code CSS , HTML , on est un peu plus dans la galère , pourriez vous nous aider a faire un beau myspace music ??

    je vous remercie 😉
    secretof@live.fr pour parler + , et avoir + d’informations !

    Cordialement,

    SeCreTOF.

    Like

  4. salut tout le monde j’ai un gros problème, en fait je suis en train de refaire mon myspace j’ai fait tout le design et je l’ai positionner au dessus du myspace de bases mais je cherche désespérément a savoir comment faire pour positionner mes vidéos la ou je le désire.
    merci d’avance de votre aide!!!!!!

    Like

  5. bonjour ! j’ai un soucis aussi pour le myspace de mon groupe, c’est pour la barre de contacte ca fait maintenant longtemp que je cherche pour la mettre comme le myspace au dessus : c’est a dire horizontalement et en haut de la page, c’est assez interessant comme design…alors toute les aides sont les biens venues 😉 !
    merci !

    Like

  6. Quelqu’un as t’il trouver un endroit ou l’on donne un layout avec le code (attention, un layout pour musicien en V2)? une base qui fonctionne avec laquelle je pourrais refaire le design?

    Like

  7. j’ai cherché énormément des bases aujourd’hui, des bases toutes faites, que j’aurais seulement a changer les images, en gardant la structure fort complexe du CSS… mais ça n’existe pas!

    Like

  8. Je m’y connais beaucoup en css, j’ai bien et relu votre poste
    et avec mon code css sortant du logiciel “TopStyle”

    Je n’arrive pas a mettre mon design css toalement par dessus le myspace je ne comprend pas la principe

    Je vouus demanderai si il y aurai un code ou autre chose une manipulation , pour mettre mon design par dessus la bas de myspace

    merci de me repond

    Mon msn >>> Exos-Official@hotmail.fr

    Like

  9. Quelqu’un serait me dir cmt je peu metre la baniere de pub audessu de ma foto principal e si possible suprime la baniere de pub ou bien la maske avc une foto par audessu
    pcq aparament c interdi de la suprime ? quelqun serait m’aide ?

    Like

  10. salut! j’ai un problème avec mon adresse e-mail sur myspace il ne le reconnait plus il maffiche 5 sortes d’adresse indentique mais sniff rien à faire il me refuse d’ommage car sur ma page j’ai environ 500 contacte et je n’arrive plus à les rejouaindre merci pour t’est consiel A+ 😥

    Like

  11. …je cherche quelqu’un qui pourrai m’aider a faire un layout pour une jeune artiste.

    si vous être un bon designer je suis partante

    Like

  12. Hello ! tout d’abord merci pour ces explications très claires.
    Je recherchais ces infos depuis au moins 15 jours !!!

    Encore merci c’est une vrai mine d’or pour moi qui suis graphiste.
    à+

    Like

  13. ワンダフルブログ!ヤフーニュースで 間、私はそれを見つけました。ヤフーニュースに記載されて取得する方法について| 提案のヒント何かありますか?私はしばらくの間しようとしてきたが、私はそこに着くように見えることはありません! おかげ

    Like

  14. コロラドからのご挨拶!私は今涙に退屈職場では私がすることを決めたチェックアウト昼休み私のiPhone上のサイトあなた。私は愛知識あなた現在ここに、私が家に帰る時に見てみるのを待つことはできません。 、| とにかくとにかく ..、 ..私も使っていない無線LANだけで3Gを私の上にロードされ、ブログ|どのように速く、迅速にで私は驚いてショックを受けよ素晴らしいサイト!

    Like

  15. こんにちは!のためブログサイトあなたしばらく今、最終的に得た勇気先に行くし、あなたを与えるために|私は読み取り、次のしてきた送信 Aラボックアタスコシタ新キャニーから大声で叫ぶ!ちょうどしたかった教えてくれ素晴らしい良い素晴らしいを続けてください!

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s