How to apply custom theme to google custom search?

Question

I am trying to understand how to integrate google custom search into websites, I want to accomplish the same result php.net has on their search page:

http://www.php.net/results.php?q=dummy+text&l=en&p=all

As you can see, their google custom search button and textbox purple border and search results frame is embedded in their layout, it doesn't look out of place. How did they do this?

I have read the google custom search help pages, they are too obscure to assimilate for newbies like me. I have also tried tinkering with the display settings of google custom search, and tried to understand the custom development docs to no avail. If someone could show me by example it would be greatly appreciated.

Answer 1

The custom styling can be achieved via css. If you are using Chrome browser, you can right click on search element, select "Inspect element" from the menu and this will bring up the Chrome console, where yu can find which element has what css class. The cse elements have usually classes starting with gsc- prefix. Then you can use those classes to write your custom css. E.g.:

.gsc-input-box {

    border-color: purple !important;
}

Here is a jsfiddle example: http://jsfiddle.net/m8Twp/