The Search Tool consists of a search box, the text “Search…” and a search button/icon shaped like a magnifying glass.
- Required on every institutional web page
- Search results for the current website displayed first
- Search results screen enables searching across every university web page
- Placement instructions detailed in Layout (HTML) and Style (CSS)
- CSS for responsive and non-responsive websites is available in Layout (HTML) and Style (CSS) - Section 2.3. Copy and paste CSS code at the end of the website's main CSS file.
- Exemption: Intercollegiate Athletics
The search tool is 319 pixels wide by 28 pixels tall, with a roundness of 3 pixels.
The magnifying glass icon is 16 pixels x 16 pixels.
Sample code is provided in Section 3.
4.1 Search Box Style Variations
- Standard: white fill and 1 pixel stroke set to #666666
- Semi-transparent: no fill, 1 pixel stroke set to #FFFFFF, and 50% transparent white search button/icon
4.2 Use
- Use approved, unaltered versions only. (See Resources and Downloads)
- Use u.search.msu.edu to display search results.
- Do not place more than one search tool on a web page.
- Verify and adjust background image to ensure accessibility color contrast when using the semi-transparent search box.
- Do not combine with any other marks, graphic elements, or words.
4.3 Exceptions
- Please work with Comms if you have questions about required elements.
- You may request an exception to display additional search tools. For example, tools for searching a course catalog, knowledge base, or library book/journal.
4.4 Related Resources
For technical implementation details, refer to the Search Tool Implementation Guide.
4.5 Unacceptable Search Tool Variations
- Do not reconfigure or resize the Search icon.
- Do not alter the placeholder text inside the Search box.
- Do not change the size of the Search box.
- Do not remove the Search box border.
- Do not change the style, width, or color of the Search box border.
- Do not add "drop shadow" effects to the Search box.
