Skip to:
Content

BuddyPress.org

Changeset 3724


Ignore:
Timestamp:
01/16/2011 10:50:24 PM (14 years ago)
Author:
djpaul
Message:

Change blog comment CSS to mimic the Activity Stream. Fixes #2988, props modemlooper

Location:
trunk/bp-themes/bp-default
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • trunk/bp-themes/bp-default/_inc/css/default.css

    r3696 r3724  
    14951495
    14961496.activity-list .activity-header a:first-child,
     1497.commentlist .depth-1 > .comment-content .comment-meta a:first-child,
    14971498span.highlight {
    14981499    background: #ebf7ff;
    … …  
    15171518}
    15181519
    1519 .activity-list .activity-content span.time-since {
     1520.activity-list .activity-content span.time-since,
     1521.comment-content .comment-meta span.time-since {
    15201522    color: #bbb;
    15211523}
    … …  
    16701672}
    16711673
    1672 div.activity-comments ul li p:last-child {
     1674div.activity-comments ul li p:last-child,
     1675.commentlist .comment-content a:first-child {
    16731676    margin-bottom: 10px;
    16741677}
    … …  
    20532056}
    20542057
    2055 div.post div.author-box,
    2056 div.comment-avatar-box {
     2058div.post div.author-box {
    20572059    background: #f0f0f0;
    20582060    padding: 10px;
    … …  
    20782080}
    20792081
    2080 div.post div.author-box img,
    2081 div.comment-avatar-box img {
     2082div.post div.author-box img {
    20822083    float: none;
    20832084    border: 4px solid #fff;
    … …  
    20852086}
    20862087
    2087 div.post div.post-content,
    2088 div.comment-content {
     2088div.post div.post-content {
    20892089    margin-left: 105px;
    20902090}
    20912091
    2092 div.post p.date, div.post p.postmetadata,
    2093 div.comment-meta, div.comment-options {
     2092div.post p.date,
     2093div.post p.postmetadata {
    20942094    color: #888;
    20952095    font-size: 12px;
    … …  
    21892189}
    21902190
    2191 #comments h3,
    2192 #trackbacks h3,
    2193 #respond h3 {
    2194     font-size: 20px;
    2195     margin: 5px 0 25px 0;
     2191.commentlist .bypostauthor {
     2192}
     2193
     2194#comments ol.commentlist {
     2195    border-bottom: 1px solid #e4e4e4;
     2196    margin-bottom: 30px;
     2197}
     2198
     2199ol.commentlist div.comment-avatar-box {
     2200    float: left;
     2201    margin: 10px 10px 10px 0;
     2202}
     2203
     2204ul.children div.comment-avatar-box {
     2205    float: left;
     2206    margin: 0px 10px 10px 0;
     2207}
     2208
     2209div.comment-avatar-box img {
     2210    border: 2px solid #eee;
     2211}
     2212
     2213div.comment-content {
     2214    border-top: 1px solid #e4e4e4;
     2215    padding-left: 75px;
     2216}
     2217
     2218.commentlist .children .comment {
     2219    margin-bottom: 5px;
     2220}
     2221
     2222div.comment-meta,
     2223div.comment-options {
     2224    color: #888;
     2225    font-size: 11px;
     2226    margin: 10px 0;
     2227    padding: 0 0 3px;
     2228}
     2229
     2230div.comment-meta em {
     2231    font-style: normal;
     2232}
     2233
     2234div.comment-meta span.comment-highlight a {
     2235    background: #EBF7FF;
     2236    border-bottom: 1px solid #a1dcfa;
     2237    border-radius: 4px;
     2238    border-right: 1px solid #a1dcfa;
     2239    color: #059AE7;
     2240    margin-right: 3px;
     2241    padding: 3px 8px;
     2242    text-decoration: none;
     2243    -moz-border-radius: 4px;
     2244    -webkit-border-radius: 4px;
     2245}
     2246
     2247div.comment-meta .comment-highlight a:hover,
     2248.commentlist .depth-1 > .comment-content .comment-meta a:first-child:hover {
     2249    background: #059AE7;
     2250    border-color: #059AE7;
     2251    color: #fff;
     2252}
     2253
     2254#reply-title small {
     2255    float: right;
     2256    font-size: 11px;
    21962257    font-weight: normal;
    2197     color: #555;
    2198 }
    2199 
    2200 #comments span.title,
    2201 #trackbacks span.title {
    2202     color: #aaa;
    2203 }
    2204 
    2205 .commentlist .bypostauthor {
    2206 }
    2207 
    2208 ol.commentlist li {
    2209     margin: 0 0 30px 0;
    2210 }
    2211 
    2212 ol.commentlist ul.children {
    2213     margin-left: 105px;
    2214 }
    2215 
    2216 div.comment-meta {
     2258}
     2259
     2260#reply-title small a,
     2261div.comment-options a.comment-reply-link {
     2262    background: #FFF9DB;
     2263    border-bottom: 1px solid #FFE8C4;
     2264    border-radius: 4px;
     2265    border-right: 1px solid #FFE8C4;
     2266    color: #ffa200;
     2267    margin-right: 10px;
     2268    padding: 3px 8px;
     2269    text-decoration: none;
     2270    -moz-border-radius: 4px;
     2271    -webkit-border-radius: 4px;
     2272}
     2273
     2274#reply-title small a {
     2275    margin-right: 0;
     2276}
     2277
     2278#reply-title small a:hover,
     2279div.comment-options a.comment-reply-link:hover {
     2280    background: #f7740a;
     2281    border-color: #f7740a;
     2282    color: #fff;
     2283}
     2284
     2285ul.children {
     2286    background: #f5f5f5;
     2287    margin-bottom: 20px;
     2288    margin-left: 75px;
     2289    padding: 1px 10px;
     2290    -moz-border-radius: 4px;
     2291    -webkit-border-radius: 4px;
     2292}
     2293
     2294ul.children ul {
     2295    margin-left: 20px;
     2296    margin-bottom: 0;
     2297    padding: 5px 0 0 0;
     2298}
     2299
     2300ul.children img.avatar {
     2301    border-style: none;
     2302    height: 25px;
     2303    margin: 0;
     2304    width: 25px;
     2305}
     2306
     2307ul.children div.comment-content {
    22172308    border-top: none;
    2218     padding-top: 0;
    2219 }
    2220 
    2221 div.comment-meta h5 {
    2222     font-weight: normal;
    2223 }
    2224 
    2225 div.comment-meta em {
    2226     float: right;
    2227 }
    2228 
    2229 div.comment-options {
    2230     border-bottom: none;
     2309    padding-left: 35px;
     2310}
     2311
     2312ul.children div.comment-meta {
     2313    font-size: 11px;
     2314    margin-top: 0;
     2315}
     2316
     2317ul.children div.comment-options {
     2318    margin-bottom: 5px;
     2319    margin-top: 0;
     2320}
     2321
     2322ul.children li {
     2323    border-top: 2px solid #fffeff;
     2324    padding-top: 10px;
     2325}
     2326
     2327ul.children li:first-child {
     2328    border-top: none;
     2329}
     2330
     2331ul.children ul li:first-child {
     2332    border-top: 2px solid #fffeff;
     2333}
     2334
     2335ul.children div.comment-options a.comment-reply-link {
     2336    background: transparent;
     2337    border-style: none;
     2338    color: #1fb3dd;
     2339    margin-right: 0;
     2340    padding: 3px 8px;
     2341    text-decoration: underline;
     2342}
     2343
     2344ul.children div.comment-options a.comment-reply-link:hover {
     2345    background: transparent;
     2346    border-style: none;
     2347    color: #1fb3dd;
     2348}
     2349
     2350#respond {
     2351    background-color: #fafafa;
     2352    border: 1px solid #e5e5e5;
     2353    border-radius: 4px;
     2354    margin-bottom: 20px;
     2355    padding: 10px;
     2356    -moz-border-radius: 4px;
     2357    -webkit-border-radius: 4px;
     2358}
     2359
     2360ol.commentlist #respond {
     2361    margin-left: 75px;
     2362}
     2363
     2364ul.children #respond {
     2365    margin-bottom: 10px;
     2366    margin-left: 35px;
     2367    margin-right: 20px;
     2368}
     2369
     2370h3#reply .comments-header {
     2371    font-size: 14px;
     2372}
     2373
     2374#respond div.comment-avatar-box {
     2375    margin-top: 0;
     2376}
     2377
     2378#respond div.comment-content {
     2379    border-style: none;
    22312380}
    22322381

  • trunk/bp-themes/bp-default/comments.php

    r3624 r3724  
    5555
    5656<?php if ( comments_open() ) : ?>
    57     <div id="respond">
    58 
    59         <div class="comment-avatar-box">
    60             <div class="avb">
    61                 <?php if ( bp_loggedin_user_id() ) : ?>
    62                     <a href="<?php echo bp_loggedin_user_domain() ?>">
    63                         <?php echo get_avatar( bp_loggedin_user_id(), 50 ) ?>
    64                     </a>
    65                 <?php else : ?>
    66                     <?php echo get_avatar( 0, 50 ) ?>
    67                 <?php endif; ?>
    68             </div>
    69         </div>
    70 
    71         <div class="comment-content standard-form">
    72             <?php comment_form() ?>
    73         </div><!-- .comment-content -->
    74 
    75     </div><!-- #respond -->
     57    <?php comment_form() ?>
    7658<?php endif; ?>
    7759

  • trunk/bp-themes/bp-default/functions.php

    r3704 r3724  
    8686        // No CSS. The %s is a placeholder for the theme template directory URI.
    8787        define( 'HEADER_IMAGE', '%s/_inc/images/default_header.jpg' );
    88    
     88
    8989        // The height and width of your custom header. You can hook into the theme's own filters to change these values.
    9090        // Add a filter to bp_dtheme_header_image_width and bp_dtheme_header_image_height to change these values.
    9191        define( 'HEADER_IMAGE_WIDTH', apply_filters( 'bp_dtheme_header_image_width', 1250 ) );
    9292        define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'bp_dtheme_header_image_height', 125 ) );
    93    
     93
    9494        // We'll be using post thumbnails for custom header images on posts and pages. We want them to be 1250 pixels wide by 125 pixels tall.
    9595        // Larger images will be auto-cropped to fit, smaller ones will be ignored.
    9696        set_post_thumbnail_size( HEADER_IMAGE_WIDTH, HEADER_IMAGE_HEIGHT, true );
    97    
     97
    9898        // Add a way for the custom header to be styled in the admin panel that controls custom headers.
    9999        add_custom_image_header( 'bp_dtheme_header_style', 'bp_dtheme_admin_header_style' );
    … …  
    382382 */
    383383function bp_dtheme_blog_comments( $comment, $args, $depth ) {
    384     $GLOBALS['comment'] = $comment; ?>
    385 
    386     <?php if ( 'pingback' == $comment->comment_type ) return false; ?>
    387 
    388     <li <?php comment_class(); ?> id="comment-<?php comment_ID(); ?>">
     384    $GLOBALS['comment'] = $comment;
     385
     386    if ( 'pingback' == $comment->comment_type )
     387        return false;
     388
     389    if ( 1 == $depth )
     390        $avatar_size = 50;
     391    else
     392        $avatar_size = 20;
     393    ?>
     394    <li <?php comment_class() ?> id="comment-<?php comment_ID() ?>">
    389395        <div class="comment-avatar-box">
    390396            <div class="avb">
    391397                <a href="<?php echo get_comment_author_url() ?>" rel="nofollow">
    392398                    <?php if ( $comment->user_id ) : ?>
    393                         <?php echo bp_core_fetch_avatar( array( 'item_id' => $comment->user_id, 'width' => 50, 'height' => 50, 'email' => $comment->comment_author_email ) ); ?>
     399                        <?php echo bp_core_fetch_avatar( array( 'item_id' => $comment->user_id, 'width' => $avatar_size, 'height' => $avatar_size, 'email' => $comment->comment_author_email ) ) ?>
    394400                    <?php else : ?>
    395                         <?php echo get_avatar( $comment, 50 ) ?>
     401                        <?php echo get_avatar( $comment, $avatar_size ) ?>
    396402                    <?php endif; ?>
    397403                </a>
    … …  
    400406
    401407        <div class="comment-content">
    402 
    403408            <div class="comment-meta">
    404                 <?php printf( __( '%s said:', 'buddypress' ), '<a href="' . get_comment_author_url() . '" rel="nofollow">' . get_comment_author() . '</a>' ) ?>
    405                 <em><?php _e( 'On', 'buddypress' ) ?> <a href="#comment-<?php comment_ID() ?>" title=""><?php comment_date() ?></a></em>
     409                <a href="<?php echo get_comment_author_url() ?>" rel="nofollow"><?php echo get_comment_author() ?></a> <?php echo _n( 'said:', 'replied:', $depth, 'buddypress' ) ?></a>
     410                <span class="time-since">&nbsp; <?php comment_date() ?></span>
     411
     412                <?php if ( 1 == $depth ) : ?>
     413                    &middot; <a href="#comment-<?php comment_ID() ?>"><?php _e( 'View', 'buddypress' ) ?></a>
     414                <?php else: ?>
     415                    &middot; <?php echo comment_reply_link( array( 'depth' => $depth, 'max_depth' => $args['max_depth'], 'reply_text' => __( 'Reply', 'buddypress' ) ) ) ?>
     416                <?php endif; ?>
     417
     418                <?php edit_comment_link( __( 'Edit', 'buddypress' ), '&middot; ', '' ) ?>
    406419            </div>
    407420
    408421            <?php if ( $comment->comment_approved == '0' ) : ?>
    409                 <em class="moderate"><?php _e( 'Your comment is awaiting moderation.', 'buddypress' ); ?></em><br />
     422                <em class="moderate"><?php _e( 'Your comment is awaiting moderation.', 'buddypress' ) ?></em><br />
    410423            <?php endif; ?>
    411424
    412425            <?php comment_text() ?>
    413426
    414             <div class="comment-options">
    415                 <?php echo comment_reply_link( array( 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) ?>
    416                 <?php edit_comment_link( __( 'Edit', 'buddypress' ), '', '' ); ?>
    417             </div>
    418 
     427            <?php if ( 1 == $depth ) : ?>
     428                <div class="comment-options">
     429                    <?php echo comment_reply_link( array( 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) ?>
     430                </div>
     431            <?php endif; ?>
    419432        </div>
    420433<?php
    … …  
    550563
    551564    $new_labels = array(
    552         'cancel_reply_link'    => '<p id="cancel-comment-reply">' . __( 'Cancel reply', 'buddypress' ) . '</p>',
    553565        'comment_field'        => '<p class="form-textarea"><label for="comment">' . __( 'Comment', 'buddypress' ) . '</label><textarea name="comment" id="comment" cols="60" rows="10" aria-required="true"></textarea></p>',
    554566        'comment_notes_after'  => '',
    … …  
    556568        'fields'               => apply_filters( 'comment_form_default_fields', $fields ),
    557569        'logged_in_as'         => '<p class="log-in-out">' . sprintf( __( 'Logged in as <a href="%1$s">%2$s</a>. <a href="%3$s">Log out?</a>', 'buddypress' ), bp_loggedin_user_domain(), $user_identity, wp_logout_url( get_permalink() ) ) . '</p>',
    558         'must_log_in'          => '<p class="alert">' . sprintf( __( 'You must be <a href="%1$s">logged in</a> to post a comment.', 'buddypress' ), wp_login_url( get_permalink() ) )   . '</p>',
    559         'title_reply'          => '<h3 id="reply" class="comments-header">' . __( 'Leave a reply', 'buddypress' ) . '</h3>',
    560         'title_reply_to'       => '<h3 id="reply" class="comments-header">' . __( 'Leave a reply to %s', 'buddypress' ) . '</h3>'
     570        'must_log_in'          => '<p class="alert">' . sprintf( __( 'You must be <a href="%1$s">logged in</a> to post a comment.', 'buddypress' ), wp_login_url( get_permalink() ) )   . '</p>'
    561571    );
    562572
    … …  
    564574}
    565575add_filter( 'comment_form_defaults', 'bp_dtheme_comment_form', 10 );
     576
     577/**
     578 * Adds the user's avatar before the comment form box.
     579 *
     580 * The 'comment_form_top' action is used to insert our HTML within <div id="reply">
     581 * so that the nested comments comment-reply javascript moves the entirety of the comment reply area.
     582 *
     583 * @see comment_form()
     584 * @since 1.3
     585 */
     586function bp_dtheme_before_comment_form() {
     587?>
     588    <div class="comment-avatar-box">
     589        <div class="avb">
     590            <?php if ( bp_loggedin_user_id() ) : ?>
     591                <a href="<?php echo bp_loggedin_user_domain() ?>">
     592                    <?php echo get_avatar( bp_loggedin_user_id(), 50 ) ?>
     593                </a>
     594            <?php else : ?>
     595                <?php echo get_avatar( 0, 50 ) ?>
     596            <?php endif; ?>
     597        </div>
     598    </div>
     599
     600    <div class="comment-content standard-form">
     601<?php
     602}
     603add_action( 'comment_form_top', 'bp_dtheme_before_comment_form' );
     604
     605/**
     606 * Closes tags opened in bp_dtheme_before_comment_form().
     607 *
     608 * @see bp_dtheme_before_comment_form()
     609 * @see comment_form()
     610 * @since 1.3
     611 */
     612function bp_dtheme_after_comment_form() {
     613?>
     614    </div><!-- .comment-content standard-form -->
     615<?php
     616}
     617add_action( 'comment_form', 'bp_dtheme_after_comment_form' );
    566618
    567619
Note: See TracChangeset for help on using the changeset viewer.