wordpress comments DIV customization

**rohitk89** · December 31st, 2004, 15:32 PM

can someone please help me customize this stubborn comments div in my wordpress layout?

http://rohitkumar.org/blog/index.php?p=28#comments

this is how the comments appear....i want to move the leave a comment heading to the left and wrap a 10 px margin around the whole div

index.php:

Code:

<?php 
/* Don't remove this line. */
require('./wp-blog-header.php');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head profile="http://gmpg.org/xfn/1">
	<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
	
	<meta http-equiv="Content-Type" content="text/html; charset=<?php bloginfo('charset'); ?>" />
	<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->

	<style type="text/css" media="screen">
		@import url( <?php echo get_settings('siteurl'); ?>/wp-layout.css );
	</style>
	
	<link rel="stylesheet" type="text/css" media="print" href="<?php echo get_settings('siteurl'); ?>/print.css" />
	<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
	<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
	<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
	
	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
    <?php wp_get_archives('type=monthly&format=link'); ?>
	<?php //comments_popup_script(); // off by default ?>
	<?php wp_head(); ?>
</head>

<body>
<div id="rap">
<h1 id="header"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>

<div id="content">
<?php if ($posts) : foreach ($posts as $post) : start_wp(); ?>

<?php the_date('','<h2>','</h2>'); ?>
	
<div class="post">
	 <h3 class="storytitle" id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link: <?php the_title(); ?>"><?php the_title(); ?></a></h3>
	<div class="meta"><?php _e("Filed under:"); ?> <?php the_category() ?> — <?php the_author() ?> @ <?php the_time() ?> <?php edit_post_link(); ?></div>
	
	<div class="storycontent">
		<?php the_content(); ?>
	</div>
	
	<div class="feedback">
            <?php wp_link_pages(); ?>
            <?php comments_popup_link(__('Comments (0)'), __('Comments (1)'), __('Comments (%)')); ?>
	</div>
	
	<!--
	<?php trackback_rdf(); ?>
	-->

<?php include(ABSPATH . 'wp-comments.php'); ?>
</div>

<?php endforeach; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
</div>



<div id="menu">

<ul>
	<?php get_links_list(); ?>
 <li id="categories"><?php _e('Categories:'); ?>
	<ul>
	<?php wp_list_cats(); ?>
	</ul>
 </li>
 <li id="search">
   <label for="s"><?php _e('Search:'); ?></label>	
   <form id="searchform" method="get" action="<?php echo $PHP_SELF; ?>">
	<div>
		<input type="text" name="s" id="s" size="15" /><br />
		<input type="submit" name="submit" value="<?php _e('Search'); ?>" />
	</div>
	</form>
 </li>
 <li id="archives"><?php _e('Archives:'); ?>
 	<ul>
	 <?php wp_get_archives('type=monthly'); ?>
 	</ul>
 </li>
 <li id="calendar">
	<?php get_calendar(); ?>
 </li>
 <li id="other"><?php _e('Other:'); ?>
	<ul>
		<li><a href="<?php echo get_settings('siteurl'); ?>/wp-login.php"><?php _e('Login'); ?></a></li>
		<li><a href="<?php echo get_settings('siteurl'); ?>/wp-register.php"><?php _e('Register'); ?></a></li>
	</ul>
 </li>
 <li id="meta"><?php _e('Meta:'); ?>
 	<ul>
		<li><a href="<?php bloginfo('rss2_url'); ?>" title="<?php _e('Syndicate this site using RSS'); ?>"><?php _e('<abbr title="Really Simple Syndication">RSS</abbr> 2.0'); ?></a></li>
		<li><a href="<?php bloginfo('comments_rss2_url'); ?>" title="<?php _e('The latest comments to all posts in RSS'); ?>"><?php _e('Comments <abbr title="Really Simple Syndication">RSS</abbr> 2.0'); ?></a></li>
		<li><a href="http://validator.w3.org/check/referer" title="<?php _e('This page validates as XHTML 1.0 Transitional'); ?>"><?php _e('Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr>'); ?></a></li>
		<li><a href="http://wordpress.org/" title="<?php _e('Powered by WordPress; state-of-the-art semantic personal publishing platform.'); ?>">WP</a></li>
	</ul>
 </li>

</ul>

</div>

</div>

