[Resolved] Search bar customization

[David]

Glad to hear that!

[Sabbir]

Thank you so much to all guys. you are amazing.

[David]

Happy that we can be of help!

[Sabbir]

Topic: Search bar in homepage:https://www.disabilityresources.org/

everything looks good but I have one request. Can you change the “arrow” on the homepage search bar to one that is more prominent? See attached. The font I used for the arrow is “Webdings 3” or I can send it to you as an image file

attachment: https://prnt.sc/oazNEPlR9pc6

[Ying]

Hi there,

If you want to customize the arrow, you can use this selector, I added some example CSS which you can play around with:

.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button {
    font-weight: bold;
    font-family: fantasy;
    font-size: 30px;
    padding: 0 0 10px 0;
}

[Sabbir]

here should i put it, hre is the previous CSS:

.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
border-radius: 50px;
overflow: hidden;
}

.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input {
margin: 5px 15px;
background-color: #fff;
font-size: 25px;
}
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button {
background-color: #fff;
height: 50px;
width: 50px;
border-radius: 100%;
box-shadow: -1px 3px 15px 0 rgba(0,0,0,0.06);
}
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:hover {
background-color: #8FBCBB;
}

[Fernando]

You can add it in Appearance > Customize > Additional CSS. Under all the code.

[Sabbir]

I know that, I mean, should I modify the previous code or add the Ying Code as new?

or please modify the full code for me, then I will replace all.

here is the previous code:

.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
border-radius: 50px;
overflow: hidden;
}

.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input {
margin: 5px 15px;
background-color: #fff;
font-size: 25px;
}
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button {
background-color: #fff;
height: 50px;
width: 50px;
border-radius: 100%;
box-shadow: -1px 3px 15px 0 rgba(0,0,0,0.06);
}
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:hover {
background-color: #8FBCBB;
}

and Ying provides a few line new for modification:

.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button {
font-weight: bold;
font-family: fantasy;
font-size: 30px;
padding: 0 0 10px 0;
}

[Fernando]

You could inject it into this part of your current code since they’re the same selector:

.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button {
background-color: #fff;
height: 50px;
width: 50px;
border-radius: 100%;
box-shadow: -1px 3px 15px 0 rgba(0,0,0,0.06);
}

So, replace that with this:

.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button {
background-color: #fff;
height: 50px;
width: 50px;
border-radius: 100%;
box-shadow: -1px 3px 15px 0 rgba(0,0,0,0.06);
font-weight: bold;
font-family: fantasy;
font-size: 30px;
padding: 0 0 10px 0;
}

[Sabbir]

Yes, that’s what I said. thank you!

[Fernando]

You’re welcome Sabbir!

[Author]

Posts