Help with Narrative Theme Password Page

Solved
Highlighted
Tourist
11 0 3

Hey! 

Looking to get some help on my password page, came across a few other discussions but the solutions didn't seem to work. 

Firstly, looking to change the background image on the page. 

I already tried adding a new asset and placing this code in the theme.scss.liquid under .password-html { - but no luck.

Here is my website link, happy to DM the password to anyone willing to look: zibo.com.au

.password-html {
 background-color: transparent;
  background: url({{ 'password-page-background.jpeg' | asset_url }});
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

 

Second issue is getting the header to be transparent instead of white. 

Thanks in advance! 

 

0 Likes
Highlighted
Shopify Partner
522 58 79

Hey there @lanal24,

Welcome to the community.

Add the following code to your theme.scss.liquid file

.password-template {
 background-color: transparent;
  background: url({{ 'password-page-background.jpeg' | asset_url }});
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.password-header {
   background-color: transparent;
}

 

Hope that helps, if so, consider giving a thumbs up and Accept solution.

If helpful, please Like and Accept Solution
Want to hire me?
Contact Me At
WhatsApp or email me at umairabbascs@gmail.com
Hire me for 1) Theme coding 2) PSD to Shopify 3) Store optimization 4) SEO 5) Store setup 6) and more!
Highlighted
Tourist
11 0 3

Hey @UmairA 

 

Thanks so much for your reply, I can now see the image but the header is still white. Please see screenshot below. 

lanal24_0-1603502472870.png

 

0 Likes
Highlighted
Tourist
11 0 3

Hi @UmairA 

For reference, this is how the theme.scss.liquid now looks. Let me know if I should add or remove anything. 

Thank you so much! 

lanal24_0-1603502714647.png

 

 

0 Likes
Highlighted
Shopify Partner
522 58 79

This is an accepted solution.

Hey again @lanal24,

You are welcome. 

Just add the !important tag next to the value of the background-color like below

.password-template {
 background-color: transparent;
  background: url({{ 'password-page-background.jpeg' | asset_url }});
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.password-header {
   background-color: transparent !important;
}

 

Hope that solves your problem.

If helpful, please Like and Accept Solution
Want to hire me?
Contact Me At
WhatsApp or email me at umairabbascs@gmail.com
Hire me for 1) Theme coding 2) PSD to Shopify 3) Store optimization 4) SEO 5) Store setup 6) and more!