<p class="credit"><!--<?php echo $wpdb->num_queries; ?> queries. <?php timer_stop(1); ?> seconds. --> <cite><?php echo sprintf(__("Powered by <a href='http://wordpress.org' title='%s'><strong>WordPress</strong></a>"), __("Powered by WordPress, state-of-the-art semantic personal publishing platform")); ?></cite></p>
</body>
</html>

css layout:

Code:

/*
    VerySimple - Style for Wordpress
    by Gary Rogers ([email protected])
    
    Licensed under the Creative Commons License
    (http://creativecommons.org/licenses/by/2.0/)
    
    ** NOTE **
    Not all Styles are used here, but they all exist in Alex's sample
    page, so they remain for reference.
*/

body {
    margin: 0px;
    padding: 0px;
    font-family: 'Georgia';
    font-size: 12pt;
}

blockquote {
    margin-left: 20px;
    color: #000;
}

a img {
    border: none;
}

code {
    font-family: Monaco, 'Courier New', Courier, monospace;
    font-size: 10pt;
    color: #000;
}

h2 {
    font-size: 12pt;
    margin-top: 10px;
    color: #000;
    text-align: right;
}

#rap {
    width: 900px;
    margin-left: 25px;
    margin-right: 25px;
}

#header {
    font-size: 36pt;
    font-weight: bold;
    text-align: center;
    margin-bottom: 40px;
}

#header a {
    text-decoration: none;
    color: #000;
}

#header a:hover {
 text-decoration: underline;
}

#content {
    width: 750px;
}

.post {
    border: 1px solid #000;
    margin: 25px;

}

.storytitle {
    font-size: normal;
    font-weight: bold;
    margin-left: 10px;
    margin-bottom: 2px;
}

.storytitle a {
    text-decoration: none;
    color: #000;
}

.meta {
    font-size: x-small;
    margin: 0px;
    padding-left: 10px;
    margin-bottom: 2px;
}

.meta ul {
    display: inline;
    list-style: none;
    margin: 0px;
    padding: 0px;
}

.meta li {
    display: inline;
}

.post-categories {
    font-style: normal;
}

.storycontent {
    margin: 10px

}

.storycontent img {
    margin-right: 15px;
}

.feedback {
    font-size: normal;
    text-align: right;
    padding-right: 10px;
    margin-bottom: 20px;
}

#commentform input, #commentform textarea {
 background: #fff; 
 border: 1px solid #000; 
 margin: 10px;
}

.postcomment {
 text-align: left;
 margin: 10px;
}

#commentform textarea {
 width: 90%; 
 margin: 10px;
}
 
ol#comments li p {
 font-size: 100%;
 margin: 10px;
}

.credit {
    width: 700px;
    margin-left: auto;
    margin-right: auto;
    font-size: x-small;
    text-align: center;
    padding-top: 10px;
}

#menu {
    position: absolute;
    top: 121px;
    margin-left: 780px;   
    font-size: normal; 
    width: 175px;
}

#menu a img {
    padding: 3px;
}

#menu ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}

#menu ul li {
    font-weight: bold;
    margin-top: 10px;
}

#menu ul li p {
    font-weight: normal;
}

#menu ul li ul {
    font-weight: normal;
    margin-top: 4px;
    margin-left: 0px;
    padding-left: 10px;
}

#menu ul li ul li {
    text-indent: 0px;
    font-weight: normal;
    padding: 0px;
    margin: 0px;
    margin-top: 0px;
}

#wordpress {
    font-style: normal;
}

#categories {

}

#search {

}

#archives {

}

#calendar {
    font-weight: bold;
    text-align: left;
}

#wp-calendar {
    font-weight: normal;
    padding-left: 10px
}

#wp-calendar caption {
 color: #000;
 font-size: normal;
 font-weight: bold;
 text-align: left;

}

#prev {

}

#pad {

}

#today {
    background: #CCC;
}

#other {

}

#style {

}

**Reverend** · December 31st, 2004, 18:07 PM

To move "Leave a comment" to the left:

Change this:

Code:

<h2 id="postcomment">Leave a comment</h2>

To this:

Code:

<h2 id="postcomment" style="text-align: left">Leave a comment</h2>

Try one of these 3 options for the margin in css:

Change:

Code:

h2 {
    font-size: 12pt;
    margin-top: 10px;
    color: #000;
    text-align: right;
}

To:

Code:

h2 {
    font-size: 12pt;
    margin: 10px;
    color: #000;
    text-align: right;
}

Or:

Code:

h2 {
    font-size: 12pt;
    margin: 10px 10px 10px 10px;
    color: #000;
    text-align: right;
}

