...

View Full Version : Question about CSS/HTML and adding a Digg button



ennergi
10-15-2007, 12:57 AM
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:


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


.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! :)

Fang
10-15-2007, 09:13 AM
Try here:
<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;

ennergi
10-15-2007, 02:33 PM
Thank you for the reply!

What exactly would you add between those div tags?

Fang
10-15-2007, 02:39 PM
Whatever you now use for the button

ennergi
10-15-2007, 02:49 PM
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.

Fang
10-15-2007, 03:23 PM
You've placed the div after the closing p tag. See the code I gave.

ennergi
10-15-2007, 03:28 PM
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

Fang
10-15-2007, 04:20 PM
If you make the div a span it will line up correctly.

ennergi
10-15-2007, 04:24 PM
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

Fang
10-15-2007, 04:53 PM
Have the 2 styles been added?

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

ennergi
10-15-2007, 05:04 PM
Have the 2 styles been added?

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

Fang
10-15-2007, 06:25 PM
<p class="post_meta" style="overflow:hidden;">

ennergi
10-15-2007, 06:51 PM
<p class="post_meta" style="overflow:hidden;">

Added as instructed. Doesn't seem to have any effect...

Fang
10-15-2007, 07:16 PM
<p class="post_meta"><span class="add_comment" style="height:16px;"><a href="http:/ ...

ennergi
10-15-2007, 07:21 PM
<p class="post_meta"><span class="add_comment" style="height:16px;"><a href="http:/ ...

Works great! Thank you SO much for the help!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum