Solved

How can I change the login page layout in Spotlight theme?

RobArt98
Pathfinder
96 3 14

Hello everyone,

searching for a solution for change the Boxes

Current status

Bildschirmfoto 2023-11-03 um 08.56.20.png

 

I would like to change in this kind of style

Bildschirmfoto 2023-11-03 um 08.56.07.png

Can someone assist 🙂

 

Many thanks in advance.

Using Spotlight theme

Accepted Solution (1)
Dan-From-Ryviu
Shopify Partner
7931 1543 1574

This is an accepted solution.

I cannot help you to remove that grey line if don't check directly on your store link.

The code I sent you work well on Spotlight demo site

- Helpful? Like and Accept solution to let me know or Donate
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 7 (7)

Dan-From-Ryviu
Shopify Partner
7931 1543 1574

Hi @RobArt98 

You can try to add this code in your Online store > Themes > Edit code > Assets > base.css file 

.customer .field:hover.field:after, .customer select:hover.select:after,
.customer .field:after, .customer select:after {
box-shadow: unset !important;
border-radius: unset !important; 
}
.customer .field:after, .customer select:after {
border-bottom: 1px solid #000;
margin-left: 20px !important;
}

 

 

- Helpful? Like and Accept solution to let me know or Donate
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

RobArt98
Pathfinder
96 3 14

@Dan-From-Ryviu thanks for your solution but following issue

Bildschirmfoto 2023-11-03 um 09.28.30.png

 

Dan-From-Ryviu
Shopify Partner
7931 1543 1574

Could you share your page link?

- Helpful? Like and Accept solution to let me know or Donate
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

RobArt98
Pathfinder
96 3 14

sorry @Dan-From-Ryviu im not allowed to share the url/password

Dan-From-Ryviu
Shopify Partner
7931 1543 1574

Please try to update code like this 

.customer .field input:focus, .customer select:focus,
.customer .field:hover.field:after, .customer select:hover.select:after,
.customer .field:after, .customer select:after {
box-shadow: unset !important;
border-radius: unset !important; 
}
.customer .field:after, .customer select:after {
border-bottom: 1px solid #000;
}

 

- Helpful? Like and Accept solution to let me know or Donate
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

RobArt98
Pathfinder
96 3 14

@Dan-From-Ryviu its working but, the grey lines are still there. possible to hide this grey lines

Bildschirmfoto 2023-11-03 um 09.38.25.png

Dan-From-Ryviu
Shopify Partner
7931 1543 1574

This is an accepted solution.

I cannot help you to remove that grey line if don't check directly on your store link.

The code I sent you work well on Spotlight demo site

- Helpful? Like and Accept solution to let me know or Donate
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.