[Resolved] Styling blog post to look like this example

[Ayham]

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

[David]

Hi 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;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ayham]

Hello,

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!

[David]

Can you share a link to your single post and a link to one of the posts generated by the LMS?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ayham]

Thanks for responding so fast!

I am providing the links in the private information below.

[David]

1. 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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ayham]

Oh 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

[David]

No apologies necessary – really happy to be of help!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts