- This topic has 13 replies, 3 voices, and was last updated 1 year, 8 months ago by
David.
-
AuthorPosts
-
May 14, 2019 at 7:37 am #899117
Hasan
Hi,
I want to show my posts on the home page on 3-4 column masonry layout as it is currently showing (on 2 column). Also I want to show a blog archive page with just single column and full post view.
I am currently using the default 1100px layout. My single post and blog archive content width needs to be exactly 700px, the rest could be assigned to the right sidebar.
For the home page, I want to use a wider layout, so I can show the posts on 3 or 4 column masonry layout.
How can I do that? Thanks!
Regards,
HasanMay 14, 2019 at 8:44 am #899183Leo
StaffCustomer SupportHi there,
Not quite sure if I understand.
The home page is the blog page which you can modify with the settings in the customizer:
https://docs.generatepress.com/article/using-columns-in-the-blog/If you want to use different layouts on other pages, check out the filters/examples at the bottom of the linked above.
To set different widths, this should help:
https://docs.generatepress.com/article/layout-element-overview/#content-1Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/May 16, 2019 at 2:33 am #901175Hasan
Hi Leo,
First thing I need is showing the blog archive on a separate page in addition of the homepage with different layout. Can you please tell me how to do that? Seems like can’t find any option for that. Is there any short code to do that?
Best regards,
HasanMay 16, 2019 at 4:45 am #901310David
StaffCustomer SupportHi there,
the simplest way to add an ‘archive’ grid to a static page is to use a plugin like this:
Its another of Tom’s plugins – the free version will do what you require.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/May 16, 2019 at 7:56 am #901626Hasan
Thanks David!
I tried the plug-in, but it is not producing the same layout as the one page archive page that GP will produce.
Since GP has the ability to output a single column archive, is there any other way to do this without using the plug-in?
Here is the page that I generated with the plug-in, which is not the same as the single column archive that GP produces: https://snapbangladesh.com/stories/
Any idea? Thanks!
May 16, 2019 at 8:02 am #901634Leo
StaffCustomer SupportYou’d need a custom solution without a plugin unfortunately.
You can definitely create one column using Show Posts though.
Where can I see the show posts list currently?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/May 16, 2019 at 9:44 pm #902119Hasan
Here is the list made with Show Posts: https://snapbangladesh.com/stories/
May 17, 2019 at 3:32 am #902363David
StaffCustomer SupportSo how do you want the WP Show Posts list to display? Like the 4 column grid you have on your Home Page?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/May 17, 2019 at 11:33 pm #903281Hasan
I want the archive layout to be the same as the single page here except the comment section, coming one after another in a separate card for each post: https://snapbangladesh.com/barisal-ferry-3/
I was able to twik the show posts setting further and make it almost similar, except the posts are joined together, while I want them to appear on separate cards.
How can I do that?
Thanks!
May 18, 2019 at 5:13 am #903425David
StaffCustomer SupportTricky one – this CSS should work specifically for that page:
.page-id-33.separate-containers .inside-article { padding: 0; background-color: transparent; } .page-id-33 .wp-show-posts-inner { padding: 40px; } .page-id-33 .wp-show-posts-single { background-color: #fff; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/May 18, 2019 at 5:42 am #903438Hasan
That worked, thanks!
How can I reduce the gap between two posts about 20 px?
May 18, 2019 at 5:44 am #903443David
StaffCustomer SupportThis CSS:
.wp-show-posts:not(.wp-show-posts-columns) .wp-show-posts-single:not(:last-child) { margin-bottom: 20px; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/May 18, 2019 at 5:49 am #903449Hasan
Awesome! That makes the page as I wanted.
Thank you so much!
May 18, 2019 at 6:20 am #903470David
StaffCustomer SupportYou’re welcome
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.