Tutorial: MySpace Layout ändern (update)

Geschrieben am 4. Juli 2007 * Kommentare(62)

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…     MySpace – Forum »