How to Change the Background Colour of One Page + Remove All Header and Footer Areas Completely

airmagic
New Member
12 0 0

Hello,

I am trying to change the colour of a single page as well as remove the footer area. When I disable the visibility of the footer, its area remains visible. There also seems to be a gutter just above the footer that also seems to be present. I would like to remove that as well. To summarize, I want a blank page without headers, footers or invisible gutters that I can colour the page background to #282828.

Thank you

0 Likes
JHKCreate
Shopify Partner
2490 434 591

Hi @airmagic 

Use display:none; instead of visibility, as it will remove the block compared to just hiding it and keeping the place it's taking.

As for the background color, can you share a link so we can provide support on that?

 

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
0 Likes
Natztech
Shopify Partner
615 163 410

@airmagic  
Please provide website url and if your store is password protected then also provide password So I will check and provide a solution here.

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
0 Likes
airmagic
New Member
12 0 0

Hi JHKC,

Sorry, a little lazy typing. I have indeed used display.none for the footers and headers. But the footer area remains. 

Here's the link I have been refreshing to check code:

https://airmagic-special-effects-fireworks.myshopify.com/admin/themes/81008099371/editor?previewPath...

Background Colour:

Following some community question threads, I have tried using page handle to make this specific page a specific color but with no luck. 

 

 

0 Likes
Ninthony
Shopify Partner
1794 258 706

You're sending us a link to your admin, we can't view that without access to your themes. Go to Actions > Preview on the theme you want us to see if this isn't a live theme and click Share Preview at the bottom to generate a preview link you can share with us. If it is a live theme, provide us with your myshopify.com store url and a password if it's password protected, which can be found in Online Store > Preferences > Password Protection.

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
airmagic
New Member
12 0 0

https://airmagic-special-effects-fireworks.myshopify.com/

The theme is live and the store is not password protected. 

The store's URL is shopairmagic.com.

Is this what you are looking for?

0 Likes
airmagic
New Member
12 0 0

Hello,

I'm not sure where you are at with your assessment but I am thinking of changing the page's template to what I'm ultimately trying to accomplish with the page. If there are no issues with this I will make the change.

I am going to be unavailable from 1:30 to 2 pm (currently 1:15 Eastern) for a meeting.

0 Likes
Ninthony
Shopify Partner
1794 258 706

What page do you want the header and footer not visible? This will do it for the entire site at the bottom of the theme.scss.liquid file in your assets folder:

.site-footer {
    display: none;
}

#shopify-section-header {
    display: none;
}
If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
airmagic
New Member
12 0 0

I do not want to change the whole site. I want only this page to have no headers or footers:

https://shopairmagic.com/pages/instagram-linktree

https://airmagic-special-effects-fireworks.myshopify.com/admin/themes/81008099371/editor?previewPath...

More importantly, I want the page color for this page only to be #282828.

0 Likes