- This topic has 15 replies, 2 voices, and was last updated 5 years, 2 months ago by David.
-
AuthorPosts
-
January 12, 2019 at 1:08 am #779742johnzoro
i just want this grid bit on my website.
what bit of css do i need to copy and paste into “additional css”
do i need to add a shortcode on the page i want it as well
ooh also do i need to have the featured images a certain size for it to look proper
January 12, 2019 at 6:05 am #779849DavidStaffCustomer SupportHi there,
there is more to it then just some CSS, we’re looking at writing up some documentation on how to do this, if you don’t mind waiting.
As a note Tom is working on a WP Show Posts Pro update that will simplify creating this type of thing.
January 31, 2019 at 1:59 am #797372johnzoroi’ve bought wp show posts pro. is there an easy way to do it now i have upgraded?
January 31, 2019 at 8:23 am #797780DavidStaffCustomer SupportHi there,
so to begin if you log into your WP Show Posts Account, you will find a link to the Alpha version, which includes a Cards options. You can see the demos for each of the card styles here:
https://demos.wpshowposts.com/cards/
Test that out to see how its working and then let me know and ill step through how to create grid layout.
January 31, 2019 at 5:08 pm #798209johnzorook yeah i have installed wp show posts pro, but i still have the wp show posts plugin installed as well so i don’t know if that would cause any conflict.
Also I had custom css on the wp show posts plugin, so i dunno if i have to remove that
my url is https://www.greatestreviews.co.uk
January 31, 2019 at 5:20 pm #798211DavidStaffCustomer SupportBoth plugins are required. Don’t need the additional CSS – you can remove and put that somewhere safe ( if you want ).
The Polaroid card you’re using is best designed for single columns. two columns at the most if the page is reasonably wide.
The card grid in the Dispatch site is more like the Overlay card. If you want to apply that then i can have a look at the CSS needed.January 31, 2019 at 5:32 pm #798216johnzorook i have changed it to the overlay
January 31, 2019 at 5:35 pm #798219johnzorowhat css do i need to remove and do i need to add any additional css?
also i have some css in the additional css that is related to wp show posts. would that likely be css i have added myself because it’s in the additional css section? so i could remove that couldn’t i?
January 31, 2019 at 6:27 pm #798245DavidStaffCustomer SupportYes, you can remove the CSS for WP Show posts from the additional CSS.
I am not seeing the updated cards on the site. Make sure its the correct shortcode being displayed, and if it is can you clear any plugin caches you have.January 31, 2019 at 7:36 pm #798268johnzoroit’s definetly on overlay mode
i changed it to overlay 1 now
February 1, 2019 at 5:49 am #798584DavidStaffCustomer SupportCan you do the following:
1. Create a new WP Show Post List.
2. Select the Cards: Overlay and click the Set Cards Style button.
3. Set the number of posts to 4. And the Columns to 1.Create a new test page and add the WPSP shortcode to that page. Once done link me to that page.
February 2, 2019 at 2:59 am #799384February 2, 2019 at 4:34 am #799436DavidStaffCustomer SupportCool, so can you edit that WP Show List and go to the More Settings Tab. In the Section HTML Classes Field add:
wpsp-grid
Then add this CSS:
@media (min-width: 600px) { .wpsp-grid { display: grid; } } @media (min-width: 900px) { .wpsp-grid { grid-template-columns: repeat(8, 1fr); grid-template-rows: 1fr auto; } .wpsp-grid article:first-child { grid-column: 1 / 5; grid-row: 1 / 4; } .wpsp-grid article:nth-child(2) { grid-column: 5 / end; grid-row: 1 / 2; } .wpsp-grid article:nth-child(3) { grid-column: 5 / 7; grid-row: 2 / 4; } .wpsp-grid article:nth-child(4) { grid-column: 7 / end; grid-row: 2 / 4; } } @media (max-width: 899px) and (min-width: 600px) { .wpsp-grid article { grid-column: span 4; } .wpsp-grid article:nth-child(3), .wpsp-grid .wp-show-posts article:nth-child(4) { grid-row: 3; grid-column: span 2; } } .wpsp-grid.wpsp-card .wp-show-posts-single { margin-bottom: 0 !important; }
Once you have done that you add that Shortcode to a Header Element:
https://docs.generatepress.com/article/header-element-overview/
This will allow you to display it across the top of the content.
February 2, 2019 at 10:40 pm #800012johnzoroCAn i use it in sections?
February 2, 2019 at 10:48 pm #800014johnzorook i think it’s working but my featured images are too small so i’ll probably have to go over each one and make them bigger.
also it seems to have a black overlay on them?
-
AuthorPosts
- You must be logged in to reply to this topic.