Results 1 to 15 of 15

Thread: wordpress comments DIV customization

  1. #1
    Triple Platinum Member
    Join Date
    Aug 2004
    Posts
    883

    wordpress comments DIV customization

    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 (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 {
    
    }

  2. #2
    Head Honcho Administrator Reverend's Avatar
    Join Date
    Apr 2002
    Location
    England
    Posts
    14,044
    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;
    }

    =========== Please Read The Forum Rules ===========

  3. #3
    Head Honcho Administrator Reverend's Avatar
    Join Date
    Apr 2002
    Location
    England
    Posts
    14,044
    So did my suggestions work ???

    =========== Please Read The Forum Rules ===========

  4. #4
    Triple Platinum Member
    Join Date
    Aug 2004
    Posts
    883
    thanks a heap rev...ill try them tomorrow morning and tell you...(9.00 pm IST currently)
    Last edited by rohitk89; January 3rd, 2005 at 14:36 PM.

  5. #5
    Triple Platinum Member
    Join Date
    Aug 2004
    Posts
    883
    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...?

  6. #6
    Head Honcho Administrator Reverend's Avatar
    Join Date
    Apr 2002
    Location
    England
    Posts
    14,044
    Quote 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.

    =========== Please Read The Forum Rules ===========

  7. #7
    Triple Platinum Member
    Join Date
    Aug 2004
    Posts
    883
    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...

  8. #8
    Triple Platinum Member
    Join Date
    Aug 2004
    Posts
    883
    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
    }
    ?>

  9. #9
    Triple Platinum Member
    Join Date
    Aug 2004
    Posts
    883
    bump

  10. #10
    Triple Platinum Member
    Join Date
    Aug 2004
    Posts
    883
    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...

  11. #11
    Head Honcho Administrator Reverend's Avatar
    Join Date
    Apr 2002
    Location
    England
    Posts
    14,044
    looking at your page now,am i correct in assuming its just your comments section margin that needs fixing now?

    =========== Please Read The Forum Rules ===========

  12. #12
    Triple Platinum Member
    Join Date
    Aug 2004
    Posts
    883
    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...

  13. #13
    Triple Platinum Member
    Join Date
    Aug 2004
    Posts
    883

    Reverend!!! Save Meee!!!!

    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...?
    Last edited by rohitk89; February 9th, 2005 at 10:16 AM.

  14. #14
    Head Honcho Administrator Reverend's Avatar
    Join Date
    Apr 2002
    Location
    England
    Posts
    14,044
    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">

    =========== Please Read The Forum Rules ===========

  15. #15
    Triple Platinum Member
    Join Date
    Aug 2004
    Posts
    883
    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?

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •