How to remove the white border around an email form?

Store Design
, , , ,
1

Hi,

I am using the spotlight theme and i want to remove the white border around the email form on my password page.

Password - GeffDoe

1 Like
2

Hello there,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottom of the file:
.newsletter__wrapper {
background-color: #000;
}

ZestardTech_0-1693826059775.png
ZestardTech_0-1693826059775.png1496×787 112 KB

3

Hi! This could be done by adding a tiny bit of css to the theme. This page will help you with how to add css to your theme. The following bit of code should fix your issue:

.email-signup-banner__box {
    background-color: transparent;
}
4

is it possible to make the inside of the email banner itself transparent too?

5

Hey @abalves97

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1693826574356.png
Moeed_0-1693826574356.png1876×858 157 KB

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

Best Regards,
Moeed

6

Absolutely, you could add this to the css

.field__input {
  background-color: transparent;
}

I see this makes the field hard to read because of the dark background. So this might make it even nicer:

.email-signup-banner__box {
    background-color: transparent;
}

.email-signup-banner .field__input{
  border: 1px solid white;
  background-color: transparent;
}

.email-signup-banner .field__label, .email-signup-banner .field__button, .email-signup-banner .newsletter-form__message{
  color: white !important;
}

Hope this helps! Don’t forget to mark it as solution if it did.

7

It worked. Is it also possible to move the email banner further down and decrease it in size?

8

Of course, you should be able to do anything. But it’s a bit hard for me to understand how far down, and how much smaller. This should give you a start.

.newsletter-form__field-wrapper {
  margin-top: 3rem;
  scale: 0.8;
}

By increasing the margin-top value the form will move further down. By decreasing the scale value, you’ll make the form smaller.

Hope this helps! Don’t forget to mark it as solution if it did.

9

and where do i add this?

10

Hey, it should just be appended to the rest that you configured earlier. So the complete code now has become:

.email-signup-banner__box {
    background-color: transparent;
}

.email-signup-banner .field__input{
  border: 1px solid white;
  background-color: transparent;
}

.email-signup-banner .field__label, .email-signup-banner .field__button, .email-signup-banner .newsletter-form__message{
  color: white !important;
}

.newsletter-form__field-wrapper {
  margin-top: 3rem;
  scale: 0.8;
}

And you can just change the last two values to move and scale the email box.

1 Like