Full width background with sidebar

Hi Shivam,

Setting for content area's background isn't customizable through Gutenberg editor's UI yet.

But you can set a background to the content area of the page using this CSS:

div#page {
background-color: red;
}

I want to set a specific section of the area with background, not a complete section... Similar to how we create full-width block with generate blocks (click here)

The reference site's structure is doable with GP + GB but there's significant customization requiring JS that's outside of our scope, unfortunately.

But here's the simplified idea behind it.

The layout itself technically has no sidebars like WordPress does.

The sidebar is actually a sibling of the contents. It's in the same parent element.

The difference is, there's a script that switches the "sticky sidebar" between position:absolute; and position:fixed; to make the sidebar overlay the contents.

The rest of the contents are actually on full viewport width but have reserved a space for the overlaying sticky sidebar's vertical track.

Unfortunately, I am not good at CSS and JS, I will wait till WordPress introduce something like this 😞

Not exactly sure if WordPress core will implement something like this.

This is kind of a niche feature meaning the majority of users don't really use it. Your reference site actually seemed customized too so you may want to consider hiring a custom front end developer.

Hey Elvin, can you check ou this webpage - https://amazon-affiliate.eu/en/how-to-start-a-blog-beginners-guide/

They have similar structure that I want on my blog. ( Sticky Table of content in right side area along with Full-width background for few sections)

Hi there,

as Elvin said that really requires Custom Development. It requires nesting containers inside each other, specifying fixed widths of each inner container with set amount of right padding to accommodate the fixed navigation.

You would need to find a developer who has HTML, CSS and probably Javascript skills to do that.

Hey team,

First of all, don't get irritated from my continuous question on the same topic...

I have figured out a workaround of what I wanted:

1. Firstly I added my content under a Gnerateblock container at the desired place in my post. (Here is the page URL)

2. Then I gave it a class name (Floating_sidebar)

3. Finally I added the following CSS code and it worked:

@media (min-width:900px) {.Floating_sidebar{
float:right;
top: 25%;
margin-right: -320px;
position: -webkit-sticky;
position: sticky;}}

However, the only problem I have now is the unbalanced white space. (Check this screenshot for see what I mean)

Is there any way to keep similar whitespace on both sides of the content?

In the meantime, I have also found another site with a similar layout with no sidebar. (Here is the link)

Try unsetting the left margin of the content container.

#content {
    margin-left: unset;
}

This way the whole area moves to the left a bit. It's not going to be perfectly equal but it looks a bit better.

If you want adjust it further, adjust the negative margin-right value you've added to the floating sidebar. Consider using percentage value.

Elvin, this CSS also adjusted the full width background. (Here is what I mean)

I want just the content similar to this site.

Elvin, this CSS also adjusted the full width background. (Here is what I mean)

I want just the content similar to this site.

Yes, that's exactly the issue why the DOM structure has to match your reference site instead of what you currently have.

That's actually part of the reason why I said:

The sidebar is actually a sibling of the contents. It’s in the same parent element.

And why David said:

It requires nesting containers inside each other, specifying fixed widths of each inner container with set amount of right padding to accommodate the fixed navigation.

I see that you're using position: sticky; and float and there's a limitation to it. position: sticky; won't cut it because you can't use left: or right: CSS property to position it properly. which is why devs use position: fixed; when doing sticky behavior.

And if you inspect your reference site closely, you'll see this toggle happening.
https://share.getcloudapp.com/2NuPJNAj

This reasoning is why I mentioned the use of position: fixed; even when I know there's position: sticky;. :D

Ideally, you can set the CSS up to something like this:
https://share.getcloudapp.com/BluDjlNg

But you really have to use script to do the sticky. (to change the top property value)