adolforeyna/WFK_theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix layout for single article images and style comments section

Browse Source
This commit is contained in:
Adolfo Reyna
2026-03-13 00:18:20 -04:00
parent a705a2a33e
commit 78a94fb2d2
3 changed files with 146 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
comments.php
+6 -4
View File
@@ -53,12 +53,14 @@ if ( post_password_required() ) {
endif; // Check for have_comments().
comment_form(
array(
'title_reply_before' => '<h2 id="reply-title" class="comment-reply-title">',
$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' => '<h2 id="reply-title" class="comment-reply-title h3 font-serif mb-4">',
'title_reply_after' => '</h2>',
)
'comment_field' => '<div class="comment-form-comment mb-3"><label for="comment" class="form-label fw-bold">Your Perspective <span class="text-danger">*</span></label><textarea id="comment" name="comment" cols="45" rows="6" maxlength="65525" required="required" class="form-control bg-light"></textarea></div>',
);
comment_form($args);
?>
</div><!-- #comments -->
single.php
+8 -5
View File
@@ -6,8 +6,6 @@
get_header(); ?>
<main id="primary" class="site-main container my-5">
<div class="row">
<div class="col-lg-8 mx-auto">
<?php
while (have_posts()):
the_post();
@@ -23,12 +21,17 @@ get_header(); ?>
</header>
<?php if (has_post_thumbnail()): ?>
<div class="post-thumbnail mb-5">
<?php the_post_thumbnail('full', array('class' => 'img-fluid rounded shadow-sm')); ?>
<div class="post-thumbnail-full mb-5">
<?php the_post_thumbnail('full', array(
'class' => 'img-fluid rounded shadow-sm w-100',
'style' => 'aspect-ratio: 16/9; object-fit: cover;'
)); ?>
</div>
<?php endif; ?>
<div class="entry-content fs-5 lh-lg font-serif">
<div class="row">
<div class="col-lg-8 mx-auto">
<div class="entry-content fs-5 lh-lg font-sans text-dark">
<?php
the_content();
style.css
+85
View File
@@ -180,3 +180,88 @@ a:hover {
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;
}