Tutorial: MySpace Layout ändern (update)

Aufgrund der großen Resonanz zu meinem Beitrag „MySpace: Layout ändern für Musiker“ habe ich mich entschlossen einen richtigen Artikel mit Anleitung zu schreiben, der Interessierten zeigen soll, wie Änderungen am MySpace Layout vorgenommen werden können. Hier werden sicher nicht alle Möglichkeiten, etwas am Layout zu ändern besprochen, aber meiner Meinung nach die wichtigsten. Falls ich einen wichtigen Aspekt vergessen habe, bitte einen Kommentar schreiben!

myspace1.gif

Themen:

UPDATE: Wichtig!
Auch wenn ich hier angegeben habe, wie es funktioniert, so ist es trotzdem verboten die Werbung der Seite auszublenden. MySpace behält sich in jedem Fall vor, ein Profil ohne Ankündigung zu löschen, falls man gegen diese Regel verstößt. Ich übernehme für etwaige Schäden keine Haftung. Hierzu ein Auszug der Bedingungen von MySpace was alles verboten ist:

…das Verdecken oder Verbergen der Werbebanner auf deiner persönlichen Profilseite oder einer anderen MySpace.com-Seite per HTML/CSS oder mit einer anderen Methode…

UPDATE 2:
Leider hatten sich bei der ersten Version in diesem Artikel einige Fehler eingeschlichen und hier angeführte Codebeispiele funktionierten nicht wie gewünscht. Das betraf vor allem alle Codebeispiele, bei denen ich per CSS IDs ansprechen wollte. Funktionieren kann es deshalb nicht, weil MySpace die „#“ automatisch rausfiltert. Ich habe die Codebeispiele nach bestem Wissen bereinigt und verbessert, sodass jetzt alles funktionieren sollte. Danke an die kritischen Leser dieses Artikels mit deren Hilfe ich die Fehler entdeckt habe.

UPDATE 3:30.09.2007
Neue Rubrik „Rahmen“ veröffentlicht. In diesem Unterpunkt gehe ich darauf ein, wie man einem Objekt bei MySpace einen Rahmen zuweisen kann.

UPDATE 4:07.12.2007
Achtung:
Fragen zum Thema MySpace bitte im MySpace Forum (www.myspaceforum.de) stellen.

Eins noch vorweg:
Dieses Tutorial richtet sich an Leute, die die Funktionsweise der Layoutänderungen auch verstehen wollen und wird keine reine Copy&Paste Tabelle.

Wo wird das Layout geändert?

Bevor es losgeht noch ein kleiner Tipp, wie man Probleme vermeiden kann. Alle Änderungen am Layout, die zuvor mit dem originalen Myspace Layout Editor vorgenommen wurden sollten gelöscht werden, da der dadurch eingefügte Code Einfluss auf den hier erkärten Code haben kann.
Sofern du einen normalen MySpace Account hast kannst du dies tun indem du dich in deinen MySpace Account einloggst, dann auf „Profil bearbeiten“ und dann auf „About me“ klickst. Unter dem Fenster erscheint ein kleiner Link „Bearbeiten“. Nachdem du ihn angeklickt hast, erscheint ein Formularfenster, in das du die persönlichen Informationen über dich schreiben kannst. In genau dieses Fenster kommt später auch der Code der im Folgenden erläutert wird. Bei einem Musik Account ist der Ablauf derselbe, mit dem Unterschied, dass die Eingaben unter dem Menüpunkt „Band Details“ – „Über die Band“ gemacht werden müssen. Abschließend müssen die Eingaben immer mit dem Button „Los“ abgeschickt werden, damit sie bei MySpace gespeichert werden.

Wie kann ich das Layout ändern?

Das Layout wird mit CSS (Cascading Stylesheets) so umformatiert wie man das möchte (Infos über CSS gibt’s bei Selfhtml). CSS ist eine Sprache mit der der Html Quelltext formatiert werden kann.

Wichtig:
Damit der Webbrowser erkennen kann, dass es sich bei den folgenden Angaben um CSS handelt, müssen folgende Angaben um den CSS Code gelegt werden:
<style type="text/css">
Hier kommt später dein Code hin.
</style>

Grundlagen

Jedes HTML-Element kann per CSS angesprochen und formatiert werden. Nehmen wir uns also mal das <body> Element vor, das quasi den Rahmen für alles auf der Seite bildet, was auch später im Browser angezeigt wird. Wenn ich also den Hintergrund ändern will, muss ich dem <body> per CSS eine neue Eigenschaft zuweisen.

Hintergrundfarbe ändern:
body {
background-color:rgb(0,0,0);
}

