Archived topic
How to customize header Post Lists in Dispatch?
3 replies · Started by Christopher on March 16, 2021
Hi there!
I've installed Dispatch on my site. But I'd like to make the Header Post List at the top of the Cover Page display only 1 story, like a large hero article. I've tried a couple of things, and nothing seems to work... changing the Header options to 1 story and 1 column removed the other 3 stories but didn't fill the space. I assume because of CSS styling.
What would be the best way to go about doing this?
Thank you!
Hi there,
1. Set the WPSP List for the header to show only one post.
2. Go to Customizer > Additional CSS and remove this:
/* magazine Grid Golden Ratio 5 block standard */
/* Add wpsp-grid class to WPSP List shortcode wrapper */
@media (min-width: 600px) {
.wpsp-grid .wp-show-posts {
display: grid;
}
}
@media (min-width: 900px) {
.wpsp-grid .wp-show-posts {
grid-template-columns: repeat(8, 1fr);
grid-template-rows: 1fr auto;
}
.wpsp-grid .wp-show-posts article:first-child {
grid-column: 1 / 5;
grid-row: 1 / 4;
}
.wpsp-grid .wp-show-posts article:nth-child(2) {
grid-column: 5 / end;
grid-row: 1 / 2;
}
.wpsp-grid .wp-show-posts article:nth-child(3) {
grid-column: 5 / 7;
grid-row: 2 / 4;
}
.wpsp-grid .wp-show-posts article:nth-child(4) {
grid-column: 7 / end;
grid-row: 2 / 4;
}
}
@media (max-width: 899px) and (min-width: 600px) {
.wpsp-grid .wp-show-posts article {
grid-column: span 4;
}
.wpsp-grid .wp-show-posts article:nth-child(3), .wpsp-grid .wp-show-posts article:nth-child(4) {
grid-row: 3;
grid-column: span 2;
}
}
.wpsp-grid article:not(:first-child) .wp-show-posts-image a img {
height: 250px;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.wpsp-grid article:first-child .wp-show-posts-image a img {
height: 500px;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.wpsp-grid article:not(:first-child) .wp-show-posts-entry-summary, .wpsp-grid article:not(:first-child) .wp-show-posts-entry-meta-below-post, .wpsp-grid article:not(:first-child) .wpsp-read-more {
display: none;
}Amazing. That's exactly what I wanted. Thank you so much... not a lot of themes provide this level of support. I really appreciate it.
Glad we can be of help!
