Sunday, August 27, 2006
in progress :: version 0.7 : the masthead
the techniques described here have been updated. please see the following post:
custom masthead / banner (updated)
custom masthead / banner (updated)
Starting work on version 0.7 which will attempt to coordinate objects in the myspace layout exposed by the v.0.6 bet-scan. While in progress, a demo of this version of the stylesheet can be viewed at the recivilized profile.
The first order of business: the masthead. According to my template model, the myspace masthead can be divided into three distinct tables which most designers will easily identify: ABOVE AD, AD, BELOW AD. However, because of the odd use of div tags, the layout and color coordination of these three tables can be split up into two parts: (1) ABOVE AD/AD (the ad banner) and (2) BELOW AD.
Here is my stylesheet for anyone interested in changing this section of their profile:
NOTE { MOSHI PROJECT - MASTHEAD STYLING }
NOTE { TOM - Template Object Model - STYLING }
body { background-color:black; font-family:arial,sans-serif; }
body table { background-color:transparent; }
TOM { obscured or transparent objects }
table, table table { background-color:transparent; }
table table table { width:100%; background:transparent; margin:4px 0; }
table table table table { padding:0px;margin:0px; background-image: none; }
table table table table td { padding:0px;margin:0px; }
SECTION { TABLE 1... Myspace Ad Masthead }
div table { background-color:white; border-color:f8f8ff; border-width: 1px; border-style: solid; }
SECTION { MASTHEAD - TABLE 1 - 3 }
TOM { MASTHEAD ABOVE AD }
div table td { background-color:transparent; border-color:white; border-width: 1px; border-style: solid; }
font {color:cccccc; font-weight:normal; font-style:none; text-decoration:none;}
a font:hover {color:9999ff;}
TOM { SIGNUP MINI TABLE... coordinated with MASTHEAD BELOW AD below }
a.man font { color:9999ff; background-color:white; }
a.man font:hover { color:0000ff; background-color:white; }
TOM { MASTHEAD BELOW AD }
div table table td { background-color:eeeeff; border-color:0000ff; border-width: 1px 0px 1px 0px; border-style: solid; }
a.navbar:link, a.navbar:visited {color:0000ff; font-weight:normal; font-style:none; text-decoration:none;}
a.navbar:hover {color:9999ff;}
NOTE { TOM - Template Object Model - STYLING }
body { background-color:black; font-family:arial,sans-serif; }
body table { background-color:transparent; }
TOM { obscured or transparent objects }
table, table table { background-color:transparent; }
table table table { width:100%; background:transparent; margin:4px 0; }
table table table table { padding:0px;margin:0px; background-image: none; }
table table table table td { padding:0px;margin:0px; }
SECTION { TABLE 1... Myspace Ad Masthead }
div table { background-color:white; border-color:f8f8ff; border-width: 1px; border-style: solid; }
SECTION { MASTHEAD - TABLE 1 - 3 }
TOM { MASTHEAD ABOVE AD }
div table td { background-color:transparent; border-color:white; border-width: 1px; border-style: solid; }
font {color:cccccc; font-weight:normal; font-style:none; text-decoration:none;}
a font:hover {color:9999ff;}
TOM { SIGNUP MINI TABLE... coordinated with MASTHEAD BELOW AD below }
a.man font { color:9999ff; background-color:white; }
a.man font:hover { color:0000ff; background-color:white; }
TOM { MASTHEAD BELOW AD }
div table table td { background-color:eeeeff; border-color:0000ff; border-width: 1px 0px 1px 0px; border-style: solid; }
a.navbar:link, a.navbar:visited {color:0000ff; font-weight:normal; font-style:none; text-decoration:none;}
a.navbar:hover {color:9999ff;}
Again, a demo can currently be found at www.myspace.com/recivilized. The moshi profile will continue to demo the v 0.6 betscan for the time being.
