[Resolved] dispatch header

Home Forums Support dispatch header

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #925726
    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

    #925734
    David
    Staff
    Customer Support

    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.

    #925750
    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?

    #925759
    David
    Staff
    Customer Support

    Oops forgot that. Try this CSS:

    .wpsp-grid .wp-show-posts article {
        outline: solid thick #ffffff;
    }
    #925770
    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?

    #925775
    David
    Staff
    Customer Support

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

    #925778
    Femke

    ok ill do that, thanks!

    #925782
    David
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.