Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    New Coder
    Join Date
    Oct 2007
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question about CSS/HTML and adding a Digg button

    This is for a Wordpress blog. What I want to do is make the small Digg badge appear to the right of the "Comments" link beneath each post (the link is on the left), on the same line. I can't figure out how to do this!

    I have the following code to add to the index.php file to make the Digg compact button show up:

    Code:
    <div class="diggit"><script type="text/javascript">
    digg_url = '<?php the_permalink() ?>';
    digg_title = '<?php the_title(); ?>';
    digg_skin = 'compact';
    </script>
    <script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script></div>
    Here is the code for the index.php file:

    PHP Code:
    <?php get_header(); ?>

        <div id="content_box">
        
            <div id="content">

            <?php if (have_posts()) : ?>
                
                <?php while (have_posts()) : the_post(); ?>
                
                <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
                <p class="post_date">Posted <?php the_time('F jS, Y'?> to <?php the_category(', '?></p>
                <div class="entry">

                    <?php the_content("Continue reading &rarr;"); ?>
                </div>
                <p class="post_meta"><span class="add_comment"><?php comments_popup_link('No Comments''1 Comment''% Comments'); ?></span></p>
                
                <?php endwhile; ?>
                
                <?php include (TEMPLATEPATH '/navigation.php'); ?>
                
            <?php else : ?>
        
                <h2>If you're seeing this, it's time to go slap somebody.</h2>
                <p class="post_date">* * *</p>
                <div class="entry">
                    <p>Sorry, but you are looking for something that isn't here.</p>
                    <?php include (TEMPLATEPATH "/searchform.php"); ?>
                </div>
        
            <?php endif; ?>
            
            </div>

            <?php get_sidebar(); ?>
        
        </div>

    <?php get_footer(); ?>
    And finally here's the CSS I have to style the badge:

    Code:
    .entry .diggit {
    float: left;
    padding: 10px 10px 10px 0px;
    }
    The website is at http://goblinsatemyblog.com (still under construction). Right now the badge is within the post, but I'm hoping to have it positioned on the same line as the "Comments" link beneath the post, to the right.

    Please help!

  • #2
    Regular Coder
    Join Date
    Jun 2004
    Posts
    495
    Thanks
    0
    Thanked 82 Times in 80 Posts
    Try here:
    Code:
    <p class="post_meta"><span class="add_comment"><?php comments_popup_link('No Comments', '1 Comment', '% Comments'); ?></span><div class="diggit"></div></p>
    and float:right;

  • #3
    New Coder
    Join Date
    Oct 2007
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you for the reply!

    What exactly would you add between those div tags?

  • #4
    Regular Coder
    Join Date
    Jun 2004
    Posts
    495
    Thanks
    0
    Thanked 82 Times in 80 Posts
    Whatever you now use for the button

  • #5
    New Coder
    Join Date
    Oct 2007
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I added the button code between the divs and it places the button below the comments line, right above the next post. That's the problem really. I can get it to show up, but I can't seem to place it correctly.

  • #6
    Regular Coder
    Join Date
    Jun 2004
    Posts
    495
    Thanks
    0
    Thanked 82 Times in 80 Posts
    You've placed the div after the closing p tag. See the code I gave.

  • #7
    New Coder
    Join Date
    Oct 2007
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Fang View Post
    You've placed the div after the closing p tag. See the code I gave.
    Hey Fang, thanks for the help. I've modified the code exactly as you suggested. You can check the site online right now. The Digg badge is on the correct side, but it's positioned down right above the next post, instead of on the same line as the "comments" link. Do you know how I'd move it to the same line?

    Thanks so much.
    David

  • #8
    Regular Coder
    Join Date
    Jun 2004
    Posts
    495
    Thanks
    0
    Thanked 82 Times in 80 Posts
    If you make the div a span it will line up correctly.

  • #9
    New Coder
    Join Date
    Oct 2007
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Fang View Post
    If you make the div a span it will line up correctly.
    Thanks Fang! It's a lot better, though it's still about a line down from being even with the Comments link, as you can see on the blog now. How would I line it up?

    Please forgive my newbieness I've just started toying with this stuff.

    Thanks again,
    David

  • #10
    Regular Coder
    Join Date
    Jun 2004
    Posts
    495
    Thanks
    0
    Thanked 82 Times in 80 Posts
    Have the 2 styles been added?
    Code:
                <p class="post_meta"><span class="add_comment" style="float:left;"><a href="http://goblinsatemyblog.com/2007/10/13/puppy-training-class-3-complete/#respond" title="Comment on Puppy training class #3 complete.">No Comments</a></span>
    			
    			<span class="diggit" style="float:right;"><script type="text/javascript">
    digg_url = 'http://goblinsatemyblog.com/2007/10/13/puppy-training-class-3-complete/';
    digg_title = 'Puppy training class #3 complete.';
    digg_skin = 'compact';
    </script>
    <script src="Blog_files/diggthis_004.htm" type="text/javascript"></script>
    <iframe src="Blog_files/diggthis.htm" frameborder="0" height="18" scrolling="no" width="120"></iframe></span>
    		</p>

  • #11
    New Coder
    Join Date
    Oct 2007
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Fang View Post
    Have the 2 styles been added?
    Code:
                <p class="post_meta"><span class="add_comment" style="float:left;"><a href="http://goblinsatemyblog.com/2007/10/13/puppy-training-class-3-complete/#respond" title="Comment on Puppy training class #3 complete.">No Comments</a></span>
    			
    			<span class="diggit" style="float:right;"><script type="text/javascript">
    digg_url = 'http://goblinsatemyblog.com/2007/10/13/puppy-training-class-3-complete/';
    digg_title = 'Puppy training class #3 complete.';
    digg_skin = 'compact';
    </script>
    <script src="Blog_files/diggthis_004.htm" type="text/javascript"></script>
    <iframe src="Blog_files/diggthis.htm" frameborder="0" height="18" scrolling="no" width="120"></iframe></span>
    		</p>
    Nice! That places the Digg badge on the correct line! One little problem, however, is that the icon infront of the "comments" link is now cut off on the bottom by a few pixels. Could that be corrected?

  • #12
    Regular Coder
    Join Date
    Jun 2004
    Posts
    495
    Thanks
    0
    Thanked 82 Times in 80 Posts
    Code:
    <p class="post_meta" style="overflow:hidden;">

  • #13
    New Coder
    Join Date
    Oct 2007
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Fang View Post
    Code:
    <p class="post_meta" style="overflow:hidden;">
    Added as instructed. Doesn't seem to have any effect...

  • #14
    Regular Coder
    Join Date
    Jun 2004
    Posts
    495
    Thanks
    0
    Thanked 82 Times in 80 Posts
    Code:
    <p class="post_meta"><span class="add_comment" style="height:16px;"><a href="http:/ ...

  • #15
    New Coder
    Join Date
    Oct 2007
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Fang View Post
    Code:
    <p class="post_meta"><span class="add_comment" style="height:16px;"><a href="http:/ ...
    Works great! Thank you SO much for the help!


  •  

    Posting Permissions

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