[Resolved] Search widget – changing its visual effect

[Pavol Juhasz]

Hello!

First, thanks for this awesome theme, I got it with all the plugins and I’m really enjoying it so far!

I got a couple questions about Search widget. I like to use it instead of navigation (in menu) search, but I would like to change some things:

How can I change the background color of one widget (the search widget) without altering other sidebar widgets?

1) I tried to add background-color:transparent; to search-widget, but it didn’t work.

2) I would like to add magnifying glass right next to the search box, so people can type keywords and then click on the magnifying glass, instead of only using enter.

This two thing won’t get me any sleep 😀 I found several good answers on other questions in this support forum, however, not to these two.

Thanks,

Pavolko

[Tom]

Hi Pavolko,

To make the search widget transparent, you can use this CSS:

.sidebar .widget_search {
    background: transparent;
}

Then, to add the search icon, add this CSS:

.widget .search-field {
    width: 85%;
}

.widget_search .search-submit {
    background: transparent;
    color: inherit;
    display: inline-block;
    font-family: FontAwesome;
    padding: 10px 5px;
}

.widget_search .search-submit:hover,
.widget_search .search-submit:active,
.widget_search .search-submit:focus {
    background: transparent;
    color: inherit;
}

Then add this PHP:

add_filter( 'generate_search_button','generate_custom_search_button' );
function generate_custom_search_button()
{
	return '';
}

That should do it 🙂

Adding CSS: http://generatepress.com/knowledgebase/adding-css/
Adding PHP: http://generatepress.com/knowledgebase/adding-php-functions/

[Pavol Juhasz]

Working like a charm. Thx a lot 🙂

[Tom]

No problem 🙂

[Thierry]

Great, thank you Tom 🙂

[Tom]

Glad I could help 🙂

[Edu]

Hi again, im New with code, where i need to add this php code? thnks

Then add this PHP:

add_filter( ‘generate_search_button’,’generate_custom_search_button’ );
function generate_custom_search_button()
{
return ‘’;
}

[Tom]

This should help: https://docs.generatepress.com/article/adding-php/

[Diogenes]

Hi.
I need to change the word Search in the navigation widget to the magnifying glass icon.
Use the code that Tom put here, but I get only one square instead. I suppose this is due to the support of Font Awesome.
Is it possible that the icon of the magnifying glass that was displayed was the one that comes by default in the new versions of GP premium?
What would be the necessary code?
It would be lighter and without using the Awesome font to replace the word with the icon.
Thanks in advance.

[Leo]

Any chance you can open a new topic?

This one is a bit old with multiple authors already.

Thanks!

[Diogenes]

Ok Leo, thanks.

[Leo]

Thanks 🙂

[Author]

Posts