MySpace CSS Tutorial 5 : The Complete CSS

Here's the entire code that we put together for our MySpace design. As an exercise, you can clean it up by combining selectors that are using the same rules:

body {     
    background: url(http://pics.cssrule.com/pics/myspace/houndstoothbright2.jpg) repeat; 
    }

body a:link, a:visited { color: #950553; }

#footer { 
    background: url(http://pics.cssrule.com/pics/myspace/nimbus.png) 50% 70% no-repeat;
    }

body  #footer { padding-bottom: 115px; }

body div.blurbsModule h4 {
      color: #781a42;
      }

body .basicInfoDetails h2 { 
     font-family: Times, Serif;  color: #781a42;
     }
/*to compensate for new MySpace features such as rounding of corners and 
  additional padding
*/
body div.module div.moduleMid {  -moz-border-radius: 0;  padding: 0; } 

div#topnav { background-color: transparent; }

body .contentMid .module .templateList  li, 
body .contentMid .module .statusMood  li, 
body div.moduleMid div.moduleBody   div.toolbar, 
body .contentMid .module .moduleList  li {  
   border: none; 
}  
/* to override the new MySpace grey text color for the copyright text */
div#footer a, 
div#footer div {    
   color:#EEEAB6; 
}



body #topnav ul a:hover {
    background-color: #eeeab6;
    color: #781a42;
    }

body #topnav ul li a:hover small, body #topnav ul li a.hover small {
   color: #eeeab6;
   }

body #topnav ul li a span.mailCountNav {
   background-color:  #eeeab6;
   color: red;
   }

body div.interestsModule li h4, body .schoolInfo h4 a:link,
body .schoolInfo h4 a:visited {
   color: black;
   }

.interestsModule .moduleBody { margin-left:8px; margin-right:8px; }

.moduleBody { margin-left:8px; margin-right:8px; }

div#leaderboard, div#googlebar { background: transparent none; }
body div.contentMid {background: transparent none; }
div.module div.moduleBody li { background: transparent none; }
body div.moduleBody li.moduleItem { background: transparent none; }
div.contentMid2 { background:transparent none; } 
div.profileDemographics { background: transparent none; }
div.statusMoodModule ul.moduleList li, 
div.statusMoodModule ul.statusMood li, 
div.schoolsModule li.moduleItem, div.detailsModule li  {
    background: transparent none;
    }

