5ThirtyOne

Derek Punsalan

Media Temple

Part 3: MySpace DIV overlay [Comments]

Please note that I no longer support custom MySpace overlays. Code examples are proof of concept. MySpace may have modified their layouts which may have had an impact on overlay code from this site.

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.

Syndicate

Subscribe via RSS or Email

Advertisements

9rules network

Categories

5THIRTYONE

Public projects

Select project

Something new

Fresh content

Show Latest

Easy thumbnails for The Unstandard (or any theme) One of the most requested features by The Unstandard WordPress theme users was a easier method for photo thumbnails on front pages. After exploring a few options including using the baked in ... Link