How to Customise Your Google Search

    So with basic html5 and css3 knowledge it should probably take you form 30 to an hour to complite this task. And for the advanced ones - 5 to 10 min. Let us start with the original drop-down menu:

Not the thing we are looking for.

Step 1: Find a suitable plugin for our 'client': stylish is my choice. You can find it from here. Now we can transform web pages to our own css3 'zen garden'.

Step2: Find the tag responsible for the coloring in the drop down. We mark the text/search field and right-click > inspect element, give us the html code of the web page. In our case the whole page is let's say one big table  with nested in it other table and tags. It's easy to see that only hovered and 'suggested' hit has the gssb_i class. So now we move to

Step3: After installing the stlylish pugin we can find it in the top right corner of our 'client' (Chrome) and it's look something like this:

    Here we must create and add new style for our google page by right-click > options > write new style. We can add more than one page, but for now let's use it only for the google search. You can see that there is a Applies to:  section. We have several options but URL is what we need for now. Then add the link - www.google.com In the text filed above we can add and create our own css. As I sad before - the tag we need is tr (table row) and the class gssb_i . So when we combine them the result should be:

tr.gssb_i{

background-color: #13C0EB;

}

    We access the tag and by . (dot) the class, so now we basically say: 'I need every tr with this class to have light-blue color'.  And we are done. The final result of our work is something like this:

    

    And just to be sure that our changes will work and be practical all the time, please add to Applies to > 

URLs starting with  >  https://www.google. Then one more time add to Applies to > URLs starting with : > http://www.google. 

Enjoy!