How can I make the newsletter border constantly visible in Prestige theme footer?

Store Design

Topic summary

Issue: In the Prestige theme footer, the newsletter input’s black border was only visible on hover; the goal was to make it visible at all times.

Context: Screenshots illustrated the hover vs. non-hover states. Multiple responders requested the store URL; the owner shared southclothing.store.

Proposed fixes:

  • Add CSS in theme.css to force a border: .Footer__Content + .Footer__Newsletter .Form__Input { border: 1px solid #000; } (initially placed at bottom) — reported not working.
  • Retry the same selector at the top of theme.css with !important: .Footer__Content + .Footer__Newsletter .Form__Input { border: 1px solid #000 !important; } — suggested as a stronger override.
  • Alternative CSS targeting the footer newsletter: #footer-newsletter input.Form__Input { border-color: var(–button-background); } — reported not working.

Outcome: The original poster confirmed that a solution worked, thanking the contributors. The specific snippet that resolved the issue was not explicitly identified.

Status: Resolved, no further action items noted. Attachments (images) were helpful to understand the visual problem.

Summarized with AI on February 20. AI used: gpt-5.
1

Hey,

As you can see on image first image it shows the newsletter black boarder.

On the second image you can not see the boarder.

For some reason you can only see the boarder when on hover, I would like the black boxed boarder to be visible the whole time.

Can someone help

Screenshot 2022-03-23 at 21.13.48.jpg
Screenshot 2022-03-23 at 21.13.48.jpg844×366 15.4 KB

Screenshot 2022-03-23 at 21.13.36.png
Screenshot 2022-03-23 at 21.13.36.png678×518 14.3 KB

1 Like
2

Hi,
Are you able to share you store link?

3

Hi @Trevallion ,

Please share your store URL and if your store is password protected then please provide password too.

So that we can help you.

Thank you.

4

@Trevallion

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

5

Welcome to shopify community.

Please share your store URL and if your store is password protected then please provide password too.

Thank you.

6

https://www.southclothing.store

1 Like
7

Hi @Trevallion ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css->paste below code at the bottom of the file:
.Footer__Content + .Footer__Newsletter .Form__Input {
    border: 1px solid #000;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

8

This didn’t work unfortunately

2 Likes
9

Hi @Trevallion ,

You can try paste below code at the top of the theme.css file:

.Footer__Content + .Footer__Newsletter .Form__Input {
    border: 1px solid #000 !important;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

1 Like
10

@Trevallion

sorry for that issue can you try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css ->paste below code at the bottom of the file.
#footer-newsletter input.Form__Input {
    border-color: var(--button-background);
}
11

still not working

12

this worked thank you