[Support request] Two Sidebar Layout

[Rebecca]

Hello,

I’m wondering if there is a way to use Elements and/or hooks to achieve the attached layout. I’m testing with the sidebar/content/sidebar layout, but would like the left sidebar to be below the featured image, and the right sidebar to be aligned with the featured image. I’ve attached a screenshot from another theme I’m testing (but want to stick with GP!). Thanks!

Here is a link to the image as I’m not sure the IMG tag worked: https://app.box.com/s/ht330l5ihessvh05m4q3y7gc1r1n7tc4

[David]

Hi there,

not sure, as thats a tricky one – if it is possible, will this be across the entire site ? Including archives ? ( please say no that last one lol )

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

[Rebecca]

Hi David,
Ha! No this would only be for posts…

[David]

OK, so it will probably take some tweaking but try this:

1. Activate the Blog Module in Appearance > GeneratePress

2. In Customizer > Layout > Blog -> Featured images –> Posts tab set the Location to Before Title.

3. In Customizer > Layout > Sidebars – set your posts to just Content / Sidebar

4. Create a new Hook Element.
4.1 Add this to the Hook:

<?php get_sidebar( 'left'); ?>

4.2 Select the generate_after_content hook.
I choose this hook as i assumed on mobile you would want the left sidebar below the post content.

4.3 Check Execute PHP.

4.4 Set the Display Rules to Posts > All Posts.

5. Add this CSS to your site to create the CSS grid layout:

/* Force left sidebar to fill the column */
.single-post .inside-article .is-left-sidebar {
    width: 100%;
}
/* remove padding from left sidbar widgets */
/* because the sidebar is inside the entry content */
.single-post .inside-article .is-left-sidebar .widget {
    padding: 0;
}
/* Apply a CSS Grid to create the article layout */
@media(min-width: 769px) {
    .single-post .inside-article {
        display: grid;
        grid-template-columns: 300px 1fr; /* Adjust 300px for sidebar width */
    }

    .single-post .inside-article>* {
        grid-column: 2;
    }

    .single-post .inside-article .featured-image {
        grid-column: 1 / -1;
    }

    .single-post .inside-article .is-left-sidebar {
        grid-column: 1;
        grid-row: 2 / 1000;
        width: 100%;
        padding: 0;
    }
}

If that works, and i can see it on your site then i can help with tweaking it.

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

[Rebecca]

Thanks, that worked very well! I’m still formatting the actual sidebar content — is that available through widgets only? I’m getting errors using the Generateblocks Pro Query loop there (but that might be a separate issue I can open on that forum).

Two questions related to the overall CSS/Styling:
Is it possible to make it sticky?
When reducing the page, the right sidebar covers the content

I’ll include a link in the private area as it requires a login to view on staging.

Thanks!

[Fernando]

Hi Rebecca,

Aside from Appearance > Widgets, you can also use a Block Element – Sidebar: https://docs.generatepress.com/article/block-element-sidebar/

You can try adding this CSS to make the last widget in the right sidebar sticky:

.inside-right-sidebar {
    height: 100%;
    position: relative;
}

.inside-right-sidebar > *:last-child {
    position: sticky;
    top: 5px;
}

As for the second issue, try updating the code previously used to this:

/* Force left sidebar to fill the column */
.single-post .inside-article .is-left-sidebar {
    width: 100%;
}
/* remove padding from left sidbar widgets */
/* because the sidebar is inside the entry content */
.single-post .inside-article .is-left-sidebar .widget {
    padding: 0;
}
/* Apply a CSS Grid to create the article layout */
@media(min-width: 769px) {
    .single-post .inside-article {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 300px; /* Adjust 300px for sidebar width */
    }

    .single-post .inside-article>* {
        grid-column: 2;
    }

    .single-post .inside-article .featured-image {
        grid-column: 1 / -1;
    }

    .single-post .inside-article .is-left-sidebar {
        grid-column: 1;
        grid-row: 2 / 1000;
        width: 100%;
        padding: 0;
    }
}

[Rebecca]

Hi Fernando,

Thanks for the reply!

For the first point (using a block element for the left sidebar), I’m not sure that will work because my layout is content/sidebar, and then a grid is formed in the content area to create the left sidebar according to David’s directions above. However, let me know if I’m misunderstaning.

For the second point with code, that helped a great deal! My only question here is that the left sidebar is way too wide. I tried tweaking the 300px sidebar width in the code but it doesn’t help. How can I reduce this size? I’d actually like it narrower than the right sidebar. For example, 20% vs 30%

Thanks!

[David]

So this line:

grid-template-columns: minmax(0, 1fr) 700px;

Flip the values eg.

grid-template-columns: 250px minmax(0, 1fr);

Now you can change the 250px to whatever fixed size you want your sidebar.

Regarding a Block Element instead of a sidebar, yes, it can be done. Is there a benefit of doing so here? e.g you want a a left sidebar for your single posts, and a different left sidebar elsewhere

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

[Rebecca]

This is perfect, thanks so much!!

I’m considering the Block Element for my left sidebar because I’m getting an error using the query loop in the widget area “This block has encountered an error and cannot be previewed.”

I don’t get this error when using the query loop in a block setup.

[David]

Is that a GeneateBlocks Query Loop block? And does it work ok in the Right Sidebar ?

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

[Rebecca]

Yes it’s GenerateBlocks Pro query loop. It works fine in the right sidebar which I created using a Block. It seems to not work when creating the left sidebar under appearance->widget.

[David]

Hmmm… i wondering whether its because we’re ouputting the sidebar inside the loop. We end up with a loop inside a loop.

But lets try the BLock Element.
So step 4 above if you quick edit and save that hook element as a draft.

Then create a block element using the same Hook.
And the first thing to add to the block element is a container block, and in its Advacned > Additional CSS Class(es) add: is-left-sidebar

Then you can build inside that.

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

[Rebecca]

Yes that worked! Thank you, I greatly appreciate all of the help!

[David]

One last thing 🙂

This CSS:

.single-post .inside-article .featured-image {
      grid-column: 1 / -1;
}

change it to:

.single-post .inside-article .featured-image {
      grid-column: 1 / -1;
      padding-left: 0;
}

That will get the featured image aligned nicely.

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

[Rebecca]

Perfect!! Thanks again 🙂

[Author]

Posts