How can I adjust the radius of my subscribe button?

[Deoxes]

I try a lot of codes, but no 1 is working for me.

Maybe someone can help me, I wanna that email and subscribe to make all corners a 3px radius, maybe someone knows the code for it?

Theme: Impulse

Web: dehome.co.uk

Thanks.

[KetanKumar]

@Deoxes

yes, please add this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.

.newsletter__input-group .input-group-field {
    border-radius: 10px 0px 0px 10px !important;
}
.newsletter__input-group button.btn {
    border-radius: 0px 10px 10px 0px !important;
}

[DavidEKim]

Hi,

Please add the code below in to theme.css.

.input-group .input-group-btn:first-child .btn, .input-group .input-group-field:first-child, .input-group input[type=hidden]:first-child+.input-group-field {
    border-radius: 3px 0 0 3px !important;
}
.input-group .input-group-btn:last-child .btn {
    border-radius: 0 3px 3px 0 !important;
}

or you may use the code below.

.input-group .input-group-field:first-child {
    border-radius: 3px 0 0 3px !important;
}
.input-group .input-group-btn:last-child .btn {
    border-radius: 0 3px 3px 0 !important;
}

Hope it works.

Thanks.

[Deoxes]

@KetanKumar Thanks.

[Deoxes]

@DavidEKim Thanks.

[Deoxes]

@KetanKumar

@DavidEKim

Maybe can help me with these corners also?

This quantity selector when you add to the cart.

Also and this one, I try, but I don’t know codes:

That white box corners.

Thanks.

[Deoxes]

@DavidEKim

@KetanKumar

Sorted, Thanks for help !

[DavidEKim]

@Deoxes

I found that you already applied the border radius to all your button but the radius is not showing to the cart drawer quantity wrapper because the background color is transparent & the overflow value is visible.

To show your changes for the shopping cart drawer quantity wrapper, please add the code below in theme.css.

.drawer .js-qty__wrapper {
    background-color: #f8f8f8 !important;
    overflow: hidden;
}

Hope it helps.

Thanks.

[Deoxes]

@DavidEKim

Can you make a photo for me and explain about what place you talking, because for me it’s showing everything correctly.

Are you talking something about that?

Because I added your colour, nothing is changing in the cart section for me.

Thanks

[DavidEKim]

It’s about Cart Drawer.

It looks fine because it’s a transparent background.

The code I gave you will not affect very much because I used the same background color & the border color (the border for the quantity selector is not much visible).

I attached pictures to compare the difference.

I added a different background color to see the difference.

However, it’s not much visible and your current design looks great.

Hope you are enjoying designing your store.

Thanks.

[Deoxes]

@DavidEKim

Thanks, I had changed the colour.

Have few questions:

1. How I can change the border colour? because for me it’s not working.

2. Second question, when you press going to checkout, and this one button, with which code I can control them?

I use this code “.btn, .sp-modal-toggle {” but it’s not working for me.

Thanks for the help.

[DavidEKim]

1. You need to put a value for the border to change the border color as below.

border: 1px solid #000;

Then you can change the color from #000 to your color.

[Deoxes]

@DavidEKim

Why does it’s looking like that when I press it?

Look at the corners.

Thanks.

[DavidEKim]

2. As your screenshot, you will see the element style

There are button element, 1 id & 2 classes.

button#continue_button.step__footer__continue-btn.btn {
  Your-Control-Code-Here
}

If your code is not working, you may add !important to force the code.

If you have any other questions, please let me know.

Thanks.

[Deoxes]

@DavidEKim

Thanks for the help, how I can control these light grey corner sides?

Because when I press it, it changes to a black colour and looks not very nice.

Thanks.

[KetanKumar]

@Deoxes

oh sorry i can’t see

[Deoxes]

@KetanKumar

This last picture is from my cart.

Thanks.

[DavidEKim]

Because you may apply too many places to force the border radius, you will need to keep the same amount of the border radius. Otherwise, it could be happened like that.

If you keep the border radius to 3px, it might be okay.

However, I’m not sure what parts of the CSS file you keep changing.

Please make the look similar or the same amount & color to keep your site’s consistency.

For me the button is fine and all other designs look great.

Thanks.

[Deoxes]

@DavidEKim

This code not working for me also I add !important, but it’s the same, don’t work.

[DavidEKim]

They are all in .drawer .js-qty__wrapper classes.

You should be able to control from there.