In the last few months in my spare time i have been playing around a little bit with mySpace templates and i must admit trying to create a clean style is hard. If you think just because you can design Websites from scratch using only CSS this task will be easy then think again, unlike most stylesheets where you can use DIV and ID tags the CSS in mySpace is more CSS hacks for table layouts.

 For example:

table table table {
 border:1px solid orange;
 background-color: orange;
 }

table table table td {
 border:1px solid black;
 background-color: black;
 } 

In this tutorial i am going to attempt to define all the tables using  bright colors so we can see  exactly how the layout works.

Because i am not sure how this will look myself im not sure how this Tutorial will end up, maybe helpful maybe not lol.

First of all im going to test the below code:

table {
 border:1px solid red;
 background-color: red;
 }

table td {
 border:1px solid blue;
 background-color: blue;
 }

Which looks like this:

Where Blue is table td and red is table.

Most of my reason for creating this tutorial was to have a resource for myself which i could look back on and see in screenshot form how the page layout works with CSS. What im going to do now is just add a screenshot and code for every table. And at the end i will add all the CSS together and see how it looks then. You can also see a preview here on my test mySpace account. www.myspace.com/bluepearltest

The 2nd Table

table table {
 border:1px solid green;
 background-color: green;
 }

table table td {
 border:1px solid yellow;
 background-color: yellow;
 }

The 3rd Table

table table table {
 border:1px solid orange;
 background-color: orange;
 }

table table table td {
 border:1px solid black;
 background-color: black;
 }

The 4th Table

table table table table {
 border:1px solid pink;
 background-color: pink;
 }

table table table table td {
 border:1px solid purple;
 background-color: purple;
 }

The 5th Table

table table table table table {
 border:1px solid cyan;
 background-color: cyan;
 }

table table table table table td {
 border:1px solid brown;
 background-color: brown;
 }

The 6th Table

table table table table table table {
 border:1px solid yellow;
 background-color: yellow;
 }

table table table table table table td {
 border:1px solid green;
 background-color: green;
 }

 Combined CSS for all mySpace tables

 And this is a screenshot of all the above joined together.

Im hoping that these screen shots will help others as i hope they will help me to properly understand the mySpace CSS layout. If mySpace had the same built in CSS editor like vBulletin life would be alot easier for mySpace template designers.

Check out http://www.myspace.com/bluepearltest for this tutorial in action.

Share This

 

This entry was posted on Friday, June 22nd, 2007 at 2:18 am and is filed under mySpace Templates, Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.