Make password page footer transparent in Dawn theme

Store Design
,
1

Hi!

I would like to make my password page footer transparent so my image would cover the entire page. The header is already transparent and fixed but can’t figure a way to make the footer transparent.

Thanks in advance!

Screenshot 2023-08-22 at 00.54.54.png
Screenshot 2023-08-22 at 00.54.54.png1244×400 29 KB

2

Hi @tae0207 ,

This is David at SalesHunterThemes.

I read your problem and it seems that. Would you please share your website URL.

if your website is password protected then also provide the password.

David | SalesHunterThemes team.

3

theathelite.co

4

Hi @tae0207 ,

This is David at SalesHunterThemes.

Thank you for your question.

You can try to follow these steps:

Go to Online Store → Themes → Actions → Edit code.

Go Assets folder → base.css file.

Add this following code at the bottom of page.

.shopify-section-main-password-footer .password__footer {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  background: transparent;
}
.shopify-section-main-password-footer .password__footer .list-social{
 background: white;
}

David_SHT_0-1692701086111.png
David_SHT_0-1692701086111.png2056×1594 162 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Hope this can help.

David | SalesHunterThemes team

5

Hi @tae0207
This is David at SalesHunterThemes.

You can try to follow these steps:

Go to Online Store → Themes → Actions → Edit code.

Go Assets folder → base.css file.

Add this following code at the bottom of page.

.password . password__footer {
    --color-foreground: 255,255,255;
    position: absolute;
    bottom: 0;
    width: 100%;
    background: transparent;
    z-index: 99999;
}

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Hope this can help.

David | SalesHunterThemes team

6

These codes don’t work unfortunately

7

Hi @tae0207 ,
The code I gave you has an extra space. Sorry it didn’t work.

You can try again:

.password .password__footer {
    --color-foreground: 255,255,255;
    position: absolute;
    bottom: 0;
    width: 100%;
    background: transparent;
    z-index: 99999;
}
1 Like