5ThirtyOne Minimal Lime Overlay

Layout Notes

Instructions for getting this overlay up and running are quite simple: 1. Delete any old code from your profile (About Me & I'd like to meet). 2. Beginning at line 64 under MySpace (links), edit in your friendID in order to allow users to invite or message you. 3. Look at line 24 where the Comment Well starts and replace the 15701238 under "value" with your own unique FriendID. Check your profile URL when viewing your own profile. The ID can be found immediately after the "friendid=". 4. Manually edit the friends list starting at line 34 with their respective profile URLs and link names. 5. I ask that my referral links under "TryIt" & the links under Disclaimer remain intact. We wouldn't want people to get confused as to where they could download a copy of the overlay now would we? 6. Have fun. extra: replace the header image with your own 428px x 99px image. Any height image will work as long as the width remains less than or equal to 428px.

Copy and paste to About me.

<a href="http://www.divoverlay.com/" target="_blank"><img
src="http://www.divoverlay.com/img/button.gif" alt="Myspace Codes" style="position:absolute; left:0px;
top: 0px;" border="0"></a><style type="text/css">
.overlay_by_5thirtyone {
	5thirtyone.com
	email: derek@5thirtyone.com
	ask_first
}

body{
	background-color: FFFFFF;
}

table, td {
	background-color: FFFFFF;
}

.main {
	position: absolute;
	left: 50%;
	top: 125px;
	width: 1024px;
	z-index: 1;
	margin-left: -512px;
}
	
.overlay_wrapper {
	text-align: center;
	font-family: helvetica, verdana, arial, sans-serif;
	font-size: 11px;
	line-height: 1.5em !important;
	margin-top: 5em;
}

h2 {
	font-family: arial, sans-serif;
	color: ABC970;
	font-size: 15px;
	font-weight: bold;
	text-transform: lowercase;
	letter-spacing: -1px;
}

h2 span {
	color: acacac;
}

.overlay_wrapper p {
	color: 575757;
}

.overlay_wrapper p a {
	text-decoration: none;
	font-weight: normal;
	color: ABC970;
	border-bottom: 1px solid;
	border-color: DDEDBF;
}

.overlay_wrapper p a:hover {
	background-color: F4FFD6;
}

.content_container {
	margin: 0 auto 0;
	text-align: left;
	width: 800px;
}

.content_left {
	font-size: 1.1em;
	width: 430px;
	float: left;
}

.middle_links {
	float: left;
	margin-top: 5.5em;
	margin-left: 55px;
	width: 100px;
}

.middle_links ul {
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid;
	border-color: DDEDBF;
	border-width: 1px 0 0 0;
}

.middle_links li {
	width: 100px;
	display: block;
}

.middle_links li a:link, .middle_links li a:visited,
.middle_links li a:active {
	display: block;
	width: 97px;
	padding-left: 3px;
	font-weight: normal;
	color: ABC970;
	text-decoration: none;
	border: 1px solid;
	border-color: DDEDBF;
	border-width: 0 0 1px 0;
}

.middle_links li a:hover {
	text-decoration: none;
	color: ABC970;
	display: block;
	width: 97px;
	background-color: EFF6E1;
}

textarea {
	color: 575757;
	width: 425px;
	height: 125px;
	padding: 3px !important;
	background-color: E7F1D3;
	border: 1px solid;
	border-color: ABC970;
	overflow: auto;
}
	
.clear {
	clear: both;
}
</style>

Copy and paste to I'd Like to Meet.

<div class="content_left">
			<p align="center"><img src="http://aycu02.webshots.com/image/521/1632906867895103953_rs.jpg" alt="about_banner" /></p>
			<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>

<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. <a href="http://5thirtyone.com/colophon/" title="Visit 5ThirtyOne">5ThirtyOne</a>.</p>

<br />

<h2>Comment<span>Well</span></h2>
			<form method="post"
action="http://comments.myspace.com/index.cfm?fuseaction=user.ConfirmComment">
				<input type="hidden" name="friendID" value="15701238">
				<textarea name="f_comments" class="comment_textarea" cols="25" rows="8"></textarea>
				<p><input type="image" src="http://aycu18.webshots.com/image/737/1799309538257637084_rs.jpg" alt="Login" value="Post" /></p>
				<p>Leave a comment or <a href="http://comments.myspace.com/index.cfm?fuseaction=user.homeComments&friendID=15701238" title="View comment archive">View All</a></p>
			</form>
		</div>

<div class="middle_links">
		<h2>Friends</h2>
			<ul>
				<li><a href="http://#">Friends</a></li>
				<li><a href="http://#">Are</a></li>
				<li><a href="http://#">Good</a></li>
				<li><a href="http://#">To</a></li>
				<li><a href="http://#">Have</a></li>
				<li><a href="http://#">Am</a></li>
				<li><a href="http://#">I</a></li>
				<li><a href="http://#">Right?</a></li>
			</ul>

<h2>My<span>Links</span></h2>
			<ul>
				<li><a href="http://5thirtyone.com">5ThirtyOne</a></li>
				<li><a href="http://uneasysilence.com">UNEASYsilence</a></li>
				<li><a href="http://flickr.com/photos/0401">Flickr</a></li>
				<li><a href="http://del.icio.us/unfortunate">Del.icio.us</a></li>
				<li><a href="http://www.linkedin.com/in/derekpunsalan">LinkedIn</a></li>
			</ul>

<h2>Try<span>It</span></h2>
			<ul>
                <li><a href="http://www.25peeps.com/r/1292" title="25 yearning for attention">25peeps</a></li>
				<li><a href="http://5thirtyone.com/go/threadless/" title="Snag some new threads">Threadless</a></li>
				<li><a href="http://5thirtyone.com/go/jot/" title="Collaborative Wiki">JotSpot</a></li>
				<li><a href="http://5thirtyone.com/go/box/" title="Box.net online storage">Box Storage</a></li>
			</ul>
		</div>

<div class="middle_links">
		<h2>My<span>Space</span></h2>
			<ul>
			    <li><a href="http://mail.myspace.com/index.cfm?fuseaction=mail.message&friendID=INSERT_FRIENDID">Message</a></li>
			    <li><a href="http://collect.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendID=INSERT_FRIENDID">Add Me</a></li>
				<li><a href="http://home.myspace.com/index.cfm?fuseaction=user">Home</a></li>
				<li><a href="http://browseusers.myspace.com/browse/browse.aspx?">Browse</a></li>
				<li><a href="http://search.myspace.com/index.cfm?fuseaction=find">Search</a></li>
				<li><a href="http://invite.myspace.com/index.cfm?fuseaction=invite">Invite</a></li>
				<li><a href="http://www.myspace.com/index.cfm?fuseaction=film">Film</a></li>
				<li><a href="http://mail.myspace.com/index.cfm?fuseaction=mail.inbox">Mail</a></li>
				<li><a href="http://5thirtyone.com/">Blog</a></li>
				<li><a href="http://favorites.myspace.com/index.cfm?fuseaction=user.favorites">Favorites</a></li>
				<li><a href="http://forum.myspace.com/index.cfm?fuseaction=messageboard.categories">Forum</a></li>
				<li><a href="http://groups.myspace.com/index.cfm?fuseaction=groups.categories">Groups</a></li>
				<li><a href="http://events.myspace.com/index.cfm?fuseaction=events">Events</a></li>
				<li><a href="http://vids.myspace.com/index.cfm?fuseaction=vids.home">Videos</a></li>
				<li><a href="http://music.myspace.com/index.cfm?fuseaction=music">Music</a></li>
				<li><a href="http://classifieds.myspace.com/index.cfm?fuseaction=classifieds">Classifieds</a></li>
			</ul>

<h2>Disclaimer</h2>
				<ul>
					<li><a href="http://getfirefox.com" title="Browse with Firefox">Best viewed in</a></li>
					<li><a href="http://5thirtyone.com/archives/376" title="Read the directions">Make your own</a></li>
					<li><a href="http://5thirtyone.com/colophon/" title="About me">By: 5ThirtyOne</a></li>
				</ul>
		</div>

</td></tr></table></div>
<div style="position: relative;
	height: 400px;
	overflow: hidden;
	border: 0px;">
<table><tr><td><table><tr><td>

Pages

Sponsor

Partners

5ThirtyOne Minimal Lime Overlay

Layout Notes

MORE FUN STUFF

Latest Layouts