dispatch header

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.

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

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

Oops forgot that. Try this CSS:

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

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?

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

ok ill do that, thanks!

Thank you