From 78a94fb2d2ed3ffe21cb477a00a54eaebc76306d Mon Sep 17 00:00:00 2001 From: Adolfo Reyna Date: Fri, 13 Mar 2026 00:18:20 -0400 Subject: [PATCH] Fix layout for single article images and style comments section --- comments.php | 34 +++++++++++---------- single.php | 83 +++++++++++++++++++++++++------------------------- style.css | 85 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 146 insertions(+), 56 deletions(-) diff --git a/comments.php b/comments.php index b8fee55..08fcb22 100644 --- a/comments.php +++ b/comments.php @@ -3,26 +3,26 @@ * The template for displaying comments */ -if ( post_password_required() ) { +if (post_password_required()) { return; } ?>
- +

' . get_the_title() . '' ); } else { printf( - esc_html( _nx( '%1$s thought on “%2$s”', '%1$s thoughts on “%2$s”', $comment_count, 'comments title', 'wisdom1' ) ), - number_format_i18n( $comment_count ), + esc_html(_nx('%1$s thought on “%2$s”', '%1$s thoughts on “%2$s”', $comment_count, 'comments title', 'wisdom1')), + number_format_i18n($comment_count), '' . get_the_title() . '' ); } @@ -33,7 +33,7 @@ if ( post_password_required() ) { 'ol', + 'style' => 'ol', 'short_ping' => true, 'avatar_size' => 60, ) @@ -45,20 +45,22 @@ if ( post_password_required() ) { the_comments_navigation(); // If comments are closed and there are comments, let's leave a little note, shall we? - if ( ! comments_open() ) : + if (!comments_open()): ?> -

+

'

', - 'title_reply_after' => '

', - ) + + $args = array( + 'class_form' => 'comment-form mt-4 p-4 rounded bg-white shadow-sm border', + 'class_submit' => 'btn btn-secondary fw-bold text-uppercase mt-3', + 'title_reply_before' => '

', + 'title_reply_after' => '

', + 'comment_field' => '
', ); + comment_form($args); ?> -
+ \ No newline at end of file diff --git a/single.php b/single.php index f09d252..4d529a1 100644 --- a/single.php +++ b/single.php @@ -6,29 +6,32 @@ get_header(); ?>
-
-
- -
> -
-
- - • - -
- ', ''); ?> -
+ +
> +
+
+ + • + +
+ ', ''); ?> +
- -
- 'img-fluid rounded shadow-sm')); ?> -
- + +
+ 'img-fluid rounded shadow-sm w-100', + 'style' => 'aspect-ratio: 16/9; object-fit: cover;' + )); ?> +
+ -
+
+
+
Related: ', '', ''); ?>
-
+
-
-
- + - - + endwhile; // End of the loop. + ?> +
diff --git a/style.css b/style.css index a7fcd60..48a10df 100644 --- a/style.css +++ b/style.css @@ -179,4 +179,89 @@ a:hover { align-items: center; justify-content: center; border-radius: 4px; +} + +/* Comments Styling overrides for native wp_list_comments */ +.comment-list { + list-style: none; + padding: 0; + margin: 0 0 3rem 0; +} + +.comment-list .comment { + background: #fff; + border: 1px solid rgba(26, 43, 72, 0.1); + /* Subtle midnight border */ + border-radius: 0.5rem; + padding: 1.5rem; + margin-bottom: 1.5rem; + box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075); +} + +.comment-list .comment-body { + display: flex; + flex-direction: column; +} + +.comment-list .comment-author { + display: flex; + align-items: center; + gap: 1rem; + margin-bottom: 1rem; + font-weight: 600; + color: var(--brand-deep-midnight); +} + +.comment-list .comment-author img { + border-radius: 50%; +} + +.comment-list .comment-meta { + font-size: 0.85rem; + color: #6c757d; + margin-bottom: 1rem; +} + +.comment-list .comment-meta a { + color: #6c757d; + text-decoration: none; +} + +.comment-list p { + margin-bottom: 0.5rem; +} + +.comment-list .reply a { + display: inline-block; + font-size: 0.85rem; + text-transform: uppercase; + font-weight: 700; + color: var(--brand-deep-teal); + border: 1px solid var(--brand-deep-teal); + padding: 0.25rem 0.75rem; + border-radius: 0.25rem; + transition: all 0.2s; + text-decoration: none; + margin-top: 1rem; +} + +.comment-list .reply a:hover { + background: var(--brand-deep-teal); + color: #fff; +} + +.comment-list .children { + list-style: none; + padding-left: 2rem; + margin-top: 1.5rem; + border-left: 2px solid rgba(26, 43, 72, 0.1); +} + +/* Series Taxonomy Step Numbers */ +.series-number-stamp { + font-family: 'Playfair Display', serif; + font-size: 4rem; + color: var(--brand-gold-leaf); + opacity: 0.2; + line-height: 1; } \ No newline at end of file