Skip to Main Content

Search Box Tests

Description

This search box code is for websites using a Content Management System that has the capability to add a tabbed box. The code is a modified version of the EBSCO Search Box Builder

The code for each type of search -- EDS, Enterprise, etc -- will be pasted into the Media/Widget editor for each separate tab of the box.

  • In LibGuides, this is accomplished by clicking Add Box, and selecting Tabbed in the dropdown menu for Type. Select "Display box without borders, padding, or box title..." if you don't want the box outline to appear on the page, and click Save when ready.
  • In Wordpress and Drupal, ensure that you have the a tabs widget/plugin/module installed that will allow you to insert HTML content into each tab. Instructions will vary depending on your site's exact configuration.

After you have created the search box, select the gear icon and create your tabs. For example, you may have tabs for Discovery, Catalog, Databases, and Journals.

After you've created your tabs, click the Add/Reorder dropdown menu and select Media/Widget. Give your widget a name and paste your CSS/HTML code into the "Embed Code" area. Click Save and Close. Repeat for each tab.*

Note that the CSS styling tags are different for each tab; while the styling is the same, this prevents the tabs from overriding each other.

Unlike the other two search box options, this does not require Bootstrap.

*since you created your search box as a Media/Widget asset, it can now be reused on other guides/website pages.

Like what you see? Request your own custom tabbed search box!

 

HTML CLTCC Search