Search Box

This topic has 13 replies, 2 voices, and was last updated 2 years, 7 months ago by Aizaz Imtiaz Awan.

Viewing 14 posts - 1 through 14 (of 14 total)

Author

Posts
May 30, 2022 at 6:22 pm #379986

tekeci
Participant

Hello. We have edited the Search Box with you before, but can we do the same as in the example? (I left the link below)

We just need to add that:

1) Delete borders
2) Background-color: #f5f6f4;
3) Increase widht and height values

May 31, 2022 at 10:05 am #380117
Aizaz Imtiaz Awan
Keymaster
Hello,

Please try adding the following Custom CSS in the Custom CSS for Desktop area under Theme Settings >> Custom CSS.
```
.searchform.wd-with-cat input[type="text"] {
    background-color: #f5f6f4;
    border: none;
    height: 55px;
}
```
Best Regards
May 31, 2022 at 11:49 am #380151

tekeci
Participant

I’m really sorry. I sent you wrong link. You can find correct link below.

May 31, 2022 at 2:58 pm #380223

Aizaz Imtiaz Awan
Keymaster

Hello,

The CSS provided in my previous Reply will remove the border and add the background colour.

To Remove the categories please Edit search from Woodmart >> Header Builder and disable the option to show categories.

Screenshot: https://gyazo.com/26893e1902a9223ec8950c4e1bc69d21

Best Regards

May 31, 2022 at 5:20 pm #380259

tekeci
Participant

When I disable the show categories option. Everything goes back to the way it was before.

Attachments:
You must be logged in to view attached files.

June 1, 2022 at 10:02 am #380395

Aizaz Imtiaz Awan
Keymaster

Hello,

Your issue has been Resolved. Please clear cache and check back.

Best Regards

June 1, 2022 at 1:13 pm #380443

tekeci
Participant

How can I increase searchbox height, search icon size like example?

June 1, 2022 at 3:13 pm #380515

Aizaz Imtiaz Awan
Keymaster

Hello,

Please try adding the following Custom CSS for that.

.searchform input[type=”text”] {
height: 60px;
}

.searchform .searchsubmit:after{
font-size: 30px;
}

Best Regards

June 1, 2022 at 5:05 pm #380568

tekeci
Participant

The icon got smaller, but I couldn’t make the placeholder text smaller.

June 2, 2022 at 9:38 am #380716
Aizaz Imtiaz Awan
Keymaster
Hello,

Please try adding the following Custom CSS for that.
```
.searchform input[type="text"]::placeholder {
    font-size: 12px;
}
```
Best Regards
June 2, 2022 at 12:46 pm #380788

tekeci
Participant

Thank you so much!! Last thing is this problem:

Attachments:
You must be logged in to view attached files.

June 2, 2022 at 3:10 pm #380832
Aizaz Imtiaz Awan
Keymaster
Hello,

Please try adding the following Custom CSS for that.
```
.searchform input[type="text"] {
    padding-left: 50px;
}
```
Best Regards
June 3, 2022 at 4:46 pm #381088

tekeci
Participant

Thank you!

June 4, 2022 at 8:38 am #381152

Aizaz Imtiaz Awan
Keymaster

Hello,

You are Most Welcome.

Let us know if there’s anything else we can do for you! You can always reach us at any time. We are always here to help you.

Have a wonderful day.

Topic Closed.
Best Regards.
Author

Posts