Serendipity Forums

Code: Select all

<!-- width_body is available content width after margins and padding (508) minus serendipity_comment padding and -->
<!-- borders (12) minus comment_source border (2) minus comment_source width (170) minus commentBody padding (10) -->

<!-- width_comment is available content width after margins and padding (508) minus serendipity_comment padding (10) -->
<!-- minus comment_action borders (2) -->

{foreach from=$comments item=comment name="comments"}
    <div id="dc_serendipity_comment_{$comment.id}" class="dc_serendipity_comment dc_serendipity_comment_author_{$comment.author|@makeFilename} {if $entry.author == $comment.author}dc_serendipity_comment_author_self{/if} {cycle values="dc_comment_oddbox, dc_comment_evenbox"}" style="margin-left: {$comment.depth*10}px">
        <a id="c{$comment.id}"></a>
        <div class="dc_comment_details">
            <div class="dc_comment_source">
                {if $comment.avatar}
                    {$comment.avatar}
                {else}
                    <img src="{$serendipityHTTPPath}templates/{$template}/img/comment_bubbles.png" alt="avatar" title="{$comment.author}" class="comment_avatar" />
                {/if}
                <p class="dc_comment_source_author">
                    {if $comment.email}
                        <a href="mailto:{$comment.email}">{$comment.author|@default:$CONST.ANONYMOUS}</a>
                    {else}
                        {$comment.author|@default:$CONST.ANONYMOUS}
                    {/if}
                </p>
                {if $comment.url}
                    <p class="dc_comment_source_url"><a  href="{$comment.url}" title="{$comment.url|@escape}">{$CONST.HOMEPAGE}</a></p>
                {/if}
                <p class="dc_comment_source_date">{$comment.timestamp|@formatTime:'%m/%d/%Y  %I:%M%p'}</p>
            </div>

            {math assign="width_body" equation="314 - x" x=$comment.depth*10}
            <div class="dc_serendipity_commentBody" style="width: {$width_body}px">
                {if $comment.body == 'COMMENT_DELETED'}
                    {$CONST.COMMENT_IS_DELETED}
                {else}
                    {$comment.body}
                {/if}
            </div>
        </div>
        
        {math assign="width_action" equation="496 - x" x=$comment.depth*10}
        <div class="dc_comment_action" style="width: {$width_action}px">

            {if $entry.is_entry_owner}
                <span class="dc_comment_source_ownerlink"><a title="{$CONST.DELETE}" href="{$comment.link_delete}" onclick="return confirm('{$CONST.COMMENT_DELETE_CONFIRM|@sprintf:$comment.id:$comment.author}');">{$CONST.DELETE}</a></span>
            {/if}
            {if $entry.allow_comments AND $comment.body != 'COMMENT_DELETED'}
                <span class="dc_comment_reply"><a title="{$CONST.REPLY}" href="#serendipity_CommentForm" id="serendipity_reply_{$comment.id}" onclick="document.getElementById('serendipity_replyTo').value='{$comment.id}'; {$comment_onchange}">{$CONST.REPLY}</a></span>
                <div id="dc_serendipity_replyform_{$comment.id}"></div>
            {/if}
            <span class="dc_comment_source_trace"><a href="#c{$comment.id}">#{$comment.trace}</a></span>
        </div>

    </div>
{foreachelse}
    <div class="serendipity_center nocomments">{$CONST.NO_COMMENTS}</div>
{/foreach}

Code: Select all

/**************************************************/
/* fancy new serendipity comments by Don Chambers */
/* www.optional-necessity.com                     */
/**************************************************/

/* don's fancy new comments */
.serendipity_commentsTitle{ /* required due to floated comments */
    clear: both;
}

.dc_serendipity_comment { /* the entire comment */
    float: left;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 5px;
    border: 1px solid #cccccc;
    background-color: #EEEEEE;
    display: inline;
    /* oddbox and evenbox being ignored, but those could be styled differently */
}

.dc_comment_details { /* comment source and comment body */
    min-height: 50px;
    float: left;
    margin: 0;
    padding: 0;
    border: 1px solid #cccccc;
    background-color: #f6f6f6;
}

.dc_comment_source { /* avatar, name, post time */
    float: left;
    margin: 0;
    padding: 5px;
    width: 160px;
    overflow: hidden;
}

.dc_comment_source img{ /* avatar */
    float: left;
    padding: 5px;
/* source image should be fecthed at these dimensions for best results */
    height: 50px;
    width: 50px;
}

/* links within comment_source */
.dc_comment_source a:link,
.dc_comment_source a:visited,
.dc_comment_source a:hover,
.dc_comment_source a:active{
    font-weight: bold;
}

#serendipity_trackbacklist .dc_comment_source p {
    margin-left: 0;
}

#serendipity_commentlist .dc_comment_source p {
    margin-left: 60px; /* image padding plus image width */
}

p.dc_comment_source_author { /*author name*/
    margin-top:0;
}

p.dc_comment_source_url { /* author homepage, if any */
    font-size: 80%;
}

p.dc_comment_source_date { /*comment date and time */
    text-transform: lowercase;
}

.dc_serendipity_commentBody { /* text/body of comment */
    float: left;
    clear: right;
    padding: 5px;
    overflow: hidden;
/* width set inline via smarty calculation */
}

.dc_comment_action { /* comment number delete, reply */
    float: left;
    clear: both;
    margin-top: 5px;
/* width set inline via smarty calculation */
    font: 85% "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
/* using a background image, so combination of font size and family needs to be large enough to see image */
}

.dc_comment_source_ownerlink,
.dc_comment_reply {
    float: left;
    display: inline;
    font-weight: bold;
}

.dc_comment_action a:link,
.dc_comment_action a:visited {
    padding-left: 20px;
    text-decoration: none;
    color: #939393; /* grey */
}
.dc_comment_action a:hover,
.dc_comment_action a:active {
    padding-left: 20px;
    text-decoration: none;
    color: #FF6600;  /* dark orange */
}

.dc_comment_reply a:link,
.dc_comment_reply a:visited {
    background: url('img/reply_grey.png') no-repeat;
}

.dc_comment_reply a:hover,
.dc_comment_reply a:active {
    background: url('img/reply.png') no-repeat;
}

.dc_comment_source_ownerlink a:link,
.dc_comment_source_ownerlink a:visited {
    margin-right: 10px;
    background: url('img/delete_grey.png') no-repeat;
}

.dc_comment_source_ownerlink a:hover,
.dc_comment_source_ownerlink a:active {
    margin-right: 10px;
    background: url('img/delete.png') no-repeat;
}

.dc_comment_source_trace {
    float: right;
    display: inline;
}

/* comments by entry author */
.dc_serendipity_comment_author_self,
.dc_serendipity_comment_author_self .dc_comment_details  {
    border: 1px solid #E67D18; /* dark orange */
}
.dc_serendipity_comment_author_self {
    background: #F8EEDF;
}

.dc_serendipity_comment_author_self .dc_comment_source a:link,
.dc_serendipity_comment_author_self .dc_comment_source a:visited,
.dc_serendipity_comment_author_self .dc_comment_source a:hover,
.dc_serendipity_comment_author_self .dc_comment_source a:active{
/*    color: #ffffff; */ /*color might need to be light if using dark background */
}

.dc_serendipity_comment_author_self .dc_comment_details{
    background: #F7D9A7 url('img/comment_self_background.gif') repeat;
/*    color: #ffffff; */ /*color might need to be light if using dark background */
}