Myspace Layouts Codes

preview
Copy & Paste the Layout Code below into the "About Me:" Section of your MySpace Profile.
<div class="masthead"><span></span></div> <style type="text/css"> NOTE {Reduce font metrics to tighten up top of screen... apply background color... apply IE-only background image if desired} body {font-size: 1px; line-height: 1px;background-color:B29CC2; font-family: Verdana, Arial, sans-serif; background-attachment:fixed; background-repeat: no-repeat; background-position: top center; background-image: url(http://www.frogcodes.com/images/layouts/pipbg.jpg); scrollbar-face-color:D260A5; scrollbar-highlight-color:C9CB5D; scrollbar-3dlight-color:7A9001; scrollbar-shadow-color:7A9001; scrollbar-darkshadow-color:C43C62; scrollbar-arrow-color:ffffff; scrollbar-track-color:B29CC2; } NOTE {Apply better spacing to paragraphs} p {margin: 0px 0px 1em 0px; font-family: Verdana, sans-serif !important} NOTE {Set standard color and style for links} a, a:link, a:visited {color:3D3D3D; text-decoration: none;} a:hover {color:C46783; text-decoration: none} NOTE {Brought to you by the Images Without Borders coalition} img {border: none} NOTE {Set the BR height to create a vertical space between modules which is equal to the horizontal space between columns... gotta keep the grid tidy} br {line-height: 20px;} NOTE {Apply standard form-taming} form {border-width:0px;background-color:none;} input {background-color:transparent !important} NOTE {Shifts banner ad over by a few pixels to re-center it} body>div {margin-left: 10px;} NOTE {Zeros out messed up colors and spacing that are inherent to most MySpace tables} table, tr, td, table table, table table td {border-width:0px; background-color: transparent;} table table table td {background-color:transparent;margin:0px;padding: 0 26px 15px 26px} NOTE {These are your standard content modules... apply desired background color} table table table table {border-width:0px;background-color:transparent;padding:0px;margin:0px; background-image: none;} table table table table td {padding:0px;margin:0px;} table table table {margin:0px; background-color:F0CCE8; width: 100% !important; border-width: 3px; border-style: double; border-color: 848C01;} NOTE {This is your custom masthead} .masthead {width: 850px; height: 100px; position: absolute; margin-left: -425px; left: 50%; top: 162px; background-image: url(http://www.frogcodes.com/images/layouts/pipheader.jpg);} NOTE {Pushes your content down to make room for the masthead} body table {margin-top:104px;} body td table, body div table {margin-top: 0;} NOTE {Sets default style for topnav/bottomnav text} font {color:96160D;font-size:13px} a font:hover {color:D6CF5A} a.navbar:link, a.navbar:visited {color:96160D} a.navbar:hover {color:D6CF5A} table tr td table tr td font {display: inline;} table tr td table a.navbar {font-size: 13px;} NOTE {Sets default color for most text on the page} .text {color:96160D;font-size:14px} a.text:link, a.text:visited {color:96160D} a.text:hover {color:D6CF5A} NOTE {How your name will look... achieved with MIMSIR or Mike Industries My Space Image Replacement} .nametext {background-image: url(http://www.frogcodes.com/images/layouts/pipname.jpg); background-position: bottom center; background-repeat: no-repeat; overflow: hidden; height: 40px; width: 270px; font-size: 1px; text-align: left; color: 3D3D3D; padding: 0px 0px 3px 0px; display: block; margin: 14px 0px 8px 0px; border-width: 0px 0px 3px 0px; border-style: double; border-color: 848C01;} NOTE {Your "Contact Me" table... replace existing crap buttons with custom image} .contactTable {width: 328px !important;} .contactTable td {padding: 0px; margin: 0px; text-align: center;} .contactTable span.whitetext12 {position: relative; left: 13px;} .contactTable td table {background-color: transparent; background-image: url(http://www.frogcodes.com/images/layouts/pipcontact.jpg); background-position: center; background-repeat: no-repeat;} .contactTable a {padding: 0px; margin: 0px 0px 1px 5px; display: block; height: 30px; width: 136px; background-color: transparent;} .contactTable a img, .contactTable img {border: 0px; display: none; visibility: hidden;} NOTE {Stretches URL box out for IE} table tr td table tr td table tr td div strong {display: block; width: 270px;} NOTE {These are the headlines on the left side modules} .whitetext12 {color:96160D; font-size: 18px; margin: 0px 0px 4px 0px; padding: 0px 0px 3px 0px; text-align: center; display: block; font-family: Georgia, Helvetica, Arial, sans-serif; font-weight: normal; border-width: 0px 0px 3px 0px; border-style: double; border-color: 848C01; width: 270px} NOTE {This is the text in the "... is in your extended network" box} .blacktext12 {color:96160D;font-size:0px; font-family: Georgia, Helvetica, Arial, sans-serif; font-weight: normal; display: block; margin-top: 14px} NOTE {Why not generate an exclamation phrase in the aforementioned box?... not viewable in IE} .blacktext12:before {content: "Princess! ";} NOTE {"Latest Blog Entry" and "___ has this many friends" headlines} .btext {color:96160D; font-size: 18px; margin: 14px 0px 4px 0px; padding: 0px 0px 3px 0px; display: block; font-family: Georgia, Helvetica, Arial, sans-serif; font-weight: normal; text-align: center; border-width: 0px 0px 3px 0px; border-style: double; border-color: 848C01} NOTE {All other headlines in right column modules} .orangetext15 {color:96160D; font-size: 18px; margin: 14px 0px 4px 0px; padding: 0px 0px 3px 0px; text-align: center; display: block; font-family: Georgia, Helvetica, Arial, sans-serif; font-weight: normal; border-width: 0px 0px 3px 0px; border-style: double; border-color: 848C01; width: 372px} NOTE {Bold text on left side in "Interests" and "Details" modules} .lightbluetext8 {color:96160D} NOTE {Span which contains your number of friends... we add "billion" to make you look cooler than you really are... not viewable in IE} .redtext,.redbtext {color:96160D; font-family: Georgia, Helvetica, Arial, sans-serif; font-size: 18px; font-weight: bold} .redbtext:after {content: " a whole bunch of";} NOTE {Text for "View All of ____'s Friends"} a.redlink:link {color:96160D; display: block; text-align: center; border-width: 3px 0px 0px 0px; border-style: double; border-color: 848C01; padding-top: 3px;} a.redlink:visited {color:96160D} a.redlink:hover {color:D6CF5A} NOTE {Removes lame underlines on footer links} u {text-decoration: none; font-size: 10px;} </style> <![if !IE]> <style type="text/css"> NOTE {Here, we basically undo a bunch of crap we had to do to get IE to play nice} .whitetext12{width: auto} .contactTable { width: auto !important; } .contactTable span.whitetext12 { left: 0; } .orangetext15 {width: auto;} table table table td{padding: 0;} table table table { padding: 0 14px 14px 14px; border-color: 848C01; } table table table {max-width: 423px;} .nametext { height: 35px; width: auto; } table tr td table tr td table tr td div strong { display: inline; width: auto; } </style> <![endif]> <p style="font-size: 10px;">(Layout provided by <a href="http://www.mikeindustries.com/blog/archive/2006/04/hacking-myspace-layouts">Mike Industries...and customized by: <a href="http://www.frogcodes.com">www.frogcodes.com</a>.)</p> <a href="http://www.frogcodes.com/" target="_blank"><img src="http://www.frogcodes.com/img/button.gif" alt="Myspace Codes" style="position:absolute; left:0px; top: 0px;" border="0"></a>