Topic: Sidebar full length of pages – i.e. to right (or left) of header and footer?

David
June 1, 2023 at 8:16 am
OK, so this may take a few trials and errors.

1. edit the: Full length sidebar hook element #2 element.

Change its content to:
```
<?php get_sidebar( 'right-sidebar'); ?>
</div>
```
Change its hook to generate_after_footer

Check the Execute PHP option.

2. Delete the Full length sidebar block element hook as for now its not required.

3. Ih the Customizer > Layout > Sidebars remove the Right Sidebar so its just the content.

What this should give us is:

1. a div.original-site wrapper
2. in the root if that wrapper it will be:
– Site Header
– Main Container
– Sidebar

Once thats done we can look at CSS grid to make the layout
GabiClayton
June 1, 2023 at 12:28 pm

I’ve now done that through #3.

Now it has a main header, then the content without a sidebar, then the footer, and below the footer the content that should be/will be in the full-length sidebar – with some changes.

David

June 1, 2023 at 12:47 pm

OK.
Try this CSS for the layout:

.original-site {
    margin: auto;
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 1fr 300px;
    grid-auto-flow: colum;
}
.original-site > * {
    grid-row: auto;
    grid-column: 1;
}
.original-site > .is-right-sidebar {
    grid-column: 2;
    grid-row: 1 / -1;
    width: 100%;
}

It will. need some tweaking and we will need to talk about what happens on mobile….

GabiClayton
June 1, 2023 at 2:06 pm

I put the CSS in and the sidebar is there going from the top to the bottom of the pages, next to the header and footer as I was hoping for.

But the content of the pages starts after the content of the sidebar is passed.

David

June 2, 2023 at 3:45 am

Errr… had a brain freeze there i think.
Remove that CSS and try this:

.original-site {
    max-width: 1400px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr 300px;
    grid-template-rows: 80px auto;
    grid-template-areas: 
    "header aside"
    "main aside"
    "footer aside";
}
.original-site #masthead {
    grid-area: header;
}
.original-site #page {
    grid-area: main;
}
.original-site .site-footer {
    grid-area: footer;
}
.original-site #right-sidebar {
    width: 100%;
    grid-area: aside;
}

GabiClayton
June 2, 2023 at 7:06 am

That worked. Thanks!

Because the CSS was added in customizer, I don’t need to worry about theme updates losing it, right? So I don’t need to use a child theme like in the ‘old days’?

Gabi
GabiClayton
June 2, 2023 at 10:18 am

And, David you wrote:
“Once thats done we can look at CSS grid to make the layout”

How do I get the ten most recent posts (of any category) in a two-column layout to the left of the sidebar with a featured image (smaller/thumbnail?), a date, a title (linked to the post), and up to 50 words. Using GenerateBlocks I assume, but what code in CSS or ?

Also you wrote:
“It will. need some tweaking and we will need to talk about what happens on mobile….”

It looks like in mobile and tablet previews that in pages and in posts the sidebar completely disappears. It would be good if the content of the sidebar could come at the end of the page content.
David
June 3, 2023 at 2:57 am
OK. so:

1. the CSS in the Csutomizer > Additional CSS gets saved in your database, so it is safe there and theme updates won’t affect it.

2. Mobile layout. Add this CSS to stack the items:
```
@media(max-width: 768px) {
    body .original-site {
        grid-template-columns: auto;
        grid-template-areas:
        "header"
        "main"
        "aside"
        "footer";
    }
}
```
3. The 2 column post layout.
Go to Customizer > Layout > Blog and check the Display Posts in columns:

https://docs.generatepress.com/article/blog-overview/

4. Designing the post card, you can do it with a GP Block Element – Content template and build it with GenerateBlocks:

https://docs.generatepress.com/article/block-element-content-template/

Let me know how you get on
GabiClayton
June 3, 2023 at 8:17 pm

I think it is close. Sorry I took a while to get back to this.

I realized that I need the homepage to not only be recent post content, so I changed it to a static page instead and put the posts on the page. That gives me more options.

One thing I’m seeing is that because the advertisements which are rotating images in two places in the sidebar are two different lengths, the length of the sidebar changes. So now the content on the main part of the page seems to be centered to the length of the sidebar, and that means it is not pinned to the top of the page. It jumps. Is there a way to fix that?
David
June 4, 2023 at 3:38 am

OK, i made an edit to the CSS here.

ie, i add this line to the first CSS rule:

grid-template-rows: 80px auto;

That should ensure the header doesn’t grow to fill up free space.
GabiClayton
June 4, 2023 at 8:54 am

That looks like it worked, David. Thank you!

I still need to show it to one other person here who works on the site also.

But unless he sees something that I didn’t think of, I think my only question is what files do I copy to the main olyarts.com website through file mananager once I activate GeneratePress theme and Premium so that I get all the work to get here over to that which has had things added since I created the staging site?
David
June 5, 2023 at 3:28 am

Glad to hear that.
We can only provide some advice on migrating sites as theres no fixed rules. Could you raise a new topic for that ? Then we can this topic focused on the layout 🙂
GabiClayton
June 5, 2023 at 2:22 pm

I will start a new topic for that when it is closer to time to switch to the main side.

Sticking to layout 🙂 I need the sidebar color to be #f3f3f3 all the way to the bottom of the page, to the right of the footer.

And in the sidebar, I may have to get the Events plugin to tell me how to get the background of their mini calendar widget to also be #f3f3f3 unless you know how to do that?

I’m not sure if you can help me get a post slider under the menu, and as wide as the content but not into the sidebar or not? When I just tried it put it in a weird place. (If you want me to put the one I tested with in so you can see, let me know.) I haven’t settled on which post slider to use yet but I need whichever — if possible — to be under the header/menu like the original site has (https://olyarts.org/). Otherwise It could be just under the header with no space between the bottom of the header and the top of the slider images.

You have no idea how grateful I am for all the support I am getting with this.
David
June 6, 2023 at 3:38 am
OK.
Sidebar Colors
In Customizer > Colours you can set the Sidebar Widget backgrounds and text colors. That should apply to the Events plugin too.

But you will need this CSS to extend that background color to fill all the sidebar – not just the widgets.
```
.is-right-sidebar {
    background-color: #f3f3f3;
}
```
For your post slide try the before_conent_hook that will place it inside the content container so it will maintain the same width.

( Happy to be of help )
GabiClayton
June 8, 2023 at 8:10 pm

Thanks, the sidebar color worked great.

I don’t know how to do or use the before_conent_hook.
And I don’t know if the slider has to be with no space after the header, but less space than now.
See this – pink notes from me:
https://olyarts.org/oly-arts/wp-content/uploads/2023/06/OLYARTS.com-staging-06-08-2023.jpg

And I need less space on the left on the recent posts under the slider so that the space is the same as the distance from the left edge of the slider and the left edge of the posts.
I can’t figure out why there is so much space there.
David
June 9, 2023 at 2:55 am
OK, before your slider there is a Spacer Block which is adding the extra space above it. Delete that.

For the left hand space.
Add this CSS:
```
.wp-block-latest-posts__list {
    margin-left: 0;
}
```

Viewing 16 posts - 17 through 32 (of 40 total)

← 1 2 3 →

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Sidebar full length of pages – i.e. to right (or left) of header and footer?