Google Search Plugin - Basic styling of search results

Hello support team,

I'm using your plugin on a website that my dev team is working on here http://nett.sayahnet.com/

Click the Search icon in the menu bar... I'm trying to figure out why the search results are right aligned instead of being left aligned. My developer says he can't modify this. I don't believe google will serve results like this either....

And does this plugin provide search suggestions?

Please help us out with this... this issue has become very painful for me to answer about with my client.

Thanks
Monis

  • Milan

    Hello Monis,

    Hope you are well today and thanks for asking us. :slight_smile:

    Can you pelase use this bit of css for your search results ?

    a.gs-title{
      float: left !important;
    }

    You can leverage this nice plugin to manage css snippets like above one if you wish to. :slight_smile:
    https://wordpress.org/plugins/simple-custom-css/

    And does this plugin provide search suggestions?

    Plugin does not provide but Google does. :slight_smile: You can enable AutoComplete for your search engine product by its AutoComplete preference tab. Please see this screenshot. :slight_smile:

    Just go to your Search Engine management Dashboard, then navigate to Edit Search Engine > Search Features > Autocomplete > Enable autocomplete

    Let me know how it goes. :slight_smile:
    Cheers,
    Milan

  • Adam Czajczyk

    Hello Monis!

    Thanks for your informative reply. Can you please specify where I should add this code if we don't use snippets plug in?

    The code Milan shared with you is a CSS rule therefore it should go to "style.css" file of the current theme of the site. It's not advised to modify files of themes and plugins directly. That's why Milan suggested the Simple Custom CSS plugin. It is however possible that your theme includes "custom CSS" option and if so the code should go there.

    Alternatively, you may want to create the basic child theme of your current theme and put the code in the "style.css" file of that child theme. Here's more information on this:
    https://premium.wpmudev.org/blog/how-to-create-wordpress-child-theme/

    And without having setup anything on Google the dev did something where suggestions were showing then disappeared... any idea what that could be?

    With default WP search it may be possible that the theme includes "suggestions" or an additional plugin has been used for this. For Google Custom Search you will want to enable "Autocomplete"option for your Custom Search code in Google Custom Search control panel:

    https://developers.google.com/custom-search/docs/start#autocompletions

    Does this plug in need a Google account linked to it? Is there one linked to it right now?

    It does require Google Custom Search code which is generated and assigned to your site by Google. You may create this code on this page:

    http://www.google.com/cse/

    Best regards,
    Adam

  • Monis

    Hello guys

    So I installed the plugin and used it to add the code provided to left align the results and it worked!

    However I still need to customize a few more things, and I tried it, but those customizations are not working. Please see the attached and let me know what I'm doing wrong. I had used Google Chrome's inspect tool to find the classes to modify but it doesn't seem to work.

    1) And I'm trying to decrease the width of the search results overlay box.
    2) I'm trying to add a grey border around the overlay box which appears.

    Please help me out.

    Thanks!
    Monis

  • Milan

    Hello Monis

    Hope you are well today and thanks for asking us. :slight_smile:

    Above code snippet is not shifting search field and making it to 550px wide but other styling shifting it to left side of panel. So you can keep your search field stick to right side of box with this bit of css,

    form.gsc-search-box{
    	float: right;
    }

    please do not forget to include this with above snippet.

    Cheers,
    Milan

  • Milan

    Hello Monis ,

    Hope you are well today. :slight_smile:

    Yes you are right, it is working that way, I am not sure how you setup that menu, but this tiny JavaScript snippet can help you with your concern. :slight_smile:

    add_action( 'wp_footer', 'hide_box_when_user_click_somewhere_on_document' );
    function hide_box_when_user_click_somewhere_on_document(){ ?>
    		<script>
    			jQuery(document).ready(function($) {
    			    $("div#content").click(function() {
    			        if ( $("div.gsc-control-cse.gsc-control-cse-en").hasClass( "active" ) ){
    			            $("span.search-icon").trigger("click");
    			        }
    			    });
    			});
    		</script>
    <?php } // end hide_box_when_user_click_somewhere_on_document

    You can inject it to your theme's functions.php file or better inject it as Mu Plugin.

    Let me know how it goes. :grinning:
    Kind Regards,
    Milan

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.