Sunday, August 11, 2019

Customizing design of Google Custom Search Box using css

Customizing design of Google Custom Search Box using css


With Google Custom Search, you can create a search engine for a website, blog, or collection of websites. Search engines can be configured to search for both web pages and images. You can refine your ranking, customize the appearance of search results, and invite friends and trusted users to create a custom search engine.




HTML markup
<div id="search-box">
<script>
(function() {
var cx = "your cx id";
var gcse = document.createElement("script");
gcse.type = "text/javascript";
gcse.async = true;
gcse.src = "https://cse.google.com/cse.js?cx=" + cx;
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(gcse, s);
})();
window.onload = function()
{
var searchBox = document.getElementById("gsc-i-id1");
searchBox.placeholder="Search webslake";
searchBox.title="Search webslake";
}
</script>
<gcse:search></gcse:search>
</div>





"Custom Search" is the default placeholder text for Google's custom search box. To change this, use the original Google Custom JavaScript code and add the following JavaScript code to the HTML markup.

window.onload = function()
{
var searchBox = document.getElementById("gsc-i-id1");
searchBox.placeholder="Search webslake";
searchBox.title="Search webslake";
}


In the html code you have to use your cx id and your domain name for placeholder & title values.

Css Rules

.gsc-control-cse
{
padding:0px !important;
border-width:0px !important;
}
form.gsc-search-box,table.gsc-search-box
{
margin-bottom:0px !important;
}
.gsc-search-box .gsc-input
{
padding:0px 4px 0px 6px !important;
}
#gsc-iw-id1
{
height: auto !important;
padding: 0px !important;
border-width: 0px !important;
box-shadow:none !important;
}
#gs_tti50
{
padding:0px !important;
}
#gsc-i-id1
{
height:33px !important;
padding:0px !important;
background:none !important;
text-indent:0px !important;
}
.gsib_b
{
display:none;
}
button.gsc-search-button
{
display:block;
width:13px !important;
height:13px !important;
border-width:0px !important;
margin:0px !important;
padding: 10px 6px 10px 13px !important;
outline:none;
cursor:pointer;
box-shadow:none !important;
box-sizing: content-box !important;
}
.gsc-branding
{
display:none !important;
}
.gsc-control-cse,#gsc-iw-id1
{
background-color:transparent !important;
}






Assuming you use a Google Custom Search Box per page, # gsc-iw-id1, # gs_tti50, and # gsc-i-id1 are the first-item identifiers of the Google Custom Search Box. The CSS rules are good.


If there is another Google Custom Search Box on the same page, the corresponding item ID will be # gsc-iw-id2, # gs_tti51 & # gsc-i-id2

So you will have to update some of the above CSS rule


(1) #gsc-iw-id1 will be updated to →
#gsc-iw-id1,#gsc-iw-id2

(2) #gs_tti50 will be updated to →
#gs_tti50,#gs_tti51

(3) #gsc-i-id1 will be updated to →
#gsc-i-id1,#gsc-i-id2




Creating the first design








First design for Google Custom Search Box




/* Changing placeholder color of search box */ #gsc-i-id1::-webkit-input-placeholder { /* Chrome */ color: #FFF; } #gsc-i-id1:-ms-input-placeholder { /* IE 10+ */ color: #FFF; } #gsc-i-id1::-moz-placeholder { /* Firefox 19+ */ color: #FFF; opacity: 1; } #gsc-i-id1:-moz-placeholder { /* Firefox 4 - 18 */ color: #FFF; opacity: 1; } #search-box { width:401px; height:34px; margin:0 auto; background-color: #0085cc; border-radius: 3px; padding: 6px 10px; } button.gsc-search-button { border-left: 1px solid #0198af !important; background-color:transparent !important; } #gsc-i-id1 { color:#FFF; }

W3Learners Our website google custom search box




.gsc-input
{
}
.gsc-search-box .gsc-input
{
padding:1px 1px 1px 1px !important;
}
#gsc-iw-id1
{
background:transparent;
height:10px;
margin-bottom:36px;
}
#gs_tti50
{
padding:2px !important;
background:green;
border-radius:5px
}
#gsc-i-id1
{
display:inline-block;
height:40px !important;
padding:0px !important;
background:white !important;
text-indent:5px !important;
}
.gsib_b
{
display:none;
}
@media screen and (max-width: 720px){
button.gsc-search-button
{
display:inline-block;
width:30px !important;
height:18px !important;
margin-top:0px !important;
}
}

@media screen and (min-width: 720px) and (max-width: 9999999px){
button.gsc-search-button
{
display:inline-block;
width:20px !important;
height:20px !important;
border-width:06px !important;
}
}
.gsc-branding
{
display:none !important;
}
#gs_tti50:hover
{ padding:2px !important;
background:blue;
border-radius:5px
}
@media screen and (min-width: 720px) and (max-width: 90000px) {
.show-menu-toggle
{display:none;}
}
@media screen and (min-width: 0px) and (max-width: 720px){
.menu-toggle
{
display:none;
}
}

0 Comments: