[Resolved] Customisation of Dispatch image grid

Home Forums Support Customisation of Dispatch image grid

Viewing 15 posts - 1 through 15 (of 23 total)
  • Author
    Posts
  • #1075339
    Brenda

    Hello, would you be able to advise please?

    Together with my developer, I am creating a site using the Dispatch theme and would like to make a few changes to the main image grid, as follows:

    1. I don’t need the ‘Read more’ button in the hero image. Is it possible to remove it?

    2. Can the proportions of the images in the grid be changed?

    From what I can tell, the width of the image grid is divided 50/50 in the original design, where:
    – 50% is the hero image on left hand side.
    – 50% is secondary/tertiary images on right hand side:
    — Secondary image is 50% width, 50% height.
    — Tertiary images are 25/25 width, 50% height.

    I would like to have the proportions at 60/40, where
    – 60% is the hero image on left hand side.
    – 40% is secondary/tertiary images on right hand side:
    — Secondary image is 40% width, 50% height.
    — Tertiary images are 20/20 width, 50% height.

    Sincerely hoping this is possible, as I’m rather attached to the format of my main image.

    Many thanks,
    Brenda

    #1075902
    David
    Staff
    Customer Support

    Hi there,

    1. The Read More button can be removed by editing the WP Show Posts list assigned to the Hero Grid. On the Content Tab simply remove the Read More text.

    2. The site uses a CSS Grid – go to Customizer > Additional CSS and look for this block of code:

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

    And replace it with:

    @media (min-width: 900px) {
        .wpsp-grid .wp-show-posts {
            grid-template-columns: repeat(10, 1fr);
            grid-template-rows: 1fr auto;
        }
    
        .wpsp-grid .wp-show-posts article:first-child {
            grid-column: 1 / 7;
            grid-row: 1 / 4;
        }
    
        .wpsp-grid .wp-show-posts article:nth-child(2) {
            grid-column: 7 / end;
            grid-row: 1 / 2;
        }
    
        .wpsp-grid .wp-show-posts article:nth-child(3) {
            grid-column: 7 / 9;
            grid-row: 2 / 4;
        }
    
        .wpsp-grid .wp-show-posts article:nth-child(4) {
            grid-column: 9 / end;
            grid-row: 2 / 4;
        }
    }
    #1078872
    Brenda

    Thank you for your reply, David, that has nicely resolved this particular issue.

    I have a couple more questions please – is it possible to have static pages that are not categorised:

    1. I would like the hero image in the main grid to not have the blog category showing above the text (if possible, not even HOME).

    2. Ideally, I would like to have the 2nd image as purely decorative, so without any text. Is this possible?

    Thanks!

    #1079480
    David
    Staff
    Customer Support

    In the WPSP list settings you can also disable the post meta from being displaye.
    You can hide the content of the 2nd post with this CSS:

    .wpsp-grid .wp-show-posts article:nth-child(2) .wpsp-content-wrap {
        visibility: hidden;
    }
    #1090163
    Brenda

    Thank you again for your reply, David; we managed to sort out those issues with your help—it’s very much appreciated.

    Please could you advise, as we have a couple more questions?

    1. Right under the sticky header (which has the main menu), there is the blog menu which is currently inside a black bar/border. This blog menu is also repeated on the secondary menu at the bottom of the image grid. Would it be possible to do the following:

    – I’d like to keep the top black border (under the sticky menu) as a separator/design feature but without the blog menu—so, purely for the aesthetics.

    – I would keep the blog menu as a secondary menu (also repeating the black border) under the image grid.

    2. The ABOUT and CONTACT static pages are showing on desktop and tablet, but not on phone (we are on iPad and iPhone). The hamburger menu on my phone isn’t showing any of these pages either.

    My designer says he can’t see an option for mobile menu.

    Would we be able to make the mobile menu work, while still keeping the design/menu features above?

    Many thanks again for your help with all these questions!
    Brenda

    #1090202
    David
    Staff
    Customer Support

    1. Customizer > Layout > Secondary Navigation > Navigation Location – set this to No Navigation.

    2. You have the Customizer > Layout > Off Canvas Panel enabled which replaces the primary navigation mobile menu. Options:
    1. Disable the off canvas panel.
    or 2. Customizer > Menus – select the menu have assigned to the Primary Navigation and under Menu Locations also check the Off Canvas Menu.

    #1090728
    Brenda

    Hello again…

    Thank you for resolving my questions above. I’m afraid I have more…

    My designer has created new blog posts but somehow the images from the blog posts have replaced the images that should have linked to static pages (Home, About, Contact, Events).

    Apparently the theme defaults to showing the latest post on the grid?

    I would like the blog post to show as Overlay cards below the grid, while the image grid becomes navigation to static pages. Is this possible?

    I do apologise for asking so many questions.

    Many thanks, Brenda

    #1091260
    David
    Staff
    Customer Support

    Yes, all you need to do is is edit the WP Show Posts list named Header.
    On the Settings tab you can set specific Post IDs so it will always show those posts.

    #1107307
    Brenda

    Thank you for your replies, the issues I mentioned above are resolved.

    #1107716
    David
    Staff
    Customer Support
    #1117019
    Brenda

    Hello again, apologies about having to re-open this.

    It’s in relation to this query dated 26 Nov:
    2. Ideally, I would like to have the 2nd image as purely decorative, so without any text. Is this possible?

    The text within the image box was successfully removed, thanks to your advice.

    However, we just found out that when one clicks on the image, it brings you to another page (http://1103665979.test.prositehosting.co.uk/who-we-are/). Is it possible to make this particular image a static one, without any live links?

    Thanks,
    Brenda

    #1117311
    David
    Staff
    Customer Support

    Try this CSS:

    .wpsp-grid .wp-show-posts article:nth-child(2) {
        pointer-events: none;
    }
    #1120019
    Brenda

    First, best wishes for a Happy New Year

    #1120049
    David
    Staff
    Customer Support

    Happy New Year to you :). Did that CSS work ?

    #1120164
    Brenda

    No, it didn’t 🙁

    (Thank you for asking)

    A few other things on the Home page aren’t going right, so I’m just waiting for my designer to get back to me with what’s broken and what isn’t; then I can frame a coherent question to you.

    Thank you for following up *gives thumbs up*

Viewing 15 posts - 1 through 15 (of 23 total)
  • You must be logged in to reply to this topic.