Back to Forums








View Full Version : wordpress comments DIV customization


rohitk89
December 31st, 2004, 14: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:

<?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:

/*
VerySimple - Style for Wordpress
by Gary Rogers (gary.rogers@dmin.net)

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, 17:07 PM
To move "Leave a comment" to the left:

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

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

Change:

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

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

Or you may have to align each side like this:
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, 13:22 PM
So did my suggestions work ???

rohitk89
January 3rd, 2005, 14:33 PM
thanks a heap rev...ill try them tomorrow morning and tell you...(9.00 pm IST currently)

rohitk89
January 4th, 2005, 02: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, 10:14 AM
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: <h2 id="postcomment">Leave a comment</h2>
To this: <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, 15: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, 04: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 :D
---

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:

<?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, 05:37 AM
bump

rohitk89
February 1st, 2005, 08: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, 15: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, 02: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, 10:14 AM
reverend,

cud please have a look at this page's comment list (http://rohitkumar.org/blog/index.php?p=31#comments) in ie6 and firefox both and tell me why they appear so different in the 2 browsers...?

Reverend
February 9th, 2005, 19:08 PM
You are probably using a tag that is not supported by all browsers.

BTW,why are you using a negative margin ?

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

rohitk89
February 10th, 2005, 04: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?