Member Avatar for pol.bala

I have used google custom site in website. But i dont want the default design of google custom search bar.i want to design with my custom psd file style. What can i do. Please help me.

  • 4 Contributors
  • 7 Replies
  • 289 Views
  • 12 Hours Discussion Span
  • Latest Post Latest Post by pol.bala

Dani AI

Generated

Short, practical workflow to skin the Google Custom Search on your site (builds on what , and suggested):

  1. Scope it. Put the CSE output inside a wrapper you control (for example a div with an id or class) so your styles only affect the search area on your site.
  2. Inspect the generated DOM with your browser dev tools (right click -> Inspect). Find the top-level container and the input, button and result elements the script injected. Copy those selectors; they are what you will override.
  3. Write scoped CSS that targets those selectors. Start with non-destructive changes (fonts, spacing, colors) and iterate. If rules do not apply check for inline styles or an iframe (iframe'ed results cannot be styled from your page). If you hit inline styles, use more-specific selectors; use !important only as a last resort.
  4. If results are rendered inside an iframe and you must fully control markup, consider using the Custom Search JSON API (render results yourself) or change the CSE layout so results are rendered inline on your page.

Example CSS pattern (replace the selector with the one you find in the inspector):

/* scope to your wrapper - replace "#site-search" with your wrapper selector */
#site-search input[type="search"],
#site-search input[type="text"] {
  width: 100%;
  padding: 10px;
  border-radius: 4px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

#site-search button,
#site-search .search-button {
  background: #4285f4;
  color: #fff;
  padding: 8px 12px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

/* result styling: change these selectors to match the injected markup */
#site-search .result .title a { color: #1a0dab; font-weight:600; }
#site-search .result .snippet { color:#444; font-size:13px; line-height:1.4; }

Troubleshooting tips: use the dev tools "Computed" tab to see which rule wins, test selectors in the console, clear cache after changes, and check mobile breakpoints. If you want, compare your work to the DaniWeb search that mentioned to see a real-world example of a fully-styled CSE.

Recommended Answers

All 7 Replies

Member Avatar for pritaeas

You can just use CSS to style the form elements.

Member Avatar for pol.bala

css to which attribute? Which value of css? can you give me an example please?

Member Avatar for EvolutionFallen

You need to find out which classes/ids to style. Use firebug or some other browser developer tool to inspect the element you want to style, then check the class or ID and use CSS selectors to make the changes.

Member Avatar for JorgeM

Google's CSE page allows you to do some styling, but as suggested above, when you put your page together, simply run through a search and view the results by looking at the source code (view source) by right clicking somewhere in the page. You'll find all of the elements there, there IDs and Classes. Then, just build your own custom CSS to target these elements with the styles that you choose.

A good example of customizing Google Custom Search Engine is here on this site. Try using at Daniweb's search feature. You will see that the page is customized to fit this site's design.

Edited by JorgeM
Member Avatar for pol.bala 
          <script>
  (function() {
    var cx = '016471833128044741709:svp5aakj9fw';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//www.google.com/cse/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:search></gcse:search>

this is the code... i need to make this stylize

Member Avatar for JorgeM

I do not beleive that you may be understanding the recommendations in this thread. What you are showing in your post is the JavaScript for the CSE. When you integrate this into your page and run it, the page that is displayed will have several more elements that were created due to the response. Just view the source code. Once you see which elements where created and their associated ID and Classes, you can then go back to your source code for the search page you created and add a <style> section to that page, then add your custom styles.

Have you looked at the search page results on this site? That is a good example.

Member Avatar for pol.bala

i got it. thank you

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.