Myspace is a nasty place to program. The entire setup of the site is based on tables, probably because of how easy it would be to screw up a system based on the css float command. (Actually, it is more likely because it was done in a week, and they are stuck on legacy code now that cannot be changed).
It isn’t all that simple to make any sort of code that will produce round corners on the table. For one, it is hard to seperate different tables within tables from each other. It is easy enough to end up with a “round border” within a table that is supposed to be one colour. More unfortunate is that there are some tables whose content you simply cannot edit; this includes the “contacting” table, as well as the URL for the website. It is possible to hide these, but the complexity in doing so is annoying. Finally, setting one fixed table width is nearly impossible; you can see my own profile for proof of that.
So can we make rounded borders for Myspace Profiles? I haven’t put more than 3 or 4 hours into this (I am too busy with work that makes money), but it is possible to curve one of the borders at least. I don’t like the colours I used, but they were easy to go with. (I wanted to go wtih a light blue and white, but it reminded me too much of this site :o)
This code is free to be redistributed as long as there is a link at the top of any page / post to this blog entry. I will post notes about it slowly over the next week or two.
<style type="text/css">
body {
background-color:white;
font-family: Verdana, Arial, sans-serif;
background-repeat: repeat-y;
background-position: left;
background-image: url("http://ordisante.com/pics/myspace/helix.jpg");
}
.masthead {
width: 800px;
height: 100px;
position: absolute;
margin-left: -400px;
left: 50%;
top: 170px;
color: 99E028;
font-size:12px;
text-align: center;
background-image: url("http://ordisante.com/pics/misc/banner.jpg");
background-color:99E028;
color: red;
}
body table {margin-top:114px;}
table {direction:rtl;}
table table table {direction:ltr;}
table, tr, td {background:transparent; border:0px;}
table table table {
background-position: top right;
background-image: url("http://ordisante.com/pics/myspace/roundright.jpg");
background-repeat: no-repeat;
background-color:99E028;
border:0px;
padding-top: 5px;
}
table table table tr {border:0px;}
table table table tr td {padding-left:5px; padding-right:5px; border:0px;}
table table table table {
background-image: url("");
background-repeat: no-repeat;
background-color:99E028;
border:0px;
padding: 0px;
}
table table table table table table{
background-image: url("");
background-repeat: no-repeat;
border:0px;
padding: 0px;
}
body td table, body div table {margin-top: 0;}
td.text td.text table table table td a img {width:100px;}
td.text td.text table table table td div img {width:80px;}
td.text td.text table table td img {width:280px; max-width:280px; width:auto;}
td.text td.text table table td div img {width:80px;}
* html td.text td.text table table td img {width:260px;}
* html td.text td.text table table td a img {width:90px;}
* html td.text td.text table table td div img {width:80px;}
input {background-color:transparent !important;}
td, span, div, input, a, table td div div font, body div table tbody tr td font {font-family:Verdana !important;}
td, span, div, input, table td div div font, body div table tbody tr td font {color:FFFFFF !important;}
.nametext, .whitetext12, .lightbluetext8, .orangetext15, .blacktext12, .redtext, .redbtext, .blacktext10, .btext {color:FFFFFF !important;}
a {
color:508202 !important;
text-decoration:none !important;
text-transform:none !important;
font-weight:bold !important;
font-style:normal !important;
}
a:hover {color:black !important; text-decoration:none !important; text-transform:none !important; font-weight:bold !important; font-style:normal !important;}
img {border:0px;}
div strong {display:none;}
table table table table table {background-image:url(url to the picture); background-position:center; display:block; width:300px; height:55px;}
td.text table {background-position: top left; background-image: url("http://ordisante.com/pics/myspace/roundleft.jpg"); background-repeat: no-repeat; background-color:99E028; border:0px; padding-top: 5px; }
td.text table table {background-image: url(""); background-color:99E028; border:0px; padding-top: 5px; }
td.text table table table {background-image:none; width:25%; height:auto; display:inline;}
.td.text table table table td:hover{
background-color:grey;
}
.blacktext12{color:transparent; display:none;visibility:hidden;}
</style>
