Alter Google custom search engine code, customize in 3 easy steps

  1. Previous
  2. Next
  3. Recent

    1. Signs 'He' May be Cheating on You
    2. 7 Vows of Hindu Marriage - Know What 'Saat Vachans' Mean
    3. RuPay vs Visa vs Mastercard vs American Express- A Comparison
    4. What is RuPay? Everything You Need to Know About India's Domestic Payment System!
    5. Top 10 Online Portals to Find a High Paying Job in India
    6. Top Indians who Revolutionized the IT Sector in India
    7. 8 Initiatives by Narendra Modi that Could Change the Future of the Nation
    8. 8 Work-from-home Jobs for Housewives, Students, and Part timers
    9. Complete Company Registration Process in India - Explained
    10. Change Name in India in 5 Steps - Filing Affidavit, Newspaper Ad & Gazette Notification

Google custom search engine is an awesome addition to our websites, most of us are annoyed by the way it maligns the look of websites. So, here we provide you a very simple way to alter Google custom search code to match your website design, and that too in 3 easy steps.

Here is what the default Google custom search engine looks like,

default google custom search engine

default google custom search engine

How to customize?

Before customizing we need to understand the code of the Google cse.

code for google custom search engine for websites

Code for Google custom search engine for websites (hidden to users)

  1. You can manually reduce the width of Google cse by decreasing the width from 100% to anything, mine is 28%. Longer is better. You can also align the custom search using ‘float’ CSS property, arrange it using ‘margin’ or ‘padding’, if required. Here is my code,
    <div id="cse-search-form" style="width: 28%; float: right; margin-top: 14px;">
    Loading
    </div>
  2. By default, Google custom search has margin and padding that makes it difficult to place it in narrow sections like header and sidebar. We can remove these by making some alterations,
    .cse .gsc-control-cse, .gsc-control-cse
    {
    padding:0px;
    margin:0px;
    }
  3. To alter the shape and size of input text field and submit button we have to alter the stylesheet code in ‘input.gsc-input’. Here is what I have done to my cse code,
    input.gsc-input
    {
    border:1px solid #3090c9;
    padding:3px;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
    color:#707070;
    }
  4. To further customize search button apply css code to ‘input.gsc-search-button’. My search  button code is,
    input.gsc-search-button
    {
    padding:2px;
    background:#3070c9;
    color:white;
    font-weight:bold;
    border:1px solid #3070c9;
    background-image:-webkit-linear-gradient(#00518A,#3090c9);
    background-image:-moz-linear-gradient(#00518A,#3090c9);
    background-image:linear-gradient(#00518A,#3090c9);
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    border-radius:2px;
    cursor:pointer;
    }

Note 2 important things

Put the entire stylesheet code after adding your custom search engine HTML code otherwise it would get overridden by the actual one. You can add it at the end of sidebar.php or begining of footer.php in WordPress. And, we cannot remove the Google’s tag as its against T&C of Google.

After adding the above mentioned code our custom search engine should look like,

altered google custom search engine

With a basic knowledge of CSS you can further customize the appearance of Google cse.

blog comments powered by Disqus