How can i make the search bars and newsbars etc... from cornered to rounded on the boundless theme?

Solved
Happless
Tourist
10 0 2

I would very much appreciate it if someone is able to help me with this, i've got help changing the buttons, but just need help changing the search bars and newsbars etc... from cornered to rounded. thankyou!

0 Likes
JHKCreate
Shopify Partner
2481 426 581

Hi @Happless 

Would you mind sharing you store's URL so we can have a look at that? Thanks!

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
Happless
Tourist
10 0 2

fyfefits.com

0 Likes
JHKCreate
Shopify Partner
2481 426 581

Search bar is clear, what do you mean exactly by newsbars?

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
0 Likes
Happless
Tourist
10 0 2

You see how the buttons are rounded? i want to make the search bar. News Bar. And all other blocked drop down menus/bars that can be typed in rounded aswell. Thankyou

0 Likes
JHKCreate
Shopify Partner
2481 426 581

Ok so by newsbar you mean the newsletter section at the bottom, gotcha!

Sharing with you the instructions and code shortly

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
Happless
Tourist
10 0 2

Yeah sorry about that, im glad you got what i meant! Thankyou. Much appreciated.

0 Likes
JHKCreate
Shopify Partner
2481 426 581

This is an accepted solution.

Go to your "Online Theme" -> "More Actions" -> "Edit Code" -> theme.scss.css file and add at the very bottom the following:

input#Email {
    border: none;
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
    outline: none;
}

input#SearchInput {
    border-radius: 25px;
    border: none;
    outline: none;
}

div#SearchDrawer {
    border: none;
    border-radius: 25px;
}

That should do it!

Let me know

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
Happless
Tourist
10 0 2

Thankyou so much!! That worked, would it be possible for you also to help me do the same thing, on the parts i've circled orange in these images below thankyou!! I'll be recommending you to my peers asap!

 

 

THIS TOO 2.pngTHIS TOO 3.pngTHIS TOO.png

 

0 Likes
JHKCreate
Shopify Partner
2481 426 581

This is an accepted solution.

Here you go!

select#SortBy {
    border: none;
    border-radius: 25px;
}

.selector-wrapper {
    border-radius: 25px;
}

select#ProductSelect-product-template-option-0 {
    outline: none;
}

input#Quantity {
    outline: none;
}
.product__quantity.quantity-wrapper {
    border-radius: 25px;
}


Unfortunately the checkout can only modified on Shopify Plus plans, so can't help you with that unfortunately! 

Let me know if that works!

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
0 Likes