Or you may have to align each side like this:

Code:

h2 {
    font-size: 12pt;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
    margin-right: 10px;
    color: #000;
    text-align: right;
}

**Reverend** · January 3rd, 2005, 14:22 PM

So did my suggestions work ???

**rohitk89** · January 3rd, 2005, 15:33 PM

thanks a heap rev...ill try them tomorrow morning and tell you...(9.00 pm IST currently)

**rohitk89** · January 4th, 2005, 03:41 AM

ive tried..still doesnt work...i dunno abt adding a html tag in a .css file...can u please recheck?

also can u please view the page in ie and tell me if u see any scrollbars...?

**Reverend** · January 4th, 2005, 11:14 AM

Originally Posted by rohitkumar

i dunno abt adding a html tag in a .css file...can u please recheck?

also can u please view the page in ie and tell me if u see any scrollbars...?

The left aligh should work if you put it in your index.php (not css)

Change this:

Code:

<h2 id="postcomment">Leave a comment</h2>

To this:

Code:

<h2 id="postcomment" style="text-align: left">Leave a comment</h2>

Yes there are scrollbars in the "Your Comments" panel depending on how many lines of text are input.

**rohitk89** · January 4th, 2005, 16:13 PM

oh silly me...i kept putting that tag in the .css file...

and thank you for checking the scroll bars thingy...as before i will implement the changes and tell you how it went tomorrow morning...

**rohitk89** · January 26th, 2005, 05:45 AM

okay..so i managed, with great difficulty, to get the leave your comment heading to be left aligned. the text align thingy u told me rev- it worked.

i still have a few more problems, and this is desperate plea to anyone who can help me

---