body div.module div.moduleMid {
    background: url(http://pics.cssrule.com/pics/myspace/ruled.gif) 
                0 0 repeat; 
    width: 547px;  width: 546px; 
    }

body div.basicInfoModule div.moduleTop {
    background: url(http://pics.cssrule.com/pics/myspace/mheadtop.png) 
                no-repeat;
    height: 163px;
    padding: 0px;
    } 
    body div.basicInfoModule div.moduleTop div div {
        background: url(http://pics.cssrule.com/pics/myspace/welcome_potter.png)
                    50% 100% no-repeat;
        padding-top: 82px;
        height: 80px;
        } 

body div.basicInfoModule div.moduleMid { 
    margin-left: 0;
    width: 895px;
    }

body div.basicInfoModule img.photo { 
    margin-left: 20px; 
    }   

body div.content div.basicInfoModule div.moduleBottom {
    background: url(http://pics.cssrule.com/pics/myspace/mheadbottom.png)
                no-repeat;
    height: 53px;
    padding: 0px;
    } 

div.content div#col1_0 div.moduleTop {
    background: url(http://pics.cssrule.com/pics/myspace/yellowtop.png) 0 0 no-repeat;
    padding-top: 40px;
    }
    
body div.content div#col1_0 div.moduleMid {
    width: 290px;
    background: url(http://pics.cssrule.com/pics/myspace/yellowmid.gif) 0 0;
    }   
    
body div.content div#col1_0 div.moduleBottom  {
    background: url(http://pics.cssrule.com/pics/myspace/yellowbottom.png) 
                0 0 no-repeat;
    height: 83px;
    }

div.blogsModule div.moduleTop div {
    background: url(http://pics.cssrule.com/pics/myspace/blog_potter.png) 
                42% 0 no-repeat;
    height: 87px;
    } 

div.blurbsModule div.moduleTop div {
    background: url(http://pics.cssrule.com/pics/myspace/blurbs_potter.png) 
                42% 0 no-repeat;
    height: 77px;
    } 
    
div.commentsModule div.moduleTop div {
    background: url(http://pics.cssrule.com/pics/myspace/comments_potter.png) 
                42% 0 no-repeat;
    height: 77px;
    } 

div.interestsModule div.moduleTop div {
    background: url(http://pics.cssrule.com/pics/myspace/interests_potter.png)
                    42% 0 no-repeat;
    height: 77px;
    }     
    
div.friendSpaceModule div.moduleTop div {
    background: url(http://pics.cssrule.com/pics/myspace/friend_potter.png) 
                42% 0 no-repeat;
    height: 84px;
    } 

div.friendSpaceModule h3.moduleHead,
div.blogsModule h3.moduleHead,
div.blurbsModule h3.moduleHead,
div.commentsModule h3.moduleHead,
div.interestsModule h3.moduleHead { 
    visibility: hidden; 
    }

body div#col1_1 div.moduleTop { 
    padding-top: 45px;
    margin-top: 30px;
    background: url(http://pics.cssrule.com/pics/myspace/cardtop.png) 
                no-repeat;
    }

body div#col1_1 div.module div.moduleBottom {
    bottom-padding: 25px;
    height: 75px;
    background: url(http://pics.cssrule.com/pics/myspace/cardbottom.png)
                no-repeat;
    }

div.module h3.moduleHead  { 
    background: #781a42; 
    color:whitesmoke; 
    font-size: 98%;
    opacity: 0.70;
    filter: alpha(opacity=70);
    }

body div[class~="moduleTop"] div, body div[class~="moduleBottom"] div {
    background-image: none;
    border: none;
    }

div.module div.moduleMid { border: none;} 
body div.moduleMid1 { border: none; } 

div#footer, div#header {
    background-color: #781a42;
    }

#footer, div#footer a {
    color: #eeeab6;
    }


div#leaderboard, div#googlebar, div#topnav {
    width: 848px;
    margin: 0 auto;
    }

div.content {
    width: 960px; 
    margin: 0 auto;
    }
    
div.wrap, div.header, div.footer {
    width: 100%;
    }

div#topnav ul li.hover a, li.hover,  div#topnav ul li.dropDown:hover a { 
    background: #781a42;
    color: WhiteSmoke;
    }

body #topnav li.dropDown:hover ul.subMenu a:hover,
body #topnav li.hover ul.subMenu a:hover {
    background: #eeeab6;
    color: #781a42;
    }

ul#leftNav, ul#rightNav {
    border-right: 1px solid #8e4061;
    }
    
ul#leftNav li, ul#rightNav li {
    border-left: 1px solid #8e4061 ;
    }

body div.content div.schoolsModule div.moduleTop div {
    background: url(http://pics.cssrule.com/pics/myspace/schools_potter.gif) 
                    40%  0 no-repeat;
    height: 80px;
    }

div.schoolsModule h3.moduleHead {
    visibility: hidden;
    }


div#row1 div.firstColumn div.columnEnd {
    background: url(http://pics.cssrule.com/pics/myspace/gryfindor.png) no-repeat;
    width: 226px;
    height: 212px;
    margin: 50px 0 0 36px;
    } 

body div.commentsModule div.userComment { background: transparent; } 

MySpace CSS Tutorials

• MySpace Tutorial 1 : Introduction and a Harry Potter Theme
• MySpace Tutorial 2 : MySpace Structure
• MySpace Tutorial 3 : Styling MySpace using CSS
• MySpace Tutorial 4 : More Improvements
• MySpace Tutorial 5 : The Complete CSS