Ein solches Layout birgt Herausforderungen, denen ich bisher noch nicht so oft begegnet bin. Deshalb ist das auch ein Grund es mal zu versuchen. Vor allem muss der grafische Entwurf des neuen Designs auch flexibel funktionieren. Noch kurz Fakten: ich habe mich bei der Breite des Wrappers für 60em = 960px (bei der Standardschriftgröße von 16px) entschieden, was momentan dem Standard entspricht und auch mit gängigen Grids funktioniert. Eine feine empfehlenswerte Sache ist in diesem Zusammenhan der px-to-em calculator.

Es bleibt spannend <– blöde Floskel! Spannend ist vor allem, wann ich wieder Zeit finden werde, inspiriert und kreativ an meinem grafischen Entwurf weiter zu Arbeiten. Es fühlt sich aber seltsamerweise gut an, HTML und Screendesign gleichzeitig zu bearbeiten, da sich das auch gegenseitig beeingflusst. Das ist so völlig anders als die Arbeit in der Agentur, wo man meist mit dem HTML erst beginnt, sobald das Screendesign fertig ist.

• Beginn des Redesigns (3)
• Dieses Design ist zu Klischee-zweinullig! (9)
• Redesign Teil4: Es wird ein Relaunch (3)
• CSS Naked Day 2009 (0)

Im Moment denke ich, wie wohl jeder Designer von Zeit zu Zeit, über einen Relaunch des Blogs nach, da es so vieles gibt, das man verbessern und erweitern könnte. Das fängt beim Layout an, das meiner Meinung nach etwas magaziniger werden könnte, geht über den umfassenden Einbau Microformats bis hin zu einer kompletten Neustrukturierung des Quellcodes, der wesentlich sauberer sein könnte. Außerdem ist mir das Layout zu Web2nullig geworden und es könnte etwas gesetzter und mit etwas weniger “Bonbon” Style daher kommen. Allerdings habe ich dann auch wieder Bedenken, meine “Marke”, sofern man das auf meinem Level so nennen kann, kaputt zu machen. Evtl. wird mir diese Umfrage mehr Aufschluss darüber geben, was ein Blog wirklich braucht. Bis dahin bleibt wohl noch alles beim alten.

• Tutorial: MySpace Layout ändern (update) (62)
• MySpace: Layout ändern für Musiker! (update) (15)
• Tschüss Google Adsense (5)
• Redesign Teil3: Experimente mit Struktur und Farben (5)

Themen:

• Wie kann ich das Layout ändern
• Grundlagen
• Hintergrundfarbe ändern
• Hintergrundbild ändern
• Rahmen / Border
• Elemente ausblenden

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.


• MySpace: Layout ändern für Musiker! (update) (15)
• In Karlsruhe angekommen, oder auch nicht… (2)
• Redesign Teil3: Experimente mit Struktur und Farben (5)
• Rückblick: Designcamp Köln 2009 (1)

Leichter gesagt als getan…

Für die Band Satanic Voices habe ich natürlich einen Musik Account bei MySpace angelegt. Ich konnte keine Dokumentation finden, wie man bei Musik Accounts das Layout ändert. Also machte ich mich auf die Suche nach einem Tutorial, was auch erfolglos blieb. Die letzte Möglichkeit ist immer die Flucht nach Vorne: Ausprobieren

Und tatsächlich:
Wenn man im “Bandinfo” Fenster CSS-Angaben macht, werden diese auf das komplette Layout angewendet. Da nun fast jeder Bereich seine eigene Klasse oder ID hat, kann man beliebig Bereiche ausblenden oder den Hintergrund oder die Position verändern. Alles was man mit CSS halt so anstellen kann. Besonders klasse finde ich, dass man so auch ungewünschte Bereiche, wie das obere Banner, oder die Suchleiste ausblenden kann.

Liebes MySpace Team: Überarbeitet bitte nochmal eure Dokumentation, da es entweder nicht zu allen wichtigen Problemen Artikel gibt, oder sie sofern sie vorhanden sind, nur schwer zu finden sind!

UPDATE 04.07.2007 :
Ein ausführliches Tutorial ist ab sofort verfügbar.

• Tutorial: MySpace Layout ändern (update) (62)
• In Karlsruhe angekommen, oder auch nicht… (2)
• Redesign Teil3: Experimente mit Struktur und Farben (5)
• Rückblick: Designcamp Köln 2009 (1)