WP Grin Not Working In Comment

I’ll admit that I am code-illiterate before anyone start throwing their elite knowledge at me. ?? I read the instruction that came with the plugin, went to the author’s site, and did everything I think I could but the plugin still didn’t work in the comment section. It works in the admin section though.

At first the plugin didn’t work at all (neither admin nor comment). I noticed that the author said the comment field has to have the “comment” as the id, which I have no idea what that means. I noticed the id on the comment field is “comment_area” instead of “comment,” so I decided to change all the “comment” on the plugin’s php into “comment_area”, since the other way didn’t work. That somehow made the plugin work in the admin section.

Unfortunately, it wouldn’t work in the comment section. The smileys were displayed but displayed on the wrong place AND it’s not clickable or usable. On my friend’s blog, his list of comments is on the bottom left and his comment input field is on the bottom right. The smileys were showing on top of the list of comments instead of above the “textarea” where I inserted <?php wp_grins(); ?>

Here’s the part of the comment.php that I was playing with on my friend’s blog:

<div id="comment_area">

<?php if ('open' == $post->comment_status) : ?>

	<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="form_comments" class="prominent reduced"><div class="inner">

		<h2><?php _e("Write a Comment", 'gluedideas_subtle'); ?></h2>
		<?php _e("Take a moment to comment and tell us what you think.  Some basic HTML is allowed for formatting.", 'gluedideas_subtle'); ?>

<?php if ( get_option('comment_registration') && !$user_ID ) : ?>
		<?php _e("You must be logged in to post a comment.", 'gluedideas_subtle'); ?>  <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=<?php the_permalink(); ?>"><?php _e("Click here to login.", 'gluedideas_subtle'); ?></a>

<?php else : ?>

<?php if ( $user_ID ) : ?>

		<?php _e("Logged in as", 'gluedideas_subtle'); ?> <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. | <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?action=logout" title="Log out of this account"><?php _e("Click to log out", 'gluedideas_subtle'); ?></a>.

<?php else : ?>

		<input type="text" id="input_comments_name" name="author" value="<?php echo $comment_author; ?>" class="input standard" /> <label for="input_comments_name"><?php _e("Name", 'gluedideas_subtle'); ?> <?php if ($req) echo "(required)"; ?></label>

		<input type="text" id="input_comments_email" name="email" value="<?php echo $comment_author_email; ?>" class="input standard" /> <label for="input_comments_email"><?php _e("E-mail", 'gluedideas_subtle'); ?> <?php if ($req) echo "(required)"; ?></label>

		<input type="text" id="input_comments_url" name="url" value="<?php echo $comment_author_url; ?>" class="input standard" /> <label for="input_comments_url"><?php _e("Website", 'gluedideas_subtle'); ?></label>

<?php endif; ?>

		<input type="checkbox" id="input_allow_float" name="allow_float" value="true" /> <label for="input_allow_float"><?php _e("Allow comment box to float next to comments.", 'gluedideas_subtle'); ?></label>

		<textarea name="comment" id="input_comment" rows="10" cols="40" class="input textarea" ><?php _e("Type your comment here.", 'gluedideas_subtle'); ?></textarea>

		<input type="submit" id="input_comments_submit" name="submit" value="Submit Comment"/> <input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" />

<?php do_action('comment_form', $post->ID); ?>

<?php endif; ?>

	</div></form>

Please help me. Thank you.