<pre class="brush:xml;highlight:3">
&lt;script&gt;
(function() {
 var cx = 'REPLACE WITH YOUR OWN ID';
 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);
})();
&lt;/script&gt;

</pre>



Replace line number 3 in the above Javascript code with your own Custom Search engine ID. The above code will look by default for a &lt;div /&gt; element with "gcse-search" class somewhere in your page. Create a &lt;div /&gt; like below. Place this where you want the search to appear in the page.



<pre class="brush:xml;highlight:1">
&lt;div style="min-height:70px;max-height:600px;overflow-y:auto;"&gt;
 &lt;div class="gcse-search"&gt; 
 &lt;/div&gt;
&lt;/div&gt;

</pre>



Notice the wrapper &lt;div /&gt; line 1 above. This is where the size, etc., of input element and results panel is defined. You may want to create a CSS class for this in your implementation instead of inlined style. In your CSE 

account you are also able to define the "Look and Feel" of the custom search including a theme. Styling further is accomplished by overriding 

predefined CSS style rules. Below are sample overrides:



<pre class="brush:css">

// The result items
 .gs-webResult {
 padding-bottom: 13px;
 font-size:11px;
 font-weight: normal; 
 } 

// Search information (ex. About 53 results (0.38 seconds)) 
.gsc-result-info {
 font-weight: normal !important;
 font-size: 9px !important;
}

// The paginator 
.gsc-cursor-page {
 padding: 4px 8px;
 border: 1px solid darkseagreen;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 -khtml-border-radius: 5px;
 border-radius: 5px; 
}

// The text input control 
input.gsc-input {
 font-size: 13px !important;
 font-weight:bold;
}

</pre>




Visit the link below for the complete CSS style rules for the default theme.



<a href="http://www.google.com/cse/style/look/default.css" class="news_link" target="_blank" title="Default theme 

CSS">http://www.google.com/cse/style/look/default.css</a>



To further customize the custom search visit the CSE documentation here.


<a href="https://developers.google.com/custom-search/docs/element" class="news_link" title="CSE Documentation" 
target="_blank">https://developers.google.com/custom-search/docs/element</a>


<h3>
The custom search in PrimeFaces &lt;p:overlayPanel /&gt;
</h3>

Our custom search is lunched from a menu bar. Here is the complete menubar component with the overlay panel in the &lt;f:facet /&gt; section of 

this component. Note that the layout of the Custom Search engine defined in the settings of your account should be either compact or full width.




<pre class="brush:xml">

&lt;h:form prependId="false"&gt; 
 &lt;p:menubar autoDisplay="true" &gt; 
 &lt;p:menuitem url="/home" 
 icon="ui-icon-home" value="Home" /&gt;
 
 &lt;f:facet name="options"&gt;
 &lt;p:graphicImage styleClass="dimmed-image" 
 id="gsePanel"
 value="/images/search-icon.png"
 alt="The Kahimyang Project" /&gt;
 
 &lt;p:overlayPanel styleClass="search-results-overlay" 
 showEffect="slide" 
 hideEffect="fade" 
 for="gsePanel" 
 showEvent="mousedown" 
 hideEvent="mousedown"&gt; 

 &lt;div class="google-s-wrapper" &gt;
 &lt;div class="gcse-search"&gt;
 &lt;/div&gt; 
 &lt;/div&gt;
 &lt;/p:overlayPanel&gt; 
 &lt;/f:facet&gt;
 &lt;/p:menubar&gt;
&lt;/h:form&gt; 

</pre>




Re-styling the menubar for your PrimeFaces theme.



<pre class="brush:css">

// Change default menu bar background color
.ui-menubar {
 background-color: darkseagreen !important;
 } 

// Change text color and weight of font
.ui-menubar .ui-menuitem-link {
 font-weight: bold !important;
 color:#264026 !important;
}

// The dropdown in submenu
.ui-menu-list {
 background-color: darkseagreen !important;
} 

</pre>




As a demo, click on the search icon at the right side of the menu bar of this page (desktop version of this page only). That's it. Good luck.

The Kahimyang
Project

© 2020 Primo Esteria

Connect with Us

The KahimyangProject

© 2020 Primo Esteria

Connect with Us

The Kahimyang
Project