How to give the header and footer a gradient with a theme.JS type theme

Store Design
1

I am not sure the exact type of theme I have but I do not have the theme.scss.liquid asset to edit. The only theme options I have to edit are theme.liquid and theme.js

Gradient sequence is to right #0a0b08, #111207, #171805, #1d1c02, #242000, #2c2400, #352800, #3f2b00, #4a2d00, #562f00, #633000, #713000, #7f2e03, #8e2b0c, #9d2717, #ac1f22

Any help is appreciated.

2

I doubt you do not have any styleseet assets, there must be something with a CSS extension.

It’s possible to add a tag in your HTML, but I doubt that your theme author put your entire stylesheet there.
Can you share a preview link to your store?

Finally, you can add somthing like this to your, theme.liquid Layout:

This will apply gradient to your entire site, but it’s necessary to know your header and footer elements classes to apply it only to them.

3

My site is https://geosfinewineandchampagne.com/ and the password is geo

Let me know if you have the code for header and footer to apply it to them.

Thanks so much

4

I do have a styles.css.liquid file if it could go there to do this.

5

Yes, paste this to the very bottom of this file:

#pageheader,
#shopify-section-footer{
    background: linear-gradient(
        to right,
        #0a0b08, #111207, #171805, 
        #1d1c02, #242000, #2c2400, 
        #352800, #3f2b00, #4a2d00, 
        #562f00, #633000, #713000, 
        #7f2e03, #8e2b0c, #9d2717, #ac1f22
    );
}

.logo-area {
    background: none;
}

And then you’d need a PNG logo with transparent background (or SVG, even better) for it to look perfect.