[Resolved] dispatch header

[Femke]

Hi,

I am using the Dispatch template and would like to change the header. I would like to have 4 posts instead of 3 because with 3 there is always one featured image showing horizontal and crops the image to something that doesnt look good. So, if I have 4 square images this problem should be solved, but the question is, How to change the 3 images on the right to 4 square images?

and the other question: How to get some white space (padding) between the images?

Thanks a lot,
Femke

[David]

Hi there,

will take a little work – to begin with go the Dashboard > WP Show Posts and edit the Header list. In the Posts per page change the number to 5 and Publish this.

Preview the site to make sure you see the 5th post in the header. If it doesn’t show then clear caches and refresh the screen.

Now you have 5 posts go to Customizer > Additional CSS and look for this part of the CSS:

.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;
}

And replace it with:

.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 / 7;
    grid-row: 1 / 2;
}

.wpsp-grid .wp-show-posts article:nth-child(3) {
    grid-column: 7 / end;
    grid-row: 1 / 1;
}

.wpsp-grid .wp-show-posts article:nth-child(4) {
    grid-column: 5 / 7;
    grid-row: 2 / 4;
}

.wpsp-grid .wp-show-posts article:nth-child(5) {
    grid-column: 7 / end;
    grid-row: 2 / 4;
}

Before doing this its advisable to copy and paste the code into a text editor for safe keeping in case you want to revert.

[Femke]

Hi David,
Thanks a lot, this worked out great.

Do you also have a solution to get white spacing/padding in between the images?

[David]

Oops forgot that. Try this CSS:

.wpsp-grid .wp-show-posts article {
    outline: solid thick #ffffff;
}

[Femke]

Great thanks!

I also want to know how to add an advertisement image next to my site logo. Can you help me with that or should i open a new ticket?

[David]

To make it easier for you and us to track. Be best to raise a new topic 🙂

[Femke]

ok ill do that, thanks!

[David]

Thank you

[Author]

Posts