Comment Bubble Alignment

  • I really love the look of the comment bubble, like on this site ::

    https://makingitlovely.com/

    I am attempting to add it to my site, but I’m having two problems::

    Getting it aligned automatically within the post header area. Currently I have this CSS ::

    .shield {
	position: relative;
left:430px
}
.commentscloud {
	position: absolute;
	text-align: center;
	top: -37px;
	left: 22px;
	width: 46px;
	height: 46px;
	padding: 7px 0;
	background: url(/bubble2.png) no-repeat 0 0;
}

    in my style sheet and this ::

    <div class="shield">
	<div class="commentscloud">
		<?php comments_number('0', '1', '%'); ?>
	</div>
</div>

    in my index.php.

    Also, was wondering how to make the comment number click able, so the user can licks on the number of comments in the bubble and read the comments posted.

    Thanks so much, this is only my second post, but this forum has been a huge help!

Viewing 3 replies - 1 through 3 (of 3 total)

  • They updated their site and there is no comment bubble

    I see the comment bubble…

    And to make the comment clickable you could do something like this…

    <?php comments_popup_link('0', '1', '%'); ?>

    Instead of…

    <?php comments_number('0', '1', '%'); ?>

    If you’re not using the javascript popup for comments it’ll just default to a link, so ignore the fact that it says popup link… ??

    You’re talking about the pink bubble set as the background of the number of comments a post has? Or an background image of a bubble around each comment itself?

    This is the bubble
    https://makingitlovely.com/wp-content/themes/Lovely_Premium/images/comment.gif

    And it’s coming from the class=”comm” and the code they are using in their CSS is 

    .comm {
	background:url(images/comment.gif) no-repeat;
}
.comm a { color: #dba900; }
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Comment Bubble Alignment’ is closed to new replies.