Add a hook to add a css class after header and before footer

Hi Kevin,

You can set your CSS selector to have .site-content at the beginning which should denote that the CSS should target only the site content and not the Header and the Footer.

If you can provide the link to the site you wish to apply the CSS to, and the specific CSS, maybe we can assist you if you prefer.

Hope this clarifies. Kindly let us know :)

I cannot use .site-content because that class is already used for container with width of 1300px. I want .site-content to be inside a full width container so I need css above .site-content class. However, there is nothing above it so I want to add it with hook.

If you look at the example page, current .site-content is not full width. I want to keep that but want to add full width container so I can have full width with transparent background but keep the content in the middle within the container width of 1300px.

I hope that makes sense.

This is the structure of the main content: https://share.getcloudapp.com/YEur0x7G

As shown, the .site-content is within another div still, .site.grid-container.container.hfeed

.site.grid-container.container.hfeed width can be controlled through Appearance > Customize > Layout > Container through the Container Width, whereas if you make a Layout Element and set a Container Width there (ex: https://share.getcloudapp.com/jkuvN5zv) the max width would be applied to .site-content.

So in essence, what you can do is set the width in Appearance > Customize > Layout > Container to 2000px, and then create a Layout Element setting the width to 1300px.

You can then set a color to the .site.grid-container.container.hfeed.

Otherwise, if you really want to enclose the Content inside another div, you may do this through a Hook Element.

Hope this helps! :)

I see what you mean but I have to keep container width as 1260px in layout - Container as I have to keep header and footer within that width. Another reason is we already have pages that are using container width so changing that to 2000px does not work.

Is there a way to add a container above site.grid-container.container.hfeed and css that with

width: 100%;
background-color: red;

so that 1260px container is enclosed inside the full width red box?

This needs to be done on system generated pages like cart, checkout...etc.

You may create two Hook Elements.

One with HTML:

<!-- my open div -->
<div class=“my-new-div”>

Example: https://share.getcloudapp.com/Z4u78OLP

Also see: https://share.getcloudapp.com/qGu7LkdA

Then, hook it to generate_after_header for instance.

The other with:

<!-- my close div -->
</div>

hooked to generate_before_footer.

Example: https://share.getcloudapp.com/12ugZwyz

Then, use the new div and add CSS to it.

Hope this helps! :)

That worked..however, I have to exclude this hook from

Main Page
Pages

but when I do that, it's also excluding pages that systems generates (like cart page, checkout page)
I only want to exclude from pages that I created in wordpress pages.

How do I do that without excluding individual pages?

Thank you.

Hi there,

you will need to set the specific locations you require. eg.

Posts > All Posts
Archives > All Archives
Page > Cart
Page > Account
Page > Another Page.

Thank you..I was planning to do it the other way as it's less

Include on extire site
exclude on main page
exclude on pages (I created)

any way to do it this way?

Thank you.

Yes you can exclude if you wish.
Its better to choose what is less though.

If there are less pages to Exclude from the Entire Site then that is good.