Jump to content

Change Footer Section background on ONLY one specific page of website

Go to solution Solved by Beyondspace,

Recommended Posts

Hello SQSP forum, 

Please help me  help get a specific page on my website to have a different colored footer section than the rest of the website. On the LOADED page of the website (SHOP nav/Loaded), I want to use a green gradation background image (similar to the header on this page).  I was able to use CSS to change the header to the green gradation background image I imported, but can't find a good css solution for the footer section.  The footer has two sections.  The 2nd lower section now is a red image gradation that is on all the website's pages. 

The website password = peak 

For reference - You can also check this Loom video link (free to view): https://www.loom.com/share/0422adc46a0c4c1d917b34c0e67664cf

Thank you,

Freed 

Screenshot 2023-01-15 at 12.51.01.png

Screenshot 2023-01-15 at 12.55.08.png

Link to comment
5 hours ago, Freed2023 said:

Hello SQSP forum, 

Please help me  help get a specific page on my website to have a different colored footer section than the rest of the website. On the LOADED page of the website (SHOP nav/Loaded), I want to use a green gradation background image (similar to the header on this page).  I was able to use CSS to change the header to the green gradation background image I imported, but can't find a good css solution for the footer section.  The footer has two sections.  The 2nd lower section now is a red image gradation that is on all the website's pages. 

The website password = peak 

For reference - You can also check this Loom video link (free to view): https://www.loom.com/share/0422adc46a0c4c1d917b34c0e67664cf

Thank you,

Freed 

Screenshot 2023-01-15 at 12.51.01.png

Screenshot 2023-01-15 at 12.55.08.png

Can you share your URL so I can take a look?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
2 hours ago, Freed2023 said:

Hello, Thanks for your reply.  Sorry, I forgot to share the URL.  

The website is = https://carrot-disc-nsp7.squarespace.com/

The Password = peak

Try adding to Home > Design > Custom Css

#collection-63c064f3d5f3d05d35932987 section[data-section-id="63c064e1d5f3d05d359326af"] .content img {
  visibility: hidden;
}
#collection-63c064f3d5f3d05d35932987 section[data-section-id="63c064e1d5f3d05d359326af"] .content-fill {
  background: blue;
}

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

My testing

image.thumb.png.8825ec1233630b7bfbe4d60c537185c8.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Hello Beyondspace, 

Thank you so much for the code. It works!

I did find one issue. When I try a simple color change like your blue color, the results were great.  But when I tried my imported background gradation image (green/orange color), I found that the background image file I inputed into the css showed on the screen but was not extending fully to the right side of the of image block.  I am not sure why this is happening. Do you have any suggestions on what I should check to solve this issue?

Check the attached image for an example of what the webpage looks like.   

Best, 
Freed

Issue Screenshot 2023-01-17 at 1.53.52.png

Link to comment
  • Solution
On 1/17/2023 at 2:06 PM, Freed2023 said:

Hello Beyondspace, 

Thank you so much for the code. It works!

I did find one issue. When I try a simple color change like your blue color, the results were great.  But when I tried my imported background gradation image (green/orange color), I found that the background image file I inputed into the css showed on the screen but was not extending fully to the right side of the of image block.  I am not sure why this is happening. Do you have any suggestions on what I should check to solve this issue?

Check the attached image for an example of what the webpage looks like.   

Best, 
Freed

Issue Screenshot 2023-01-17 at 1.53.52.png

Try adding some additional code to our css code

background-repeat: no-repeat;
background-size: cover;

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.