Myspace’s tips flash et css !
11 mars 2008 par Niums dans CSS, Musique, Quoi de neuf sur le web
Je n’ai pas eu réellement le temps de me remettre sur mon blog ces derniers temps. Pas mal de boulot en freelance et aussi coté musique.
En fait c’est sur ce dernier point que je vais écrire ce billet. Donc, dernièrement je me suis occupé du myspace du groupe de musique avec lequel je suis. D’habitude je ne me prends pas trop la tête étant donné que je n’ai fait qu’un seul myspace et c’était pour moi. Je fais soit un truc plus que simple ou j’utilise Love my flash. Cette fois j’ai eu envie de voir ce qui m’était possible de faire avec myspace. Voici quelques infos qui pourraient en intéresser quelques un.
J’ai donc tout d’abord caché le maximum d’élements avec display: none, ensuite j’ai créé quelque chose d’assez simple en css, crée mes flash, mélangé le tout et envoyé la préparation sur myspace et comme vous vous en doutez ça n’a pas du tout fonctionné au début.
Il faut savoir qu’on peut apparemment faire ce qu’on veut sur myspace tant qu’on ne cache pas les pubs.
Les # sont automatiquement supprimés, pas d’utilisation d’id donc et les commentaires s’écrivent : .r { écrire ici les commentaires}.
Autre chose myspace a bloqué la possibilité d’utiliser les getURL dans flash, on ne peut donc pas créer de lien dans un flash vers un autre myspace ou un site externe. C’est du en fait à une attaque par un vers utilisé dans flash en 2006. Vous remarquez donc à chaque fois que vous ajoutez un flash que celui-ci se voit inclure les propriétés ci-dessous :
<param name="allowScriptAccess" value="never" />
<param name="enableJSURL" value="false" />
<param name="enableHREF" value="false" />
La seule solution trouvée pour le moment est de créer un gif transparent puis de le superposer au dessus du flash grâce au css. Le lien se fera sur le gif. Pas très pratique lorsque vous avez plusieurs éléments qui bougent tout de même.
RECAPITULATIF
CSS
/*Pour cacher votre boite de contacts */
.contactTable {display: none;}
/*Cacher l’URL du profil :*/
table table table table div {visibility:hidden;}div table table table table table div input, div a, td.text div {visibility:visible;}
/*Cacher la section “Amis” :*/
td.text td.text table table table, td.text td.text table br, td.text td.text table .orangetext15, td.text td.text .redlink, td.text td.text span.btext {display:none;}td.text td.text table {background-color:transparent;}td.text td.text table td, td.text td.text table {height:0;padding:0;border:0;}td.text td.text table table td {padding:3;}td.text td.text table table br {display:inline;}
/*cacher la photo de mon profil.*/
.profileInfo {display:none;}
/* modifier la taille de la section commentaires */
/* commentaires */
.friendsComments{
width: 900px;
}
/* modifier taille des photos dans commentaires */
.friendsComments img { width : 300px; }
/* pour changer le background */
body {
background-color:000000;
background-image:url(http://www.url-de-l-image.jpg);
background-position:center top;
background-repeat:repeat;
background-attachment:scroll;
}
/* modifier l’apparence des tables */
/* largeur de la table à 100% */
table table table {
width:100%;
max-width: 800px; /* la largeur du bloc principal ne ser pas supérieur à 600 px */
}
table table table table {
width:100%;;
}
/* style des bordures et image de fond des tables*/
table table table {
border-style:Dotted;
border-width:2px;
border-color:dddddd;
background-image:url(http://www.url-de-l-image.jpg);
background-repeat:repeat;
background-attachment:fixed;
}
/* transparence table */
table table table td {
filter:alpha(opacity=90);
-moz-opacity:0.90;
opacity:0.90;
-khtml-opacity:0.90;
}
/* changer l’apparence de la souris */
body, .bodyContent {
cursor:crosshair;
}
/* inverser le contenu de votre myspace */
table {direction:rtl;}
table table table {direction:ltr;
}
/* cacher le nombre d’amis */
td.text td.text .btext {display:none;}
/* cacher l’affichage du nombre de visites sur myspace music*/
td td td td.text {visibility:hidden;}
td.text td.text, td td td td.text * {visibility:visible;}
/* cacher les liens du footer */
a.text, table div font a, table div div {
visibility:hidden;
}
table table div font a, table table div div {
visibility:visible;
}
img {
border:0px;
}
table tr td div font {
display: none;
}
tr {
background-color:transparent
}
FLASH
déplacer le lecteur flash grace au css
td.text td td object {position:static; margin-left:0px; z-index:9;}
Continuez votre lecture avec
- Article suivant : FAT FREDDY’S DROP en concert le 23/04/2008
- Article précédent : HOCUS POCUS le 13/05/2008 à L’OLYMPIA
Articles similaires
Apparement aucun article ne ressemble à celui ci... Bizarre !
Commentaires (81)
Laisser un commentaire
Bin moi, j’utilise pas du tout les blogs de myspace, et cette partie là est donc toujours vierge !
Aurais-tu un code pour supprimer cette partie « blog », ou au moins la masquer ??? stp, j’en ai mare de ce truc !
@Ben pour supprimer les blog :
+++
bonjour , je viens de lire ton article » Myspace’s tips flash et css ! ».
et il ma appruis bcp de choses, mais j aurai aimer si possible que tu explique comment faire le gif transparent et inserer les liens dedans. car j avoue que je comprend pas. jai fait mon image d arriere plan sur lequell ce chargera mon swf via le gif transparent.
merci d avance de ton aide.
ps : peux tu aussi m expliquez comment dirigez mes swf en fonction de leur placement sur l image ( arriere plan ) merci.
Hello Many light : pour faire un gif transparent, tu ouvres ton logiciel préféré (photoshop ou gimp) tu crée une image « sans background » de la taille qui t’intéresses et tu l’enregistres en gif avec l’option transparent. C’est vraiment très simple et je me demande si c’est vraiment ce que tu voulais savoir. ;-) . et pour le lien c’est tout bete, tu crées un lien normal et ton image tu le met dans une div avec une classe qui positionnera ton image en absolute au dessus de ton flash:
ce qui te donnes : pour le css
et pour le corps
Voila voila, sinon je n’ai pas bien compris ce que tu voulais dans ton PS,
+++
merci niums pour tes explications je vais tester tout de suite merci
je sais pas comment expliquez ca met pour faire simple je te montre mon image pour que tu puisse avoir l idee de ce que je veux faire. ( http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendID=425188415 ) .
j ai placer mon image au dessus de tout comme tu pourra le voir,maintenant je compte faire pour chaque rubrik un swf .
c est la que je blok , je sais pas si je dois faire une gif transparent pour chaque swf ou une seul pour toute.
et de plus les liens comment les placer sur la gif transparente ( c est a dire l endroit ou la souris devra reagir. exemple le scroller pour la rubrik bio, le slid pour les photo ( gauche / droite) le bouton pour mon player (soundclick ) ainsi que pour le top amis.
je sais que c est bcp de chose demander en meme temps mais serieucement tu est le seul qui ma repondu depuis le debut de mes recherche , donc merci 1000 fois d avance pour ton aide.
je te met le code que j ai fait si cela peut t aidera comprendre ce que je veux ( ps : mon player dois se trouver la ou il est marquer player sur l image mais je sais pas le faire descendre )
code :
——–
code popur mettre l image au dessus de tout
——————————————-
body{
background-position:top center;margin-top: 0;}
div.topbanner {
top: 125;
left: 12%;
margin-left: -100px;
width: 100%;
height: 10px;
position: absolute;
}
<br
player soundclick
—————–
body{
background-position:top center;margin-top: 0;}
div.topbanner {
top:500;
left: 50%;
margin-left: -100px;
width: 100%;
height: 100px;
position: absolute;
}
<br
@ Many Light, je sui allé sur ton mypace mais je n’ai rien vu.
Mais comme je disais dans l’article tes liens externe ne fonctionneront pas dans le flash et c’est la, le seul intéret de la gif transparent au dessus du flash. Si tu crée un swf pour ta bio ou un slide pour ta photo il n’y a pas de probleme. La ou tu as besoin du gif transparent c’est dans le cas ou tu veux un lien externe.
Je ne comprends donc pas pourquoi tu voudrais mettre un gif sur tout tes swf.
Ton code a été un peu bouffé dans ton second post, je ne sais pas pourquoi.
Voici des tutoriaux pour comprendre le placement en absolute des éléments, tu peux utiliser les z-index (pour mettre tes éléments sur différents niveaux)car myspace les acceptes maintenant.
exemple de sites :
http://www.commentcamarche.net/contents/css/cssposition.php3
http://www.siteduzero.com/tutoriel-3-13666-apprenez-a-creer-votre-site-web.html
http://css.mammouthland.net/
http://www.openweb.eu.org/css
http://css.alsacreations.com/
+++
merci pour tout
Bonjour Niums,
Je me permets de faire appel à tes talents, pour ma part, je n’ai pas de connaissance en flash mais surtout en photoshop, je me suis fait une page myspace directement sur photoshop que j’ai importé dans image ready pr découper le tout et mettre les liens comme il faut.
Mais j’ai oublié que je rêvais éveillé pour que le tout fonctionne sur myspace, esceque tu saurai expliquer pourquoi?!
Je te founi le lien direct vers la page, bien sur en site web normal ca fonctionne..mais plus rien qd je colle ça ds myspace :/
http://alexbykenzo.free.fr/page%20myspace/Skin.html
Merci d’avance pour ta réponse :$
@ Alex : Pas besoin de connaissance en flash pour ce que tu veux faire (enfin je crois), ce que tu peux faire, c’est de créer ta page en css/html. Tu caches tout les blocs avec le code donné plus haut dans l’article (sauf la pub).
Tu décales tout le bloc vers le bas avec
tu place ton image du haut en absolute :
Et ton contenu u le place aussi en absolute dans un div par exemple :
Apres dans ton div contenant « .monTout » tu crée le reste du contenu .
Un div contenant ta bio
un div contenant ta playlist
un dernier avec tes amis aue tu es obligé de faire en dur (tu devras donc cacher la section amis.
Ca c’est du css pas tres compliqué !-)
Voila une facon de faire avec les contraintes myspacienne.
+++
Salut Niums,
Ton myspace est vraiment bien fait !
Je suis en train d’en faire un aussi, j’aimerais pouvoir le faire dans le meme esprit que le tien, le custom total mais je ne sais pas comment faire.
Je suppose qu’l faut photoshop mais ensuite… Y a-t-il des codes ou autres choses a faire.
Merci
@ Ludo. En fait pour le réaliser t’as juste 3 choses à faire :
- photoshop : ton design
- flash : les éléments que tu veux avoir en flash en sachant que tu ne pourras pas mettre de liens dans ton flash (contrainte myspacienne)
- css : pour le code toujours avec les contraintes myspaciennes.
Je pense que tu as de bonnes pistes dans l’article et les commentaires mais si tu bloques sur un éléments je peux toujours essayer de t’aider ;-)
+++
salut Niums,
grace a toi j ai reusi a faire mon myspace .
mais la ou je suis bloker c’est quand je dois introduire les liens sur les boutons. je m explique , j ai cree un bouton mail , home et friends , mais je ne sais pas ou aller chercher leur url pour introduire le liens a chaque bouton. donc je me tourne vers toi pour avoir une petite explication sur mon prob .
ps : pareil pour le liens de la rubrik » amis & commentaire « .
MERCI D AVANCE DE TON AIDE.
@ Manylight
Pour créer tes liens :
Voili voilou
+++
merci baucoup a toi niums
J’ai oublié de te dire de remplacer les XXXXXXXX par ton id
+++
sis je m en doutais, mais moi ce que je voudrais faire c est comme ce myspace au niveau du » top amis et commentaire » , mais ne trouve pas le liens .
regard si tu a le temps et si tu sais me dire comment faire merci.
http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendid=167927313
@ manylight
Que veux tu faire : centrer tes amis et leurs commentaires ?
Le mettre dans un bloc avec une scroll bar ?
Il faut savoir que ces deux là sont « attachés ». Tu peux les cacher indifféremment mais lorsque tu déplaces les photos des amis ou les commentaires ils sont obligatoirement liés.
+++
j aimerai les mettre dans un div comme le liens que j ai t ai filer. les deux; mais je n arrivz pas a trouver le liens de mon top amis et commentaire pour le mettre dans le div
salut Niums en fait c’est ça , je voudrais les mettre dans un bloc ( enfin une balise div) avec un scroll bar.
@Manylightz,
Ok je vois ce que tu veux dire. Je te donne un code que je n’ai pas testé :
Mets le code ci dessus à la fin de qui je voudrais rencontrer :
ou alors celui ci
+++
Dis moi je travaille sur un myspace music pour un ami et j’aimerai savoir si il est possible à ton avis de réduire la taille du lecteur « officiel myspace » stp. En tout cas, tu offres une vraie mine d’info pour tout le reste et le myspace que tu as conçu est terrible. Merci d’avance. Alex
@ Alex
pour modifier la taille du lecteur , modifie la balise object.
Teste le car je l’avais fait il y a un moment mais je ne sais pas si ca fonctionne toujours.
+++
Merci beaucoup. Je ne peux essayer ça en ce moment parceque je suis en phase de création de la page et que je n’ai pas les codes d’accès au myspace music de mon pote encore. Je te tiens au courant et merci encore pour ton aide.
j’aimerait metre une photo au dessu de la pub dans mon myspace si vous pouvais m’aider cela serait génial
Salut j’ai un soucis en ce qui concerne le myspace music… J’ai déjà utilisé tes indications pour un myspace classic sans soucis, mais là pour le music spécialement je tombe sur un os… Je met mon code dans « musician details ».. je clicke sur preview là tout va bien, mais le problème c’est que « montout » passe par dessus le lien myspace « submit » donc je ne peux pas sauvegarder les changements… Besoin d’aide rapidement please
@ Alex : est ce que tu édites tes infos en mode sans echec ? C’est en ce mode que tu dois ajouter tes infos dans bio.
Merci beaucoup… Je travaille en ce moment sur ce myspace là http://myspace.com/moerdockmatt . Serait-il possible que l’on se contacte via messenger afin que tu m’aides rapidement à terminer certaine partie de mon code s’il te plait. J’aimerai pouvoir faire ça le mieux possible, et le coup d’oeil d’un expert me serait fortement utile pour clore tout ça. Mon adresse hotmail : alex.hb@hotmail.fr J’ai aussi un léger problème avec le déplacement du lecteur, ça marche parfaitement sous firefox, mais ça le fait disparaitre sous Internet Explorer. J’espère que tu pourra m’aider. A bientot et merci d’avance
Hey Alex, malheureusement, je n’ai pas beaucoup de temps libre pour t’aider sur MSN mais pose tes questions ici en plus ca en aidera surement d’autres si on peut y répondre.
Quel est ton probleme exactement sous IE ?
bonjours comment faire pour mettre une toff ds le cadre url de mon profil sur la page ?
MERCI DAVANCE
Salut,
j’aimerai savoir comment je dois faire pour pouvoir insérer le carrousel de photos que j’ai sur ma bio au dessus de la pub comme tu as fais pour l’image de Urban Kiss car je n’arrive pas a le placer,en te remerciant d’avance je te laisse le lien de mon myspace pour que tu puisse le voir,amitié.
Daniel.
@ Daniel,
C’est le meme principe que ce qui a été écrit plus haut :
En mode sans échec:
Il faut cacher tout les blocs dont tu n’as pas besoin(sauf la pub).
Tu décales tout le bloc vers le bas avec
body { background-color: 000000; margin-left: 0px; margin-top: 575px; margin-right: 0px; margin-bottom: 0px; background-image: url(http://www.url-de-ton-image); background-repeat: no-repeat; background-attachment: scroll; }tu places le code de ton falsh en absolute dan le bloc que tu as créer et que tu va nommer monSuperHeader par exemple :
.monSuperHeader { // n'est pas obligatoire sauf si tu veux une couleur de fond background-color: 000000; width: 900px; position: absolute; left: 50%; top: 0; margin: 0 0 0 -450px; /* ca c'est pour le centré */ padding: 0; } .monSuperHeader object { position:absolute; top:1250px; left:50%; margin-left:-455px; z-index:9; } .monSuperHeader object { position:static; margin-left:0px; z-index:9; }Et ton contenu tu le place aussi en absolute dans un div par exemple :
.monTout{ clear: both; width: 900px; padding: 0; position: absolute; left: 50%; top: 0; margin: 730px 0 0 -450px; /* le margin top prend en compte l'espace pour la pub */ }Apres dans ton div contenant “.monTout” tu crée le reste du contenu .
Un div contenant ta bio
un div contenant ta playlist
etc
+++
Hello tout le monde,
Voilà, en faite sa serait pour une petite aide sur myspace
Par rapport aux scripts flash « getURL »
Qui ne marche pas, malheureusement, j’aimerais trouver une astuce pour positionner plus facilement des gif transparents (en css) pour ma section amis que j’ai redesigné entièrement.
les attributs margin: left, top, center etc… ne sont pas visible de la même façon sur les 2 naviguateurs principaux, dès fois le gif en css, est un peu plus à droite ou à gauche, (I.explorer et Mozilla). Merci pour votre aide
Hello tout le monde,
Voilà, en faite sa serait pour une petite aide sur myspace
Mon myspace : http://www.myspace.com/rdims
Problème : Section Amis
Par rapport aux scripts flash “getURL”
Qui ne marche pas, malheureusement, j’aimerais trouver une astuce pour positionner plus facilement des gif transparents (en css) pour ma section amis que j’ai redesigné entièrement.
les attributs margin: left, top, center etc… ne sont pas visible de la même façon sur les 2 naviguateurs principaux, dès fois le gif en css, est un peu plus à droite ou à gauche, (I.explorer et Mozilla). Merci pour votre aide
@ Bboys, étant donné que tu ne peux pas gérer les css comme tu veux sous myspace, sous entendu les hacks et autres commentaires conditionnels ne sont pas possibles. La solution la plus simple serai de créer un tableau html tout simple et d’y intégrer tes gifs
Ca donnerai :
A toi de voir, mais gérer ca en css avec les restrictions de myspace ca va être dur.
+++
Ok je vais essayer (je n’ai jamais fait de tableaux Html :D, mais sa ne devrait pas être trop compliqué).
J’ai une autre question, sais-tu comment, je pourrais faire pour scroller mes commentaires, j’ai essayé plusieurs fois avec des codes que je chopais sur des site du style « myspace.editeur » et chaque fois, lorsque j’ajoute mon code, les commentaires ne se scroll pas et se décale vers la droite…bizarre
Merci pour l’aide
A merci pour le tableaux HTML (il ne s’affichait pas tt à l’heure) ;)
A propos (de la section Amis)
A la limite la 2ème solution était de mappé mes amis sur dreamweaver, (un gain de temps incroyable)
mais là pareille, j’ai déjà essayé, et malheureusement sa ne marche pas
Oui sinon tu peux essayer en mettant ton flash et par dessus (z-index) un gif transparent avec le lien vers tes amis : ca revient au même que la map de dreamweaver
Ok, merci pour ton aide Niums, sa fait plaisir ;)
je testerais ça ce soir
+++
En ce qui concerne la scrollabar,
Log toi en safe mode
Copie et colle le code ci dessous
Ca devrait fonctionner
sinon essaye celui que j’avais donné dans l’article
/* modifier la taille de la section commentaires */ /* commentaires */ .friendsComments{ width: 900px; height:300px; }+++
Encore un petit soucis en ce qui concerne le scrollbar des commentaires.. J’utilise ce code:
.friendsComments
{
position: absolute; margin-top: 740px ! important; margin-top: 725px; left: 50%; margin-left: -300px; display: block;
background-color: 000000;
height:300px; width:600; overflow:scroll;
z-index: 1;
}
Impeccable sur Mozilla mais pas sur I.E. Help please!!!
@ Alex : Quel est le souci sur ie ?
Regarde : myspace.com/moerdockmatt
Il n’y a pas de scrollbar, les commentaires ne sont pas changés. C’est comme si le code n’était pas reconnu par I.E.
J’ai beau cherché à travers les multiples forums consacrés au myspace je ne trouve pas de solution pour résoudre mon problème de scroll sur Internet explorer… J’espère sincérement que vous pourrez m’aider… Encore merci par avance…
@ Alex, Ah oui je t’ai un peu zappé lol. J’essaye de regarder ca ce soir en rentrant mais pour l’instant jettes un coup d’oeil à max-height et min-height pour forcer ie à prendre en compte la taille du div.
JE te tiens au courant plus tard
Hello Niums,
Mon myspace : http://www.myspace.com/rdims
Merci pour la soluce du tableau HTML, sa a bien marché c’est cool :D.
Je voudrais juste ajouter une autre petite touche perso.
Est-ce qu’il est possible de réaliser des css en rollovers sur mon tableau HTML ?
Merci pour l’aide, ciao.
@ B-Boys : cool le myspace !
Pour ton rollover en css je l’aurais fait en javascript mais comme ce n’est pas possible, la soluce la « plus « simple » auquel je pense:
- tu crée un gif transparent de la taile de tes images
- tu donne un id à chaques cellules de ton tableau
- Tu mets dans chaque cellule le gif transparent entouré par la balise lien
- tu crée dans ton css un hover spécifique pour chaque cellule qui aura le background que tu veux.
C’est long mais sans js je ne vois que ca.
T’as compris, car je ne sais pas si j’ai été clair
+++
Oui j’ai compris plus ou moins,
Peux-tu me détailler ton explication, avec un shéma du style : <td….css{……
un peu comme tu avais fait auparavant lorsque tu m’avais expliqué l’utilisation du tableau pour la section « amis ».
Merci pour l’aide :)
Ensuite j’esseyerais, si sa ne marche pas, ca n’est pas grave, (c’est juste un petit détail que je voulais ajouter ;) ).
ciao