Adding a Search to Your Site > Using a Customized Search Results Style Sheet
Using a Customized Search Results Style Sheet
To use a custom search results style sheet, you will add the following code into the HTML file where you want the search box to be displayed. You will need to specify the name of the style sheet you create as well as the site URL to search. For this example, we created a style sheet called sample_stylesheet. We will use the NYU Webguide URL, www.nyu.edu/webguide, as the site to search.
<form method="get" action="http://google.nyu.edu/search">
<input type="hidden" name="site" value="NYUWeb_Main" />
<input type="hidden" name="client" value="NYUWeb_Main" />
<input type="hidden" name="output" value="xml_no_dtd" />
<input type="hidden" name="proxyreload" value="1" />
<!-- here is where you add your style sheet name -->
<input type="hidden" name="proxystylesheet" value="sample_stylesheet" />
<!-- here is where you add your URL -->
<input type="hidden" name="sitesearch" value="www.nyu.edu/webguide" />
<input size="20" name=q value="" />
<input type="submit" value="Search" />
</form>
To ensure that your site is properly searched, make sure that the sitesearch variable (the Web address without the http:// prefix) is not followed by a trailing slash.
The code above will produce the following search box:
Type a word in the search box above (for example, email) and click the "Search" button to view the results page. The search results style sheet used is called "sample_stylesheet".
Creating Your Own Stylesheet
To create your own custom style sheet, you will need to modify our sample style sheet. For example, you might want to add in html to reference header and footer images that match the rest of your Web site, or add in a link to your existing CSS file.
Please download the bare-bones style sheet file below to get started. To save the file to your desktop, PC users should right-click the link, Mac users should hold down the Control key.
Once you've saved the file to your desktop, open it with a plain text editor. For example, on every PC there is a copy of "Notepad", an ASCII editor. For PC, this is the best program to use. Do not use Microsoft Word or WordPad as these applications may introduce hidden formatting characters. For Macintosh users, we recommend SimpleText (for Mac OS 9), TextEdit (for Mac OSX making sure to specify that you're creating a plain text document from the Preferences), BBEdit or TextWrangler.
Examples of Results Page Customization
Here are three examples of how a style sheet can be customized:
- Default "Bare-Bones" Style
Type a word in the search box below (for example, email) and click the "Search" button to view the results page. The search results style sheet used is called "sample_stylesheet".
This is the style used in the above example. It has no customization and uses the default Google colors. If you wish, you can use this basic style for your search results page. You will not need to download the style sheet. Just substitute your site's URL as the value of the variable sitesearch in the code above. Then, put the above code on the page where you want the search box to be displayed.
- Custom Header/Footer Style
Type a word in the search box below (for example, email) and click the "Search" button to view the results page. The search results style sheet used is called "header_footer_sample".
This is an example of a search results page that includes header and footer code. Scan the file for the my_page_header section. You'll see the html code which controls the display of the header. The section called my_page_footer controls the display of the footer. The search engine dynamically places the search results in between these two sections.
- Custom Style Using a CSS File
Type a word in the search box below (for example, email) and click the "Search" button to view the results page. The search results style sheet used is called "css_sample".
This is an example of a search results page that includes a reference to a site's own cascading style sheet (CSS). Custom header and footer code is also added to create a page that resembles the look and feel of the existing site. We've used the Office of Career Services site style sheet as an example. The "look" is Career Services, but the search results are from the Webguide.
Sections of the style sheet are labelled according to what elements they affect, and marked either "can be customized" or "do not customize". Please adhere to these guidelines.
Once you've made your changes to the style sheet, make sure to save it and name it something memorable. The file name, for example, could contain your directory name, eg. "musicdept_search".
NOTE:
Once you've created your style sheet and are ready to implement your custom search results page, you must notify the NYU Web Team at webteam@nyu.edu in order to have the style sheet uploaded to the Google Search appliance. Provide the following information:
- The name of the style sheet
- The location in your site in which the style sheet may be found
We will then upload and test the style sheet. If we find any errors, we will contact you with more information.
|
