[Resolved] How to create a custom list design

Please login to receive premium support.

Support for the free plugin can be found here.

Home Forums Pro Support How to create a custom list design

This topic contains 8 replies, has 2 voices, and was last updated by  Tom 2 weeks ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #11293

    Bas
    Participant

    Hi Tom,

    Been using show posts free for a few months and just bought the Pro version 🙂
    I was hoping you could help me.

    Is it possible to achieve the following design with wp show posts as shown on the image below?

    layout design

    #11297

    Tom
    Keymaster

    Hi there,

    Have you tried the following?:

    1. Setting the columns to two
    2. Enabling the featured post option
    3. Setting the images to align left

    You may need some CSS once that’s done to perfect it. If you want to share the URL with me once it’s done, I’ll be happy to help 🙂

    #11298

    Bas
    Participant

    Hi, thanks for the fast reply.

    I allready tried your sugestions and thats where I got stuck. Can’t find where I can disable the excerpt and shrink the thumbnails

    Click here to see the result.

    #11312

    Tom
    Keymaster

    What if you do something like this?:

    #wpsp-8154 .wp-show-posts-single:not(.featured-column) .wp-show-posts-entry-summary {
        display: none;
    }
    
    #wpsp-8154 .wp-show-posts-single:not(.featured-column) .wp-show-posts-inner {
        display: flex;
    }
    
    #wpsp-8154 .wp-show-posts-single:not(.featured-column) .wp-show-posts-image {
        order: -1;
    }
    
    #wpsp-8154 .wp-show-posts-single:not(.featured-column) .wp-show-posts-entry-header {
        width: 50%;
    }
    
    #wpsp-8154 .wp-show-posts-single:not(.featured-column) .wp-show-posts-entry-header h1 {
        font-size: 20px;
    }
    #11320

    Bas
    Participant

    Hi Tom,

    Thanks for the quick reply !

    Got it almost the way I like it, with the help of your CSS as you can see here
    I have 2 more questions…

    1. – Is it possible to remove the h1 tag from the 4 smaller posts? So only the featured post has an h1 tag.
    2. – How can I align the titles of the 4 smaller posts to the top of the container, just like the featured post excerpt? Now it looks vertically centered.

    #11321

    Bas
    Participant

    Also the right side of the smaller thumbnails seems “cut off” for some reason, but I can’t seem to find where I messed up.
    Just noticed it when I applied a 3px border-radius to the thumbnails.

    #11325

    Tom
    Keymaster

    1. Ah, that’s a problem. If you need the featured post to be an H1, you might need to create two separate lists. The first would be full width with an H1, and the other would be two columns, H2 (or whatever) and with an offset of 1 in the “More Settings” tab.

    2. This seems to be coming from this CSS:

    #wpsp-8154 .wp-show-posts-entry-title {
        margin: 10px 0 20px 0;
    }

    If you set the first value from 10px to 0px, it should be better.

    Not too sure what you mean about being cut off? The small thumbnails?

    #11326

    Bas
    Participant

    Fixed the margin error.
    I searched for the multiple h1 tag removal and google says it is not necessary to have only 1 h1 tag, multiple h1’s is ok.
    About the cut off… I used the wrong selector while giving the thumbnails a border of 1px. Fixed it also.

    Thanks for your help !

    #11335

    Tom
    Keymaster

    No problem 🙂

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.