these are the things i want to modify (with reference to this page: http://rohitkumar.org/blog/index.php?p=29#comments):

1. the heading x comments (x is the no. of comments) nshould be aligned with the story content

2. "The URI to TrackBack this entry is: http://rohitkumar.org/blog/wp-trackback.php/29" - this piece of text has no margin

3. the comments have a larger margin than the story content margin, alignment issue once again.

4. this piece of text: "RSS feed for comments on this post." is unaligned.

5. the "leave a comment" heading is not aligned

6. "Line and paragraph breaks automatic, e-mail address never displayed, HTML allowed: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>"- no margin again

7. the "Your Comment " heading for the comment input text field is still not aligned.

8. the title of the name. email and uri input fields are lower than the input fields.
---

if it helps i found this php file called wp-comments.php. here is the code:

Code:

<?php // Do not delete these lines
	if ('wp-comments.php' == basename($_SERVER['SCRIPT_FILENAME']))
		die ('Please do not load this page directly. Thanks!');
	$req = get_settings('require_name_email');
	if (($withcomments) or ($single)) {

        if (!empty($post->post_password)) { // if there's a password
            if ($_COOKIE['wp-postpass_'.$cookiehash] != $post->post_password) {  // and it doesn't match the cookie
?>
<p><?php _e("Enter your password to view comments."); ?><p>
<?php
				return;
            }
        }

 		$comment_author = (isset($_COOKIE['comment_author_'.$cookiehash])) ? trim($_COOKIE['comment_author_'.$cookiehash]) : '';
        $comment_author_email = (isset($_COOKIE['comment_author_email_'.$cookiehash])) ? trim($_COOKIE['comment_author_email_'.$cookiehash]) : '';
 		$comment_author_url = (isset($_COOKIE['comment_author_url_'.$cookiehash])) ? trim($_COOKIE['comment_author_url_'.$cookiehash]) : '';

        $comments = $wpdb->get_results("SELECT * FROM $tablecomments WHERE comment_post_ID = '$id' AND comment_approved = '1' ORDER BY comment_date");
?>

<!-- You can start editing here. -->

<h2 id="comments"><?php comments_number(__("Comments"), __("1 Comment"), __("% Comments")); ?> 
<?php if ('open' == $post->comment_status) { ?>
<a href="#postcomment" title="<?php _e("Leave a comment"); ?>">&raquo;</a>
<?php } ?>
</h2>
<?php if ('open' == $post->ping_status) { ?>
<p><?php _e("The <acronym title=\"Uniform Resource Identifier\">URI</acronym> to TrackBack this entry is:"); ?> <em><?php trackback_url() ?></em></p>
<?php } ?>


<?php if ($comments) { ?>
<ol id="commentlist">
<?php foreach ($comments as $comment) { ?>
	<li id="comment-<?php comment_ID() ?>">
	<?php comment_text() ?>
	<p><cite><?php comment_type(); ?> <?php _e("by"); ?> <?php comment_author_link() ?> — <?php comment_date() ?> @ <a href="#comment-<?php comment_ID() ?>"><?php comment_time() ?></a></cite> <?php edit_comment_link(__("Edit This"), ' |'); ?></p>
	</li>

<?php } // end for each comment ?>
</ol>
<?php } else { // this is displayed if there are no comments so far ?>
	<p><?php _e("No comments yet."); ?></p>
<?php } ?>
<p><?php comments_rss_link(__("<abbr title=\"Really Simple Syndication\">RSS</abbr> feed for comments on this post.")); ?></p>
<h2 id="postcomment"><?php _e("Leave a comment"); ?></h2>
<?php if ('open' == $post->comment_status) { ?>
<p><?php _e("Line and paragraph breaks automatic, e-mail address never displayed, <acronym title=\"Hypertext Markup Language\">HTML</acronym> allowed:"); ?> <code><?php echo allowed_tags(); ?></code></p>

<form action="<?php echo get_settings('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
	<p>
	  <input type="text" name="author" id="author" class="textarea" value="<?php echo $comment_author; ?>" size="28" tabindex="1" />
	   <label for="author"><?php _e("Name"); ?></label> <?php if ($req) _e('(required)'); ?>
	<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" />
	<input type="hidden" name="redirect_to" value="<?php echo htmlspecialchars($_SERVER["REQUEST_URI"]); ?>" />
	</p>

	<p>
	  <input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="28" tabindex="2" />
	   <label for="email"><?php _e("E-mail"); ?></label> <?php if ($req) _e('(required)'); ?>
	</p>

	<p>
	  <input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="28" tabindex="3" />
	   <label for="url"><?php _e("<acronym title=\"Uniform Resource Identifier\">URI</acronym>"); ?></label>
	</p>

	<p>
	  <label for="comment"><?php _e("Your Comment"); ?></label>
	<br />
	  <textarea name="comment" id="comment" cols="70" rows="4" tabindex="4"></textarea>
	</p>

	<p>
	  <input name="submit" type="submit" tabindex="5" value="<?php _e("Say It!"); ?>" />
	</p>
</form>
<?php } else { // comments are closed ?>
<p><?php _e("Sorry, the comment form is closed at this time."); ?></p>
<?php } ?>

<?php // if you delete this the sky will fall on your head
}
?>

**rohitk89** · February 1st, 2005, 06:37 AM

bump

**rohitk89** · February 1st, 2005, 09:54 AM

damn! i kept making a mistake in the tip u gave me rev...i didnt write: ' style="" ' i kept writing ' margin="" '

i did it correctly this time...and it worked.

from this day forth u shall be hailed as my tech king....we're not worthy..!!! we're not worthy...bow to the new king- King Reverend!!!

umm...i think i've made my point now...

**Reverend** · February 1st, 2005, 16:26 PM

looking at your page now,am i correct in assuming its just your comments section margin that needs fixing now?

**rohitk89** · February 2nd, 2005, 03:17 AM

yep.... its an ordered list in the comments i tried adding an ol#commentlist tag and modifyinh it...didint work..to double check i added a 100px margin so i cud see if nething was happening but nothin...so in the php code i added a negative margin to help wid the allignment...

**rohitk89** · February 9th, 2005, 11:14 AM

reverend,

cud please have a look at this page's comment list in ie6 and firefox both and tell me why they appear so different in the 2 browsers...?

**Reverend** · February 9th, 2005, 20:08 PM

You are probably using a tag that is not supported by all browsers.

BTW,why are you using a negative margin ?

Code:

<ol id="commentlist" style="margin: -6px">

try this:

Code:

<ol id="commentlist" style="margin: 10px">

**rohitk89** · February 10th, 2005, 05:43 AM

if i use a negative margin...it works good in mozilla but then the margins get screwed in ie...if i use a 10px margin..the commentlist appears indented in mozilla but perfect in ie...

i have not messed much wid da default wp .php files...just edited the wp-comments.php a bit to suit my needs...

wud u like me to show u the 2 files which fundamentally determine the way my layout looks?

Thread: wordpress comments DIV customization

Thread Tools

Display

wordpress comments DIV customization

Reverend!!! Save Meee!!!!

Bookmarks

Bookmarks

Posting Permissions