[Support request] Please help me build layout like this one?

[Trạng]

Can you help me analyze how to build a layout like this website? What theme do they use in this GP’s site library?

– How could I set up sidebar/content/sidebar with exact dimension like that site?

– Which CSS code should I add to have light box shadow effect for main content area, sidebar element?

– How can I set up left sidebar is fixed toc with minimal interface like that site? (Yes I’ve purchased fixed toc plugin)

Thank you so much! Please help!

[Trạng]

Hello is there anyone can help?

[Ying]

Hi Trang,

How could I set up sidebar/content/sidebar with exact dimension like that site?

On the page you linked, its left sidebar width is 22%, right sidebar width is 27%, Site container width is 1600px.

Which CSS code should I add to have light box shadow effect for main content area, sidebar element?

Try this CSS:

body.single.single-post div#primary{
    box-shadow: 0px 35px 40px -7px rgb(207 207 207 / 40%);
}
body.single.single-post div.inside-right-sidebar aside {
    box-shadow: 0 0 30px 0 rgb(234 240 246 / 70%);
}

How can I set up left sidebar is fixed toc with minimal interface like that site? (Yes I’ve purchased fixed toc plugin)

I’m not familiar with the plugin, not sure how it works. If you can show us what you’ve achieved, we might be able to help.

[Trạng]

Hi Ying how can I set the custom left sidebar & right sidebar for 22% & 27%? the customizer layout tool only allow me to drag progress bar from 15% 20% 25% 30% …etc… can’t adjust it in the odd numbers like 22 & 27.

Btw, does that site using “Marketer” theme in site library?

[Ying]

Can you go to customizer > general, set the Structure to Flex instead of Float?

Btw, does that site using “Marketer” theme in site library?

I can’t tell. Even it is, it’s been customized a lot.

[Trạng]

Hey it’s flexbox by default but can’t adjust flexible % for left & right sidebar 😀 the setting % is so rigid!

[Ying]

Ah, you are right, didn’t realize we’re still in the progress of adding this feature to the updates, my bad 🙂

So yes, we have to use CSS to get the exact sidebar width.

.site-content .is-right-sidebar {
    width: 27%;
}
.site-content .is-left-sidebar {
    width: 22%;
}

[Paul]

This is exactly what I need! I’ve set the right sidebar to 33% which allows me to align that portion of a page/post with a full width 3 column grid for example.

However, if I then reduce the site width to say 1100px, the right sidebar is flush with the container. What additional CSS is needed to keep the site content and wider container widths/margins consistent?

Thanks,
Paul.

[David]

Hi Paul,

can you raise a new topic and share a link to your site were we can see the issue?

[Author]

Posts