- This topic has 7 replies, 2 voices, and was last updated 3 years, 4 months ago by David.
-
AuthorPosts
-
December 15, 2020 at 2:33 am #1581181Ayham
Hello,
Is it possible to style the single blog post layout to look like the example in the link?
https://ahrefs.com/blog/competitor-analysis/
I know I can set the display to 3 columns by choosing the ‘sidebar|content|sidebar’ layout. The goal is
1. To make the left sidebar a ‘table of contents’.
2. The right sidebar to have social sharing icons and the sign up to news letter.
3. Make both sidebars floating.I would appreciate any directions/articles that can help with that.
cheers
December 15, 2020 at 7:25 am #1581630DavidStaffCustomer SupportHi there,
first of you will need to set your Customizer > Layout > Sidebars >>> Single Post Sidebar Layout to Sidebar / Content / Sidebar.
Set the sidebar widths to around 20%.
Then adjust your Customizer > Layout > Container width so you’re happy with the layout.Then simply add your Table of Contents plugin widget to the left sidebar and your other widgets to the right sidebar.
Once thats done, try adding this CSS to make the two sidebars sticky:
/* Stick sidebars */ @media(min-width: 769px) { /* stick right sidebar */ .inside-right-sidebar, .inside-left-sidebar { position: -webkit-sticky; position: sticky; top: 60px; } }
December 18, 2020 at 2:27 am #1585520AyhamHello,
Thanks for that. The sidebars display and show the table of contents as described.
But, I couldn’t get the sidebars to float. Would there be another tweak I can try?
May I add one question related to this here too?
I want to apply the sidebar|content|sidebar lay out only to the blog posts. I use a learning management system that publishes content as posts, for which I want to maintain the content only layout with no sidebars.
What CSS can I use to do that?thanks!
December 18, 2020 at 3:46 am #1585611DavidStaffCustomer SupportCan you share a link to your single post and a link to one of the posts generated by the LMS?
December 18, 2020 at 5:06 am #1585703AyhamThanks for responding so fast!
I am providing the links in the private information below.
December 18, 2020 at 6:37 am #1585833DavidStaffCustomer Support1. Can you go to Customizer > General and change the Structure to Flexbox. This should fix the sticky sidebar issue.
2. You can use a Layout Element to change the sidebar layout for specific posts/post types:
https://docs.generatepress.com/article/layout-element-overview/
Set your display rules to your courses posts type.
December 18, 2020 at 7:47 am #1586086AyhamOh wow. That did it. Man that’s fantastic. I had no idea I could do that sorry for taking your time.
Both issues resolved.
Cheers
December 18, 2020 at 8:16 am #1586122DavidStaffCustomer SupportNo apologies necessary – really happy to be of help!
-
AuthorPosts
- You must be logged in to reply to this topic.