[Resolved] Search widget – changing its visual effect

Home Forums Support [Resolved] Search widget – changing its visual effect

Home Forums Support Search widget – changing its visual effect

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #118565
    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

    #118586
    Tom
    Lead Developer
    Lead Developer

    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/

    #118625
    Pavol Juhasz

    Working like a charm. Thx a lot πŸ™‚

    #118693
    Tom
    Lead Developer
    Lead Developer

    No problem πŸ™‚

    #211909
    Thierry

    Great, thank you Tom πŸ™‚

    #211957
    Tom
    Lead Developer
    Lead Developer

    Glad I could help πŸ™‚

    #319103
    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 ‘’;
    }

    #319167
    Tom
    Lead Developer
    Lead Developer
    #774744
    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.

    #774787
    Leo
    Staff
    Customer Support

    Any chance you can open a new topic?

    This one is a bit old with multiple authors already.

    Thanks!

    #774792
    Diogenes

    Ok Leo, thanks.

    #774815
    Leo
    Staff
    Customer Support

    Thanks πŸ™‚

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.