Change colour of header and footer in Brooklyn Theme

GYGYB
Tourist
18 1 2

Hi There

I have been searching for code to change the colour of my header and footer on my Brooklyn theme store but haven't found anything that works.

I have a white background but want my header and footer to be my logo colour which is #A6987A.

Can anyone please help?

Many Thanks

Claire

0 Likes
JLbyone
Excursionist
175 17 38

@GYGYB please, provide url preview and password if its needed

0 Likes
GYGYB
Tourist
18 1 2

Hi there!

The URL to the store is:

https://vcsf-home.myshopify.com/ and the password is aughag.

Fingers crossed you can help!!

Many Thanks

Claire

0 Likes
JLbyone
Excursionist
175 17 38

@GYGYB put this at the bottom of your assets/theme.scss.liquid

.site-header {
    background-color: #a6987a;
}

 

.shopify-section-footer {
       background-color: #a6987a;
}

 

0 Likes
GYGYB
Tourist
18 1 2

Hi!

It has worked for my header but not my footer.  Heres what I pasted in:

.site-header {
background-color: #a6987a;
}

.shopify-section-footer {
background-color: #a6987a;
}

Have I done something wrong?

Thank you so much for your help with this!!

Claire :))

 

0 Likes
JLbyone
Excursionist
175 17 38

try with that:

 

.site-footer {
  background-color: #as you want;
}
0 Likes
GYGYB
Tourist
18 1 2

Hi again!

Amazing that has worked but I have a white blank now inbetween the newsletter sign up and the footer and the colour edge is touching the text.  Is there any way to fill the colour up to the newsletter sign up and maybe make that big gap smaller?

Thanks so much!

Claire :))

0 Likes
JLbyone
Excursionist
175 17 38

@GYGYB put this at bottom of assets/theme.scss.liquid

.hr--large {
    display: none;
}
0 Likes
JLbyone
Excursionist
175 17 38

and if you want to remove the last white margin at the bottom:

@_media screen and (min-width: 591px)
.newsletter {
    padding: 60px 0;
    margin-bottom: -40px;
}
0 Likes
GYGYB
Tourist
18 1 2

Thank you so much for your help, you've been amazing!

The last bit of code doesn't work though.  I lost all of the colour on my footer and it went really large and out of line.

The code above it made the gap narrower and got rid of the divider line.  Is there any other way to close the gap?

Many Thanks

Claire :))

0 Likes