How did I style comments and how did I use rounded corners using CSS Speech Bubbles from willmayo.com in my theme without hacking any other modules...
First, I created a new function in my template.php -> phptemplate_comment_wrapper which as it's written in Drupal's API allow themeable wrapping of all comments.
My function looks like this:
<?php
function phptemplate_comment_wrapper($content, $type = null) {
static $node_type;
if (isset($type)) $node_type = $type;
if (!$content || $node_type == 'forum') {
return '<div id="comments">'. $content . '</div>';
}
else {
return '<div id="comments"><img src="'.base_path().path_to_theme().'/images/comments.gif" alt="comments" class="comments-icon" /><h2 class="comments-h2">'. t('Comments') .'</h2>'. $content .'</div>';
}
}
?>The result will be as shown here:

I added that little bubble image, but better you can use css to add an image to h2 tag.
Also you can use this function to add your own separator and then using php strip $content variable into two parts (node content and comments) and then display comments anywhere else.
Using CSS Speech Bubbles I achieved nice looking comments. :) First, you will have to download CSS Speech Bubbles here. Unpack it and copy it under your theme directory. For example /sites/all/themes/yourtheme/roundedcorners. Now you will have to tell drupal to load css and js from that directory. You should add those lines straight to your page.tpl.php inside 'head' tag.
<style type="text/css" media="all">@import "<?php print base_path() . path_to_theme() ?>/roundedcorners/bubbles.css";</style>
<script type="text/javascript" src="<?php print base_path() . path_to_theme() ?>/roundedcorners/rounded_corners.inc.js"></script>So now, we are including stylesheet and javascript code. But few lines of code left:
Add these lines again inside your 'head' tag in page.tpl.php file.
<script type="text/JavaScript">
window.onload = function() {
settings = {
tl: { radius: 10 },
tr: { radius: 10 },
bl: { radius: 10 },
br: { radius: 10 },
antiAlias: true,
autoPad: true
}
var myBoxObject = new curvyCorners(settings, "rounded");
myBoxObject.applyCornersToAll();
}
</script>Or you can include this code in another js file.
The last thing we have to do, is add few divs to our comment.tpl.php file (originaly for my theme I've used comment.tpl.php file from default drupal theme garland). If your theme doesn't have one, you can copy my file, it's listed at the end of this article.
You can change colors of your comments or choose different style (as shown on example page of CSS Speech Bubbles).
| Attachment | Size |
|---|---|
| comment.tpl.php.txt | 1.05 KB |
Delicious
Technorati
Comments
Checking the Comment styling :)
I was just wondering such a nice post and no comment underneath to test this out!
hope this comment looks good with rounded corners.
Great Idea
This is a really good look, thanks for sharing how you achieved it. I shall certainly be looking at using this information to do something similar on my site.
cheers
Dan
thank you!
I am a newbie at CSS and I totally appreciate the code tips.
I think we should memorize
I think we should memorize the CSS commands which is recently the basic need for web pages.
Sorry for a dumb question,
Sorry for a dumb question, but I really can't get, what PSE is?...
Post new comment