Crotian Waterfalls

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. in the bio section (status, orientation, etc.) you may add your own fields. to do so, add in the following code underneath the last one:

<tr><td class=\"left\" valign=\"top\">Title:</td><td>Content</td></tr>

4. in the friends section, replace the images with those of your friends.

credits
- background image provided by andris krovacs.

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 { position:absolute; top:0; left:50%; margin:130px 0 0 -147px; }
table div div embed { position:relative; top:auto; left:auto; margin:auto; }
table, tr, td { background:none; padding:0; }
a { font-weight:normal!important; text-decoration:underline!important; color:ff6600!important; }
a:hover { color:ffffff!important; text-decoration:none!important; }
a img { border:none; }
td, p, a, span, div { font-family:arial; color:ffffff; font-size:11px; }
p, td { line-height:13px; }
h1, h2, h3 { font-weight:bold; color:ff6600; display:block; }
h1 { font-size:15px; margin-bottom:-2px; }
h2, h3 { font-size:12px; }

body { background-color:222222; background-image:url(http://cbimg9.com/layouts/08/05/27595aa.jpg); background-position:top center; background-repeat:no-repeat; background-attachment:scroll; margin-bottom:100px; }

.main { width:600px; position:absolute; top:0; left:50%; margin:160px 0 0 -300px; }
.picture { width:114px; height:114x; border-color:ff6600; border-style:solid; border-width:4px; float:left; overflow:hidden; }
.info { width:477px; height:122px; background:url(http://cbimg9.com/layouts/08/05/27595ab.png); float:right; margin-left:1px; overflow:hidden; }
  .infotext { width:457px; height:112px; margin:5px; }
  div.details, div.bio { width:210px; margin:5px; float:left; }
  td.left { width:75px; }
.bordertop { width:600px; height:4px; background-image:url(http://cbimg9.com/layouts/08/05/27595ac.png); background-repeat:no-repeat; background-position:top left; margin-top:5px; _margin-bottom:-10px; float:left; }
.navigation { width:600px; float:left; clear:both; }
  .navigation a { width:580px; _width:600px; background:url(http://cbimg9.com/layouts/08/05/27595ab.png); margin-bottom:1px; padding:3px 0 3px 20px; font-family:small fonts; text-transform:uppercase; color:ffffff!important; font-size:7px; line-height:9px; text-decoration:none!important; display:block; letter-spacing:2px; }
  .navigation a:hover { background-color:121212; color:ff6600!important; }
.content, .interests, .friends { width:600px; float:left; background:url(http://cbimg9.com/layouts/08/05/27595ab.png); padding-bottom:10px; }
  .contenttext, .intereststext, .friendstext { width:580px; margin:10px; }
  .intereststext { margin:5px; }
  div.music, div.movies, div.television, div.sports, div.books, div.heroes { width:86px; margin:5px; float:left; overflow-x:hidden; padding-bottom:5px; }
.friendstext img { border-color:ff6600; border-style:solid; border-width:1px; }
.friendstext img:hover { border-color:ffffff; }
.footer { width:600px; float:left; margin:5px; }
.footer p, .footer a, .footer a:hover { color:444444!important; }
</style>

Layout Code

Copy and paste to I'd Like to Meet

Help

<div class="main">
  <div class="picture">
    <a href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewAlbums&friendID=XXXXXXXX">
    <img border="0" alt="" src="http://a187.ac-images.myspacecdn.com/images01/28/m_b21818fb15bd982bca4b3817c146e83a.gif" width="114" /></a>
  </div>
  <div class="info">
    <div class="infotext">
      <div class="details">
<table cellpadding="0" cellspacing="0">
<tr><td colspan="2"><h1>NAME</h1></td></tr>
<tr><td colspan="2"><h2>"HEADLINE / QUOTE"</h2></td></tr>
<tr><td class="left" valign="top">Gender:</td><td>GENDER</td></tr>
<tr><td class="left" valign="top">Age:</td><td>AGE</td></tr>
<tr><td class="left" valign="top">Location:</td><td><span>CITY</span>, STATE<br />COUNTRY</td></tr>
</table>
      </div>
      <div class="bio">
<table cellpadding="0" cellspacing="0">
<tr><td class="left" valign="top">Status:</td><td>STATUS</td></tr>
<tr><td class="left" valign="top">Orientation:</td><td>ORIENTATION</td></tr>
<tr><td class="left" valign="top">Body type:</td><td>BODY TYPE</td></tr>
<tr><td class="left" valign="top">Ethnicity:</td><td>ETHNICITY</td></tr>
<tr><td class="left" valign="top">Smoke / Drink:</td><td>SMOKE / DRINK</td></tr>
</table>
      </div>
    </div>
  </div>
  <div class="bordertop"></div>
  <div class="navigation">
    <a href="http://home.myspace.com/index.cfm?fuseaction=user">home</a>
    <a href="http://messaging.myspace.com/index.cfm?fuseaction=mail.message&friendID=XXXXXXXX">message</a>
    <a href="http://collect.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendID=XXXXXXXX">add</a>
    <a href="http://comment.myspace.com/index.cfm?fuseaction=user.viewProfile_commentForm&friendID=XXXXXXXX">comment</a>
    <a href="http://friends.myspace.com/index.cfm?fuseaction=block.blockUser&userID=XXXXXXXX">block</a>
  </div>
  <div class="bordertop"></div>
  <div class="content">
    <div class="contenttext">
<h3>about me</h3>
<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>
</span>
    </div>
  </div>
  <div class="bordertop"></div>
  <div class="interests">
    <div class="intereststext">
      <div class="music">
<h3>music</h3>
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.
      </div>
      <div class="movies">
<h3>movies</h3>
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.
      </div>
      <div class="television">
<h3>television</h3>
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.
      </div>
      <div class="sports">
<h3>sports</h3>
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.
      </div>
      <div class="books">
<h3>books</h3>
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.
      </div>
      <div class="heroes">
<h3>heroes</h3>
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.
      </div>
    </div>
  </div>
  <div class="bordertop"></div>
  <div class="friends">
    <div class="friendstext">
<h3>friends</h3>
<a href="http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendid=XXXXXXXX">
<img src="http://a187.ac-images.myspacecdn.com/images01/28/m_b21818fb15bd982bca4b3817c146e83a.gif" alt="" /></a>

<a href="http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendid=XXXXXXXX">
<img src="http://a187.ac-images.myspacecdn.com/images01/28/m_b21818fb15bd982bca4b3817c146e83a.gif" alt="" /></a>
<br />
<p align="right"><a href="http://friends.myspace.com/index.cfm?fuseaction=user.viewfriends&friendID=XXXXXXXX">view all</a></p>
    </div>
  </div>
  <div class="footer">
<p>© 2008 <a href="http://fixtatik.com">fixtatik</a>. background provided by <a href="http://shine.uw.hu">andris krovács</a>.<br />
© 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 25 comments

lol, this highly resembles Myspace 2.0, and it was created before Myspace released their new version. Good job, you inspired them ;]

By lesterkyle on Feb 13, 2009 12:23 am

Didn't you mean 'Croatian'.
I LOVE the layout, but I think the orange is rather out there and out of place.

By dilligrout on Oct 24, 2008 2:33 am

This layout is so cool =] But i am having trouble trying to change my picture..i was able to do it last time, but now that i'm trying to change it again, it won't show the whole picture and it enlarges it even when it's super tiny. help me please??

By AlexisTia on Aug 21, 2008 2:11 pm

It is a beautiful layout but the darned tables aren't transparent in IE.
ugh... I wanted to use this!

By crema509 on Jun 24, 2008 5:25 pm

Gorgeous Layout!! Nice job.

By emt40ish on May 25, 2008 3:25 pm

I love the whole layout the orange really adds something to this blissful image you set up I think its hot an you should make more.. I love it so so so much!

By PVT-Stone on May 20, 2008 7:12 pm

this is great! though im not sure the orange highlights go best with the grren nature background

By crimsonsorrow on May 16, 2008 6:30 pm

I really like the tables...nice organization.

By jesusisthebestthing on May 15, 2008 8:37 pm

SkeleBoy - you're probably using a version of internet explorer earlier than 7. ie 6 and sooner won't display transparencies without adding in a fix that myspace doesn't support. i'd suggest updating your browser to version 7, or switching to an open source browser (like firefox, opera, or safari).

By fixtatik on May 15, 2008 6:56 pm

It looks just like the preview from when I applied it to my MySpace. I see nothing wrong with it.

By CreativeArticulate on May 15, 2008 6:23 pm

View all »

Layout Details

Designer	fixtatik
Submitted on	May 13, 2008
Page views	23,474
Favorites	163
Comments	25
Reviewer	highwayto4355
Approved on	May 13, 2008

Crotian Waterfalls

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