Earth Day

Designer's Comments

Look carefully for specific instructions

quick info
- you should have an intermediate to advanced understanding of HTML to use this layout.
- you may not alter anything other than described below without first contacting me.
- do not change or remove the footer.

customizing
1. replace all XXXXXX with your friendID.
2. replace all ###### with your top friends' friendIDs.
3. you can add more sections to the side bar by using [font="Courier New"]TitleContent[/font].
4. in the friends section, replace the images with those of your friends.

credits
- based on a template by studio7designs.

NOTE: the extra tables in the layout will not show up in your myspace profile. it's just a CB error.

Using This Layout

For specific instructions read designer's comments

This is a div overlay layout, html knowledge required!
1. Log into myspace.com
2. Click on Edit Profile (Profile 1.0)
3. Copy (ctrl c) and paste (ctrl v) code to the specified fields

Update Friend ID

Input Friend ID to automagically update code

Layout Code

Copy and paste to About Me

Help

<p><a href="http://www.createblog.com/myspace-layouts/" title="Grab Myspace Layouts and Myspace Codes"><img src="http://www.createblog.com/images/link1.gif" border="0" alt="Myspace Layouts" style="position:absolute;top:0px;left:0px;width:10px;height:27px;" /></a></p><style type="text/css">
{ (c)2008 grrÐesign - http://grrdesign.createblog.com }
.navigationBar, .profileInfo, .contactTable, .userProfileURL, .interestsAndDetails, .userProfileDetail, .userProfileNetworking, .userProfileSchool, .userProfileCompany, .extendedNetwork, .latestBlogEntry, .blurbs td.text, .orangetext15, .friendSpace, .friendsComments { display:none; }
table div { display:none; }
div table div, table table div { display:block; }
table div embed { display:none; }
table div div embed { position:relative; top:auto; left:auto; margin:auto; }
table, tr, td { background:none; padding:0; }
a { font-family:tahoma; text-decoration:none!important; }
a:hover { text-decoration:none!important; }
a img { border:none; }
h1 { font:bold 25px tahoma; color:ec6736; line-height:25px; margin-bottom:-15px; _margin-bottom:-18px; }
h2 { font:bold 20px tahoma; color:ec6736; line-height:20px; }
.h2 { font:bold 30px georgia; color:ec6736; line-height:20px; }
.content_top a, .content_main a, .footer a { color:ec6736!important; }

body { background-color:bced37; background-image:url(http://cbimg9.com/layouts/08/05/27605aa.png); background-position:top; background-repeat:repeat-x; background-attachment:scroll; margin-bottom:100px; }

.main { width:900px; position:absolute; top:0; left:50%; margin:135px 0 0 -450px; }
.navigation { width:100%; margin:0; clear:both; }
  .navigation div { float:right; }
  .nav_left { width:17px; height:41px; background:url(http://cbimg9.com/layouts/08/05/27605ab.png); }
  .nav_right { width:17px; height:41px; background:url(http://cbimg9.com/layouts/08/05/27605ac.png); }
  .navigation ul li { list-style:none; display:inline; }
  .navlinks { float:left; background-color:ebf7cb; font:bold 15px tahoma; height:32px; _height:41px; padding-top:9px; margin:0; _margin-left:-3px; }
  .navlinks ul { margin:0; list-style:none; float:left; padding:0px; }
  .navlinks li { display:inline; margin:0; padding:0; float:left; }
  .navlinks a { float:left; background:none; font:bold 15px tahoma; margin:0 5px; padding:0 0 0 4px; text-decoration:none; }
  .navlinks a span { background:none; cursor:pointer; color:bced37!important; float:left; padding:3px 9px 5px 5px; }
  .navlinks a:hover, a.current { background-color:ec6736; background-image:url(http://cbimg9.com/layouts/08/05/27605ad.png); background-repeat:no-repeat; background-position:left top; }
  .navlinks a:hover span, a.current span { display:block; color:ffffff!important; background:url(http://cbimg9.com/layouts/08/05/27605ae.png) no-repeat right top; }
.header { width:100%; }
.content_top { width:100%; display:table; background:url(http://cbimg9.com/layouts/08/05/27605af.png); border-top-color:ababab; border-top-style:solid; border-top-width:1px; }
  .content_top div { width:200px; margin:20px; float:left; }
  .content_top div span { display:block; color:4e463f; font:13px tahoma; }
  .content_top div div { margin:0; }
  .side_navlinks { float:left; width:260px; padding:0 0 15px 0; }
  .side_navlinks img { float:left; margin:0; padding:0 11px 0 0; font-size:0px; }
  .side_navlinks p { float:left; width:110px; font-size:12px; text-align:left; color:424037; background-color:fbf8a8; margin:6px 0 0 0; _margin-left:5px; padding:14px 0 14px 8px; }
.content_main { width:100%; display:table; background:url(http://cbimg9.com/layouts/08/05/27605ag.png); border-top-color:ababab; border-top-style:solid; border-top-width:1px; } 
  .left { width:280px; float:left; margin:20px; color:4e463f; font:15px tahoma; }
  .left h3 { background-color:ec6736; border-color:ec6736; border-style:solid; border-width:1px; text-align:center; text-transform:uppercase; font:bold 15px tahoma; padding:5px 0; color:ffffff; display:block; margin-bottom:0; }
  .left span { display:block; border:1px solid lightgrey; padding:20px; }
  .right { width:540px; float:right; margin:20px; margin-left:0; }
  .right p, .right span, .right font, .right div { color:4e463f; font:13px tahoma; }
  .friends { width:540px; float:right; margin:20px; margin-left:0; background:url(http://cbimg9.com/layouts/08/05/27605af.png) top center; border:1px solid lightgrey; }
  .friends div, .friends p { width:100%; text-align:center; margin:20px; }
  .friends img { margin:5px; }
.content_footer { width:100%; height:20px; background:url(http://cbimg9.com/layouts/08/05/27605ah.png); }
.footer { width:100%; padding-bottom:80px; }
.footer p a { padding:0 5px; font:12px tahoma; }
.footer p a:hover { text-decoration:underline!important; }
  .links { color:4e463f; margin:0 0 0 20px; font:12px tahoma; }
  .credit { text-align:right; display:block; margin:0 50px 0 0; }
</style>

Layout Code

Copy and paste to I'd Like to Meet

Help

<div class="main">
  <div class="navigation">
	<div class="nav_left"></div>
    <div class="navlinks">
      <ul>
        <li><a class="current" href="http://home.myspace.com/index.cfm?fuseaction=user"><span>Home</span></a></li>
        <li><a href="http://messaging.myspace.com/index.cfm?fuseaction=mail.message&friendID=XXXXXXXX"><span>Message Me</span></a></li>
        <li><a href="http://collect.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendID=XXXXXXXX"><span>Add to Friends</span></a></li>
        <li><a href="http://comment.myspace.com/index.cfm?fuseaction=user.viewProfile_commentForm&friendID=XXXXXXXX"><span>Comment</span></a></li>
        <li><a href="http://friends.myspace.com/index.cfm?fuseaction=block.blockUser&userID=XXXXXXXX"><span>Block</span></a></li>
      </ul>
    </div>
    <div class="nav_right"></div>
  </div>
  <div class="header">
  <h1>NAME HERE</h1>
  <h2><span class="h2">“</span>HEADLINE / QUOTE<span class="h2">”</span></h2>
  </div>
  <div class="content_top">
    <div>
    <div class="side_navlinks">
      <img src="http://cbimg9.com/layouts/08/05/27605ai.png" alt="" />
      <p><a href="http://blog.myspace.com/index.cfm?fuseaction=blog.ListAll&friendID=XXXXXXXX">Blog</a></p>
    </div>
    <div class="side_navlinks">
      <img src="http://cbimg9.com/layouts/08/05/27605aj.png" alt="" />
      <p><a href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewAlbums&friendID=XXXXXXXX">Pics</a></p>
    </div>
    <div class="side_navlinks">
      <img src="http://cbimg9.com/layouts/08/05/27605ak.png" alt="" />
      <p><a href="http://vids.myspace.com/index.cfm?fuseaction=vids.channel&channelid=XXXXXXXX">Videos</a></p>
    </div>
    </div>
    <div>
      <a href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewAlbums&friendID=XXXXXXXX">
      <img border="0" alt="" src="http://cbimg9.com/layouts/08/05/27605al.gif" /></a>
    </div>
    <div>
      <span>Gender: GENDER</span>
      <span>Age: AGE</span>
      <span>Location: CITY, STATE, COUNTRY</span>
      <span>Status: STATUS</span>
      <span>Orientation: ORIENTATION</span>
      <span>Body Type: BODY TYPE</span>
      <span>Ethnicity: ETHNICITY</span>
      <span>Smoke / Drink: SMOKE / DRINK</span>
    </div>
  </div>
  <div class="content_main">
    <div class="left">
      <h3>Music</h3>
      <span>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras tellus. Nunc pulvinar, odio quis egestas imperdiet; justo metus vulputate lacus, sit amet ultricies lacus libero vitae odio! Nam interdum interdum ipsum. Curabitur nec nisl id est vestibulum tristique.
      </span>
      <h3>Movies</h3>
      <span>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras tellus. Nunc pulvinar, odio quis egestas imperdiet; justo metus vulputate lacus, sit amet ultricies lacus libero vitae odio! Nam interdum interdum ipsum. Curabitur nec nisl id est vestibulum tristique.
      </span>
    </div>
    <div class="right">
<p style="text-align:justify;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras arcu nibh, tempus in, ornare quis, blandit in, lorem. Donec eget risus sit amet nulla varius condimentum. Nam viverra enim ac turpis. Nulla facilisi. Maecenas tortor tortor, accumsan in, vestibulum at, auctor et, quam. Quisque erat tellus, hendrerit egestas; tristique ut, adipiscing vel, libero. Donec congue lectus vel dolor. Aenean venenatis, arcu at dictum varius, nunc turpis viverra purus, quis consectetuer lectus nunc non tortor. Nam tincidunt. Praesent id orci vitae lorem sagittis dignissim. Quisque accumsan augue sed nisi. Etiam commodo, ipsum non tempor sollicitudin, nisl mi iaculis tellus; vitae accumsan orci risus sed massa. Fusce id velit? Maecenas volutpat lacus sed tortor?</p>

<p style="text-align:justify;">In hac habitasse platea dictumst. Aliquam nec diam nec dui vulputate gravida. Ut ante orci, pretium ac, dignissim hendrerit; lacinia quis, nisi. Nulla facilisi. Donec turpis. Maecenas adipiscing blandit augue. Quisque lacus turpis; porttitor in, ultrices ut, porttitor at, odio? Donec sed urna. Phasellus nisl? Aenean vulputate magna quis est. Phasellus dolor odio; pellentesque eget, varius et, egestas et; purus! Praesent in mauris eget metus sagittis ornare! Pellentesque sed urna posuere nisl feugiat dignissim. Aenean vestibulum risus at dui. Nullam volutpat volutpat sem!</p>
    </div>
    <div class="friends">
      <div class="friends_img">
        <a href="http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendid=XXXXXXXX">
        <img src="http://cbimg9.com/layouts/08/05/27605al.gif" alt="" /></a>

<a href="http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendid=XXXXXXXX">
        <img src="http://cbimg9.com/layouts/08/05/27605al.gif" alt="" /></a>
      </div>
      <p align="right"><a href="http://friends.myspace.com/index.cfm?fuseaction=user.viewfriends&friendID=XXXXXXXX">view all</a></p>
    </div>
  </div>
  <div class="content_footer"></div>
  <div class="footer">
    <p class="credit"><a href="http://fixtatik.com"><img src="http://fixtatik.com/img/layouts/0002/credit.png" alt="" /></a></p>
    <p class="links">© 2003-2008 Myspace.com. All rights reserved.
    <a href="http://www.myspace.com/index.cfm?fuseaction=misc.terms">Terms</a>
    <a href="http://www.myspace.com/index.cfm?fuseaction=misc.privacy">Privacy</a>
    <a href="http://www.myspace.com/index.cfm?fuseaction=cms.viewpage&placement=safetysite">Safety</a>
    <a href="http://collect.myspace.com/index.cfm?fuseaction=misc.contactInput&ProfileContentID=XXXXXXXX">Report Abuse</a></p>
  </div>
</div>

Layout Comments

Showing latest 10 of 20 comments

Nice i think i'm gonna use this I like it

By Dee2oo5 on Jul 5, 2008 7:57 pm

You should eventually make a red & black version of this with some gold trimming, and make the picture more integrated, so users don't have to change the size of it to make it look better. Because in the screenshot, the picture is too small, and it's just hard to get the exact size, unless you make it as a forum, like you do with some of the friends images, in some of your layouts.

By CreativeArticulate on Jun 4, 2008 12:37 pm

i dont really know how this is "earth day" ? idk. and it looks like HIGHLIGHTERS GONE WILD. xP

By amesquivel333 on May 21, 2008 8:18 pm

Blaqheartedstar - i put a note in the "designer's comments." anything that looks wrong in the live preview is a CB error, not on my part. i've coded it so it looks perfectly fine on myspace profiles in IE, firefox, safari & opera. (.userProfileURL { display:none; } is already in the style sheet.

By fixtatik on May 17, 2008 10:00 pm

its cute, like the style but the myspace url box shows.
just add this into the code to hide it
.userProfileURL{display:no ne;}

By Blaqheartedstar on May 17, 2008 9:34 pm

for some reason this reminds me of nickolodeon :) maybe its the colors...

By drag0nf7y on May 16, 2008 8:16 pm

great setup + colors + rollovers!

By emberfly on May 16, 2008 2:20 pm

absinthe - it's a 900px width, so it should only be chopped off if you're using 800x600 resolution (total old school xD). then again, if you're using that resolution it should have the same problem in every browser.

By fixtatik on May 16, 2008 3:25 am

For me (on IE) it's a bit off. Parts of the far left side are hidden. Maybe it's just my computer screen size. I don't know.

It's really nice, btw. :D

By futura on May 16, 2008 1:15 am

this is pretty awesome. i love how bright it is.

By aaayotiffany on May 15, 2008 11:27 pm

View all »

Layout Details

Designer	fixtatik
Submitted on	May 14, 2008
Page views	21,355
Favorites	151
Comments	20
Reviewer	Synesthesia
Approved on	May 14, 2008

Earth Day

Designer's Comments

Using This Layout

Update Friend ID

Layout Code

Layout Code

Layout Comments

Layout Details

Layout Colors

Layout Tags

Layout Tools

Layout Affiliates