Lions, Tigers and Bears

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 friends section, replace the images with those of your friends.

NOTE: any extra tables, links, etc., that don't belong will not show up in your myspace profile; it's just a cB error. a cleaner preview can be found at fixtatik.com

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 fixtatik - http://fixtatik.com }

.profileInfo, .contactTable, .userProfileURL, .interestsAndDetails, .userProfileDetail, .userProfileNetworking, .userProfileSchool, .userProfileCompany, .extendedNetwork, .latestBlogEntry, .blurbs td.text, .orangetext15, .friendSpace, .friendsComments, table div, table div embed, table div object { display:none!important; }
div table div, table table div, table div div embed, table div div object { display:block!important; padding:0; }

.clearfix div { height:0; width:0; }
.clearfix { left:18px; position:relative; }
.profile, .profile div, .profile input, .clearfix select, .clearfix option, .clearfix ul { display:none!important; filter:alpha(opacity=0); -moz-opacity:0; opacity:0; }

table div div embed, table div div object { position:static; top:auto; left:auto; margin:auto; }
table, tr, td { background:none; padding:0; }

*, html, body { margin:0; padding:0; }

body { background:rgb(243,228,241) url(http://cbimg6.com/layouts/08/08/30946aa.gif) top center no-repeat; margin-top:10px; overflow-x:hidden; }

div, p, td, span, font, textarea, input { color:rgb(156,156,156); font:11px 'lucida sans unicode', tahoma, sans-serif; text-align:justify; }
.navigation-txt div, .navigation-txt p, .navigation-txt td, .navigation-txt span, .navigation-txt font, .navigation-txt textarea, .navigation-txt input,
.sidebar-txt div, .sidebar-txt p, .sidebar-txt td, .sidebar-txt span, .sidebar-txt font, .sidebar-txt textarea, .sidebar-txt input,
.footer span, .footer span a { font:normal 9px 'lucida sans unicode', tahoma, sans-serif; text-align:left; }
p { padding:5px 0; }
.content div h1 { font:italic 17px georgia, 'times new roman', serif; }
.navigation div h2, .sidebar div h2 { font:italic 12px georgia, 'times new roman', serif; }
a:link, a:visited { color:rgb(201,125,189); font:normal 11px 'lucida sans unicode', tahoma, sans-serif; text-decoration:none; }
a:active, a:hover { color:rgb(236,179,227); text-decoration:none; }

.default img { float:right; margin:0 0 0 10px; width:120px; }
a img, .main img { border:none; }

.ad { border:1px solid rgb(210,182,206); border-right-width:3px; border-bottom-width:3px; height:90px; left:50%; margin:9px 0 0 -365px; position:absolute; top:0; width:728px; }

.main { left:50%; margin:110px 0 0 -402px; padding:0 0 10px 0; position:absolute; top:0; width:804px; }

.content, .navigation { margin:0 10px 0 0; }

.content { background:rgb(255,255,255); float:left; border:1px solid rgb(210,182,206); border-right-width:3px; border-bottom-width:3px; width:450px; }
.content-txt { margin:10px; width:430px; }

.navigation, .sidebar { background:rgb(255,255,255); border:1px solid rgb(210,182,206); border-right-width:3px; border-bottom-width:3px; width:160px; }
.navigation-txt, .sidebar-txt { margin:10px; width:140px; }
.navigation { float:left; }
.sidebar { float:right; }

.navigation div ul { list-style:none; margin:5px 0; }
.navigation div ul li.first { border-top:1px solid rgb(210,182,206); }
.navigation div ul li { border-bottom:1px solid rgb(210,182,206); }
.navigation div ul li a { color:rgb(201,125,189); display:block; font:normal 9px 'lucida sans unicode', tahoma, sans-serif; padding:2px 6px; }
.navigation div ul li a:hover { background:rgb(250,224,246); }

.comment { margin:5px 0; }
.comment textarea, .comment input { background:rgb(255,255,255); border:1px solid rgb(210,182,206); font:normal 9px 'lucida sans unicode', tahoma, sans-serif; margin:1px 0; width:100%; }
.comment textarea { background:url(http://cbimg6.com/layouts/08/08/30946ab.png) no-repeat 3px 3px; }

.friends { margin:5px 0; }
.friends a img { margin:0; width:32px; }

.footer { float:left; padding:10px 0; text-align:left; width:450px; }

{ IE fixes }
.clearfix { _left:4px; }
.ad { _height:94px; _width:732px; }
.main { _margin:110px 0 0 -409px; _width:810px; }
</style>

Layout Code

Copy and paste to I'd Like to Meet

Help

<h1>About Me</h1>

<p><a class="default" href="http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendid=XXXXXXXX"><img src="http://cbimg6.com/layouts/08/08/30946ac.png" /></a>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ante dui, pharetra sed; vehicula et, aliquam sit amet, dui. Pellentesque aliquet velit in mi. Duis mattis metus vel ante. Nullam vestibulum. Aenean odio massa, tristique in, faucibus a, interdum id; quam. Maecenas libero nisl; fermentum non; rutrum vel, sollicitudin vel, mauris. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer ante dui, porttitor quis, iaculis et, facilisis sit amet, leo. Maecenas quam nisi, ullamcorper eget, fringilla ut, venenatis in, enim. Pellentesque est. Aenean mattis ipsum nec massa. Etiam velit velit, tempor vel, laoreet non; bibendum at; pede. Maecenas tempor tincidunt purus. Aliquam sed diam. Aenean laoreet malesuada sem.
</p>

<p>
Donec placerat mollis nisl. Praesent vitae nisl! Maecenas laoreet dui placerat nunc suscipit luctus! In id metus in odio lobortis pharetra. Aliquam sit amet velit. Pellentesque nec ligula ut diam rhoncus rhoncus. Aenean at risus sed elit egestas elementum! Donec feugiat posuere dui. Cras arcu. Cras massa justo, lacinia ac, consectetuer a, posuere at, erat. In non turpis. Proin vestibulum. Fusce consectetuer orci eu nunc. Ut nec lorem eu sapien bibendum sagittis. Morbi nec turpis. Duis tincidunt metus sed arcu. Pellentesque et quam eu mauris dignissim cursus. Morbi elementum augue sit amet erat. Nam auctor, orci sit amet ullamcorper ultricies, nisl ipsum porttitor eros; eget tincidunt dui est in eros!
</p>

<p>
Nam faucibus purus. Morbi eget augue sed magna lacinia scelerisque. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean ultricies mauris vitae pede. Sed est. Cras aliquet consectetuer erat! Phasellus luctus augue quis ipsum. Nam tincidunt tellus at magna. Curabitur neque nibh, sollicitudin blandit, rutrum sed, faucibus non, nibh. Cras quis erat eu risus vehicula sodales. Mauris fermentum. Vivamus nec nulla vel magna tristique porttitor! Phasellus placerat varius sapien. Nullam a sem. Donec porta egestas risus.
</p>

</div>
  </div>

<div class="navigation">
  <div class="navigation-txt">
    <h2>Navigation</h2>
    <ul>
      <li class="first"><a href="http://home.myspace.com/index.cfm?fuseaction=user">Home</a></li>
      <li><a href="http://collect.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendID=XXXXXXXX">Add to Friends</a></li>
      <li><a href="http://messaging.myspace.com/index.cfm?fuseaction=mail.message&friendID=XXXXXXXX">Send a Message</a></li>
      <li><a href="http://comment.myspace.com/index.cfm?fuseaction=user.viewProfile_commentForm&friendID=XXXXXXXX">Write a Comment</a></li>
      <li><a href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewAlbums&friendID=XXXXXXXX">View Pics</a></li>
      <li><a href="http://friends.myspace.com/index.cfm?fuseaction=user.viewfriends&friendID=XXXXXXXX">View All Friends</a></li>
      <li><a href="http://friends.myspace.com/index.cfm?fuseaction=block.blockUser&userID=XXXXXXXX">Block User</a></li>
    </ul>

<h2>Comments</h2>
    <div class="comment">
      <form method="post" action="http://comments.myspace.com/index.cfm?fuseaction=user.ConfirmComment">
        <input name="friendID" value="XXXXXXXX" type="hidden">
        <textarea class="cmt" cols="10" rows="3" name="f_comments"></textarea><br />
        <input class="cmt" type="submit" value="Send Love">
      </form>
    </div>

<h2>Friends</h2>
    <div class="friends">
      <a href="http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendid=XXXXXXXX">
      <img src="http://cbimg6.com/layouts/08/08/30946ad.png" /></a>
      <a href="http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendid=XXXXXXXX">
      <img src="http://cbimg6.com/layouts/08/08/30946ad.png" /></a>
      <a href="http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendid=XXXXXXXX">
      <img src="http://cbimg6.com/layouts/08/08/30946ad.png" /></a>
      <a href="http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendid=XXXXXXXX">
      <img src="http://cbimg6.com/layouts/08/08/30946ad.png" /></a>
    </div>
  </div>
  </div>

<h2>Interests</h2>

<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ante dui, pharetra sed; vehicula et, aliquam sit amet, dui. Pellentesque aliquet velit in mi. Duis mattis metus vel ante. Nullam vestibulum. Aenean odio massa, tristique in, faucibus a, interdum id; quam. Maecenas libero nisl; fermentum non; rutrum vel, sollicitudin vel, mauris. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer ante dui, porttitor quis, iaculis et, facilisis sit amet, leo. Maecenas quam nisi, ullamcorper eget, fringilla ut, venenatis in, enim. Pellentesque est. Aenean mattis ipsum nec massa. Etiam velit velit, tempor vel, laoreet non; bibendum at; pede. Maecenas tempor tincidunt purus. Aliquam sed diam. Aenean laoreet malesuada sem.
</p>

</div>
  </div>

<div class="footer">
  <span>
    © 2003-2008 Myspace.com.
    <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>
    <br />
    © 2008 Design by <a href="http://www.fixtatik.com">Fixtatik</a>.
  </span>
  </div>

</div>

Layout Comments

Showing latest 10 of 19 comments

I love this layout, i have one question, how do you put the pictures in?

By --Nikia-- on Jan 3, 2009 8:23 pm

This would make a great website template.

By jennurz on Sep 9, 2008 6:20 pm

Oh my.

By xFabby on Sep 4, 2008 7:01 am

I love this layout. My favorite by far. I hope you don't mind, but I rearranged the layout so Navigation is on the left side and the larger section is in the middle. I personally think it looks much better like that. =]

By Becaxx on Sep 4, 2008 6:51 am