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

dueamici
New Member
3 0 0

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. 

Replies 4 (4)
tim
Shopify Expert
3040 170 1093

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

It's possible to add a <style> 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:

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

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.

My post solved your problem? Like it!
dueamici
New Member
3 0 0

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

dueamici
New Member
3 0 0

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

tim
Shopify Expert
3040 170 1093

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.

My post solved your problem? Like it!