CSSRule: MySpace CSS Tutorial 6 : Cast a Spell on Your Profile, the Potter Way

Saturday, April 17, 2010

MySpace CSS Tutorial 6 : Cast a Spell on Your Profile, the Potter Way

Not interested in learning CSS but would like to use the styles that we developed in your MySpace layout? No problem at all, you can certainly do that. I have the Harry Potter Gryyfindor theme that you can copy and paste into your MySpace account to "transfigure" your profile page. (Transfiguration: Professor Moody transfigured Malfoy into a ferret - or was it a weasel - and bounced him up and down, as punishment for attempting to attack fellow student Harry Potter)

Here are the instructions: Go to "Customize Profile" from the Profile pulldown menu on your MySpace page. Click on it which will take you to another screen. From the top left corner under "Select Theme", choose "CSS {}". "Clear CSS" to get rid of old styles and copy/paste the tested code in the window below. Hit "Preview" button and then if you're happy with what you see, click "Publish" to finish changing your MySpace layout. MySpace asks you one more time if everything is "OK". So one more click later, you'll be done.

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; }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; } body .contentMid .module templateList  li, body .contentMid .module .statusMood  li, body div.moduleMid div.moduleBody     div.toolbar, body .contentMid .module .moduleList  li {  border: none; }  body div.module div.moduleMid {    -moz-border-radius: 0;    padding: 0; }  div#topnav { background-color: transparent; }  div#footer a, div#footer div { color:#EEEAB6; }