Home › Forums › Pro Support › How to create a custom list design
- This topic has 8 replies, 2 voices, and was last updated 3 years, 8 months ago by
Tom.
-
AuthorPosts
-
September 25, 2019 at 3:02 pm #11293
Bas
ParticipantHi 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?
September 25, 2019 at 5:45 pm #11297Tom
KeymasterHi there,
Have you tried the following?:
1. Setting the columns to two
2. Enabling the featured post option
3. Setting the images to align leftYou 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 🙂
September 25, 2019 at 10:02 pm #11298Bas
ParticipantHi, 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.
September 26, 2019 at 4:45 pm #11312Tom
KeymasterWhat 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; }
September 27, 2019 at 3:23 pm #11320Bas
ParticipantHi 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.September 27, 2019 at 3:37 pm #11321Bas
ParticipantAlso 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.September 27, 2019 at 7:47 pm #11325Tom
Keymaster1. 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
to0px
, it should be better.Not too sure what you mean about being cut off? The small thumbnails?
September 28, 2019 at 3:00 am #11326Bas
ParticipantFixed 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 !
September 30, 2019 at 4:55 pm #11335Tom
KeymasterNo problem 🙂
-
AuthorPosts
- You must be logged in to reply to this topic.