Google Search for SlateCMS

google_search.rhtml

<% # This is the template where search results will display. 
   # It must be called google_search.rhtml and should be placed in the same location as your index.rhtml and backpage.rhtml
   # You'll likely want to copy the contents of your backpage.rhtml and paste the helper (below) in place of the main column
%>

<div id="main">
	<h2>Google Search Results</h2>
	<%= @search_results -%>
</div>

gs_styles.css

/* Search Results Styles - 12/26/11 - /AJ */
#gs_pagination { margin-left: 0; width: 100%; }
#gs_pagination li { list-style-type: none; display: inline; padding: 1px; }

#gs_links { font-size: .8em; width: 100%; margin-bottom: 10px; }

#search-nav-top, #gs_links, #gs_next_prev, #gs_sort, #search-results, #gs_pagination { float: left; }
#search-nav-top #gs_sort { margin-left: 150px; }
#search-results { width: 100%; }

/* Advanced Search Styles */

input[type="submit"] { cursor: pointer; }
#gs_upper_wrap, #gs_find, #search-mode label, #search-mode input, #search-mode select, #gs_find_details, #gs_return_results { float: left; }
#gs_upper_wrap { width: 100%; border: 1px solid #eaeaea; }
#gs_find, #gs_pg_specific { width: 97.8%; margin-bottom: 20px; padding: 10px; }
.gs_left { float: left; width: 30%; padding-bottom: 0; }
#search-mode label { margin: 6px 5px; }

/* Upper grey portion */
#gs_find { background-color: #eaeaea; }
#gs_find input { width: 30%; }
#gs_find label[for="gs_exact"], #gs_find label[for="gs_atleast"], #gs_find label[for="gs_without"] { clear: left; margin-left: 268px; }
#as_q { margin-left: 78px; }        /*** odd id and class name, verify and fix in source ***/
#gs_exact { margin-left: 69px; }
#gs_atleast { margin-left: 23px; }
#gs_without { margin-left: 90px; }

/* Language through Sort */
#gs_find_details { width: 100%; }
#gs_find_details select { margin-top: 5px; }
#gs_find_details .gs_left, label[for="gs_sort"] { clear: left; padding-left: 10px; }
#gs_find_details .gs_left { width: 29%; }
#gs_find_details label[for="gs_domain"] { color: #999; margin-top: 0; }
#gs_domain { margin-left: 4px; width: 34%; }
#gs_find_details label[for="gs_sort"] { margin-left: 2px; margin-right: 233px; }
#gs_find_details label[for="gs_results_limit"] { clear: left; margin-left: 275px; margin-top: 20px; }
#gs_find_details #gs_results_limit { margin-top: 20px; }
#gs_return_results { margin-top: 4px; }

/* Submit Search button */
#gs_adv_search { clear: left; margin-bottom: 10px; margin-left: 90%; width: 8%; }

/* Page Specific Search */
#gs_pg_specific { clear: both; float: left; margin-top: 30px; border: 1px solid #eaeaea; }
#gs_inbound_links { width: 30%; margin-right: 10px; }

search_form_code.rhtml

<% # Paste this where you want the search box on your site to appear
   # It can be included across multiple templates and will point users to google_search.rhtml when they click "Search" 
%>

<%= google_search_box -%>


<%# OR, want placeholder text? Add the following (change "Search..." to the text you want): %>

<%= google_search_box :advanced => false, :placeholder => "Search..."  %>


<%# OR, want a link to advanced search and placeholder text? Add: %>

<%= google_search_box :advanced => true, :placeholder => "Search..."  %>