[Support request] Customize the search bar

[Ying]

You can upload it to here: https://postimages.org/

Then share the link with us.

[Justin]

https://postimg.cc/6TVDPLXm

[Ying]

How can I remove the little box around the search icon and anyway I can make the search rectangular box rounded on the edges?

Try this CSS:

button.wp-block-search__button.has-icon {
    border: 0;
}

.wp-block-search__inside-wrapper {
    border-radius: 10px;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

[Justin]

If I make it more rounded like 30px it creates holes how do I fix that?
https://postimg.cc/N9TGryZr

[Justin]

it also has a different shade of color inside box

[David]

You can add this CSS to change the input / buttons background colors:

.wp-block-search input,
.wp-block-search__button{
	background-color: transparent;
}

[Justin]

Fixed all the issues except when i click the search bar to type some of the issues come back
https://postimg.cc/ZCD41VFc

[Ying]

Add this CSS as well:

input[type="search"]:focus {
    background-color: transparent !important;
}

[Justin]

That fixed that issue but now if someone clicks on the drop-down previously typed in text the blue color comes back without filling the entire search bar, and is this the best way to make the changes by adding this css code in the customizer? how big of an impact is it on site speed?
https://postimg.cc/HrJjRZ15

[Ying]

There won’t be any noticeable impact on speed regarding the CSS size.

Can you link me to your site where we can see the search bar?

Please be noted, that the search block is NOT from the theme, it’s from WP and the theme doesn’t have control over it, it’s kind of out of the scope of the theme support, but we are still trying our best to help you out here.

[Justin]

Removed

[Justin]

Thank you for helping

[Justin]

I had some other questions like my homepage header and recent blogs are not centered on mobile devices and I couldn’t figure out how to center the read more lable on the archive cards?

[Ying]

How do you make the previous searches show up in the first place?

I tried searching for several words, but don’t see the drop-down you mentioned.

For other questions, please open new topics, thanks!

[Justin]

not sure

[Author]

Posts