Das obige Beispiel würde den Hintergrund schwarz färben. Die Farbangabe wurde per RGB-Wert angegeben (Hexadezimal funktioniert nicht, weil MySpace bei den Eingaben automatisch die #-Rauten ausfiltert um eine Ansprache der IDs zu verbieten). Eine ausführliche Farbtabelle findest du auf http://www.uni-magdeburg.de/counter/rgb.txt.shtml

Hintergrundbild ändern:
body {
background-image: url(http://www.deinebildadresse.de);
}

So kann man das Hintergrundbild ändern. Allerdings musst du das Hintergrundbild auf einen Server legen und die Adresse dorthin angeben, damit es richtig angezeigt werden kann. Die mit background in CSS machbaren Formatierungen sind sehr umfangreich und vielfältig und würden hier den Rahmen sprengen. Wenn der Code allerdings wie oben angegeben notiert wird, wird das Bild sowohl horizontal als auch vertikal immer wieder nebeneinander angezeigt.

NEU – Rahmen/Border

Ich bin in den letzten Wochen oft gefragt worden, wie man den Elementen der MySpace Seite einen Rahmen zuweisen kann. Nun möchte ich euch hier erklären, wie das funktioniert. Die CSS-Eigenschaft „border“ ist verantwortlich für die Rahmen, die man jedem beliebigen HTML Element, wie z.B. table, body, div, span usw. zuweisen kann. „border“ funktioniert wie folgt:

Alle Seiten eines Objekts auf einmal formatieren:
table {
border: 1px solid black; }

Alle Seiten eines Objekts einzeln formatieren:
table {
border-top: 2px solid white;
border-right: 3px solid yellow;
border-bottom: 8px solid black;
border-left: 5px solid green; }

„border“ alleine weist allen vier Seiten des Elements einen Rahmen zu, mit z.B. „border-left“ kann man nur einer bestimmten Seite des Elements einen Rahmen geben. Die Angaben nach den Doppelpunkten geben an, was für einen Rahmen man möchte. In diesem Falle wäre das ein Rahmen mit der Stärke 1 Pixel, eine durchgehende Linie und in Schwarz um alle vier Seiten des Elements. Wie und welche Elemente man formatieren kann ist weiter oben beschrieben.

Man kann bei Rahmen 3 Dinge formatieren: Rahmendicke, Typ und Farbe. Die Rahmendicke wird in der Regel mit Pixelangaben (px) bestimmt, aber auch andere numerische Werte wie em oder % können benutzt werden. Beim Rahmentyp sind die Werte solid (durchgehende Linie), dotted (gepunktete Linie), dashed (gestrichelte Linie) üblich und werden am meisten genutzt. Die Rahmenfarbe kann bei MySpace entweder mit Farbnamen (black, white, yellow usw.) oder RGB, Werten angegeben werden.

Wichtig:
Hexadezimal scheidet aufgrund seiner Schreibweise (wie oben schon angeführt) mit der Raute (#) aus.

Da die CSS-Eigenschaft „border“ sehr umfangreich ist und im Detail sehr komplex werden kann, habe ich hier wieder nur ein Blitzlicht auf die wichtigsten Aspekte geworfen und verweise für Leute, die sich mit dem Thema „border“ näher beschäftigen wollen guten Gewissens auf SelfHTML.

Elemente ausblenden:

Um Elemente ausblenden zu können muss man ihnen lediglich die folgende CSS Formatierung geben:
Element, oder Klasse eines Elements {
display:none;
}

Erklärung:

  • Eine Klasse beginnt mit einem Punkt z.B.: .navigationBar
  • Wenn ein HTML-Element direkt angesprochehn werden soll, muss dieses einfach in CSS folgendermaßen notiert werden:
    Hier soll das „<p< “ Element angesprochen werden
    p { CSS Angaben } HTML-Elemente können auch verschachtelt werden, um nur bestimmte Unterlemente anzusprechen.
    Hier werden alle <p< Elemente, die innerhalb einer Tabelle liegen, angesprochen.table p { CSS Angaben}

Hier eine kleine unvollständige Liste der Elemente die bei MySpace beispielsweise ausgeblendet werden können.

  • table tr td span form – Die MySpace Suchleiste inklusive Google-Logo
  • table tr td span form img – Das Google Logo
  • .navigationBar – Die MySpace Navigation
  • table.friendsComments – Die Kommentare deiner Freunde

Ein Beispiel:

Dies würde die Suchleiste ausblenden.
table tr td span form {display:none;}

Unvollständig?

Natürlich kann man bei MySpace noch viel mehr am Layout ändern. Ich habe mich hier auf die am meisten gefragten Probleme konzentriert. Falls du findest, dass noch etwas Wichtiges fehlt was unbedingt erklärt werden muss, bitte nutze die Kommentarfunktion. Ich würde mich auch über Lob, Kritik und Anregungen zu diesem Artikel freuen.
Achtung:
Fragen zum Thema MySpace bitte im MySpace Forum (www.myspaceforum.de) stellen.

« Wenn Webdesigner Architekten wären…     Porn Movie »

62 Kommentare

  1. Gravatar von Nuck   Nuck
      schrieb am 11. Januar 2008

    Vor nem Monat hat auf unserer Myspace-Seite noch jemand was gepostet. Jetzt können wir den
    Button ( Alle anzeigen | Kommentar posten ) nicht mehr finden.
    Sind wir alle blöd, bzw. hast du ne Ahnung, wo das dran liegen könnte
    merzi mal

  2. Gravatar von Moritz   Moritz
      schrieb am 14. Januar 2008

    Also, dann nochmal für alle:

    Fragen bitte ab sofort im MySpace Forum stellen.

  3. Gravatar von Peter Stürmer   Peter Stürmer
      schrieb am 31. Januar 2008

    Danke, mir hat deine Seite geholfen.

  4. Gravatar von Strategy   Strategy
      schrieb am 2. Februar 2008

    Hi
    Erst einmal Danke, Danke, Danke für diese Seite und Deine Tutorials!
    Sie haben mir viel bei dem Entwurf meiner Seite geholfen:

    http://www.myspace.com/thesoundofstrategy

    Eine Frage bleibt jedoch, wie kann ich die Schriftfarbe und die Größe der Musikrichtungen und der Überschrift auf meiner Seite verändern, da ich mit der momentanen Größe (sehr klein) und der Farbe dunkelgrün nciht zufrieden bin!
    Leider finde ich nicht den Teil des Codes in dem ich diese Dinge ändern kann…habe schon Alles ausprobiert!
    MfG
    Strategy

  5. Gravatar von matej   matej
      schrieb am 18. März 2008

    gibt es einen unterschied zwischen den codes von musik seiten und normalen seiten von myspace weil wenn ich bei einer normalen seite den code einfüge kommt das bild ud wnen ich ihn bei einer musikseite einfüge is der hintergrund nur grau..wie kommts…

    brauche hilfe!!!!!!!!!!

  6. Gravatar von babadi   babadi
      schrieb am 4. April 2008

    Heey, eine frage wie bekomme ich die suchleiste weg ?
    hab das genau so eingefügt ( table tr td span form {display:none;} ) aba geht net =(

  7. Gravatar von Moritz   Moritz
      schrieb am 4. April 2008

    Weitere Fragen bitte auf http://www.myspaceforum.de stellen.

    Kommentare geschlossen.

  8. Gravatar von Myspace layout – PSD-Tutorials.de – Forum   Myspace layout - PSD-Tutorials.de - Forum
      schrieb am 29. Juli 2008

    […] Tutorial: MySpace Layout ändern (update) | Dead-Pixel.de – Webdesign, Grafikdesign, Weblog sehen kannst, gibt es mehrere Möglichkeiten. Es gibt spezielle Programme oder die Selbstmach Methode. Bei der Selbstmach Methode fügst du wie bei den Links beschrieben den Quelltext das CSS in den "About Me" Bereich ein. Dazu solltest du Kenntnisse in HTML und CSS besitzen was du z.B. auf SELFHTML 8.1.2 (HTML-Dateien selbst erstellen) erlernen und auch Befehle nachschlagen kannst. Weiterhin sind Kenntnisse in Bildbearbeitungsprogrammen von Nutzen. Es gibt unzählige Seiten im Netz die Sich mit dem Thema beschäftigen. Ich empfehle dir folgende Stichpunkte bei der Suche über Google … HowTo […]

  9. Gravatar von fuenfpunktnull.de» Blogarchiv » Liebes MySpace-Team   fuenfpunktnull.de» Blogarchiv » Liebes MySpace-Team
      schrieb am 22. Oktober 2008

    […] Frage war: Wie passe ich nun mein MySpace-Profil an. Google wusste Bescheid. Da habt ihr euch aber etwas ganz schön freakiges ausgedacht, mein liebes MySpace-Team. Ihr stellt […]

  10. Gravatar von   Eigenstndiges mySpace-Layout? - Musiker-Board
      schrieb am 16. Mai 2009

    […] […]

  11. Gravatar von Anonymous   Anonymous
      schrieb am 20. Juni 2009

    […] du also noch was suchst: SELFHTML: Stylesheets / CSS-Eigenschaften / Hintergrundfarben und -bilder Tutorial: MySpace Layout ändern (update) | Dead-Pixel.de – Webdesign Weblog Deutsches MySpace Forum (inoffiziell) • Forum anzeigen – Standardprofil v […]

  12. Gravatar von Liebes MySpace-Team | ausgebloggt.de   Liebes MySpace-Team | ausgebloggt.de
      schrieb am 23. April 2010

    […] Frage war: Wie passe ich nun mein MySpace-Profil an. Google wusste Bescheid. Da habt ihr euch aber etwas ganz schön freakiges ausgedacht, mein liebes MySpace-Team. Ihr stellt […]

Some rights reserved 2005-2016  Moritz Gießmann
Die Inhalte (Texte / Fotos) des Weblogs werden, sofern nicht anders angegeben, unter der Creative Commons Lizenz veröffentlicht.
http://www.dead-pixel.de läuft mit WordPress