Part 3: MySpace DIV overlay [Comments]
This is part three of a series aimed at providing the basic structure for a complete MySpace DIV [profile] overlay. If you are reading this series for the first time, I recommend a quick review of the previous portions of the series here: Part One: MySpace DIV overlay [The Base] and Part Two: MySpace DIV overlay [Navbar / Content].
My goal is provide the bare bones structure for a complete overlay. Once the framework of the profile is in place, the idea is for each user to utilize basic CSS to style and tweak each profile to suit their own tastes and personality.
As popular as the MySpace comment have become, I’ve become increasingly tiresome of their implementation. For that reason, I’ve decided that best way to work with the comments field is to hide them completely from the main profile. Your comments will still be available for viewing on a seperate page outside of your profile.
This portion of the series addresses the MySpace comments. More specifically, hiding the long winded list of comments [left by other users] and inserting a comment box. Before proceeding, you will need to make note of your unique FriendID. Identify your FriendID by viewing your own profile. Your unique ID will be displayed in your address bar. If you do not make note of your correct FriendID, your friends will be unable to leave any comments for you.
We are going to insert a comment box into the sidebar using the same code from Part Two: MySpace DIV overlay [Navbar / Content]. If you’ve been followed the series from Part 2, replace the existing <div class=”sidebar”> section with the following. Make sure to paste your unique FriendID when needed:
<div class="sidebar">
<div class="commentbox">
<center>Add Comment / <a href="http://www.myspace.com/index.cfm?fuseaction=user.homeComments&friendID="InsertFRIENDID">View All</a><br />
<form method="post"
action="http://comments.myspace.com/index.cfm?fuseaction=user.ConfirmComment">
<input type="hidden" name="friendID" value="InsertFRIENDID">
<textarea name="f_comments" cols="25" rows="5"></textarea><br />
<input type="submit" value="Post">
</form>
</center>
</div>
<br />
YOUR SIDEBAR CONTENT
</div>In order to hide your existing comments from the bottom of your page, drop the following code to the end of your ‘I’d Like to Meet’ section:
<div style="position: relative;
height: 400px;
overflow: hidden;
border: 0px;">
<table><tr><td><table><tr><td>
Users wishing to add a little style to their comment boxes can do so using CSS. In order to stylize the post comment button, add the following within your <style> tags in the ‘About Me’ portion of your profile [edit as needed]:
input{
color:d6d3d3;
background-color:555555;
border:1px solid;
border-color:d6d3d3;
margin-left:6px;
margin-top:4px;
}
input:hover{
color:555555;
background-color:999999;
border:1px solid;
border-color:555555;
}
input:focus{
color:555555;
border:1px solid;
bord-color:555555;
}
As always, feel free to leave comments concerning any questions or requests. The basic MySpace div overlay that I have written the tutorial series for is available for download here.
