[Tutorial] Change place holder text in the plugin

Hello,

I would like to show you how to change the default place holder text in this plugin.

Just add the code:

window.onload = function(){
      document.getElementById('gsc-i-id1').placeholder = 'Type your keyword to search';
};

to the end of file: wp-google-search/assets/js/google_cse_v2.js

Then you can change your default text place holder of input box.

Demo: https://whateverfree.net/ Hope that help you.

The css I used to change my Google custom search layout on my site:

input#gsc-i-id1 {background: none !important; height: 33px !important; text-indent: 0px !important;}
.wgs_wrapper .gsc-input-box td {border-left: 4px solid #4ABF15 !important; border-top: 4px solid #4ABF15 !important; border-bottom: 4px solid #4ABF15 !important;}
.gsc-search-button-v2, .gsc-search-button-v2:hover, .gsc-search-button-v2:focus {background-color: #4ECB10 !important;}
.gsc-input-box-hover {background: none !important; border: none !important;}
.gsst_b {padding: 0px !important;}
.gsc-search-button-v2, .gsc-search-button-v2:hover, .gsc-search-button-v2:focus {height: 40px !important; border-color: #4FCC10 !important;}
.gsc-search-button-v2 svg {padding-top: 10px;}
.cse .gsc-search-button-v2, .gsc-search-button-v2 {padding: 0px 15px !important;}

Thanks Dev for great plugin

• This topic was modified 5 years, 6 months ago by whateverfree2.