Advice needed: Change section page background colour

Store Design
1

I have recently added a dedicated newsletter page thanks to some simple code which is as follows:

{% section ‘newsletter’ %}

footer { display:none; }

I’d like to remove the white section at the bottom of the page so it’s the same colour as the newsletter section (black).

How can I do this?

Remove WHITE section at the bottom.jpg
Remove WHITE section at the bottom.jpg1890×926 41 KB

1 Like
2

@Underd0g
Welcome to the Shopify community!
Thanks for your good question.

Please share your store URL.
So that I will check and let you know the exact solution here.

3

https://studio-underd0g.myshopify.com/

Specific page: https://underd0g.com/pages/newsletter

4

@Underd0g Go to assets/theme.css and past below css at bottom of file.

.newsletter-section
{
background-color: #fff !mportant;
}
5

Hello,

Unfortunately that has not changed anything.
Edit: I noticed you missed out the ‘i’ in important so have updated the code, however this appears to have changed the BLACK Newsletter section background to WHITE and now the text is not visible.

Thanks,
Richard

6

@Underd0g You have to change the white colour to whatever colour you needed. And you have to change the font colour to whatever you needed.

7

@Underd0g , Richard, do this to fix it in 20 seconds:

  1. In your Shopify Admin go to: online store > themes > actions > edit code
  2. Find Asset > theme.css and paste this at the bottom of the file:
.site-footer__section--newsletter{
    background: #ffffff !important;
}

.site-footer__section--newsletter *{ 
    color: #000000 !important;
}

#ffffff = background color
#000000 = text color

Kind regards,
Diego

8

Hi @Underd0g ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css->paste below code at the bottom of the file:
.site-footer__section--newsletter{
    background: #ffffff !important;
}
.site-footer__section--newsletter *{ 
    color: #000000 !important;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

Best regards.

9

Thank you everyone for your help!

As the newsletter is added as a section and not part of the footer I found this to be a good solution:

Online Store->Theme->Edit code
Asset->/theme.css->paste following code at the bottom of the file:

.newsletter-section
{
background-color: #fff !important;
color: #000 !important;
}

Instead of getting rid of the white section at the bottom, it changed the whole page to white with black text. I am happy with this solution.