Change outline in footer email address sign up section

Highlighted
New Member
38 0 0

Hello, 

 

Outline in email address sign up needs to be in black

 

http://meow-cleeva.myshopify.com/ pw: SilviaR

 

Please help 

USER_SCOPED_TEMP_DATA_orca-image-598891026.jpeg

0 Likes
Highlighted
Explorer
116 1 11

Hi,  hopes you are doing well and great this is Syed Mustafa an experienced Shopify Developer I've gone through your issue details and it matches my expertise I can solve this issue for you but it will be a one time paid service.

If it is of your wish, I present myself available to help you. Kindly feel free to reach me at Syedmustafanadeem99@gmail.com. 

Thank you!

Kind regards,
Syed Mustafa Nadeem

0 Likes
Highlighted
New Member
38 0 0

I thought it's easy to change a color of outline

0 Likes
Highlighted
Explorer
116 1 11

That's why I will charge too much less. Thanks 

0 Likes
Highlighted
Tourist
3 0 1

Hi @natali5115  Here is a CSS snippet that will put a black border around the footer email address and sign up. Just paste it into the bottom of your css file. I've only tested this in Chrome, so you should check across other browsers as well before going live.

/* this targets the email field */
.site-footer .input-group .input-group-field {
    border-color: black;
    border-right: none;
    border-radius: 2px 0 0 2px;
}

/* this targets the sign up button */
.site-footer #subscribe {
    border-radius: 0 2px 2px 0;
    border: 1px solid black;
    border-left: none;
}

Screen Shot 2020-09-20 at 7.47.50 AM.png

 

Let me know how it goes and good luck with your store!

Thanks,
Carey

0 Likes
Highlighted
New Member
38 0 0

Is it possible to do outlines thicker please? 

0 Likes
Highlighted
Tourist
3 0 1

Hi @natali5115 Here is an updated CSS snippet with the thicker border. I've pointed out in the CSS comments which lines to edit in case you want to adjust it further. Note, that it would need to be updated in two different places. Good luck!

.site-footer .input-group .input-group-field {
    border-color: black;
    border-right: none;
    border-radius: 3px 0 0 3px; /* this changes the roundness of the corners */
    border-width: 2px; /* this where you edit the border thickness */
}

/* this targets the sign up button */
.site-footer #subscribe {
    border-radius: 0 3px 3px 0; /* this changes the roundness of the corners */
    border: 2px solid black; /* this is where you edit the border thickness */
    border-left: none;
}

 

0 Likes