In This Article

How to hide the LibGuides search box

Near the top of each public page, you'll find a search box that is configured to search specific areas of your site. The search box on the system-level homepage will search all of your public guide pages, the search box on a group homepage will search (by default) within the guides assigned to the group, the search box on the Database A-Z list will search for databases, the search box on a guide page will search (by default) the contents of that guide, etc. 

While these search boxes are in place to help in the search and retrieval of information within your site, there can be times where removing them from the page is necessary to improve the usability of, and remove confusion for, your patrons.


The HTML code of search boxes

For all pages that have a layout template, a search box is included in the default template in various areas.

To view the default structure of the search box on a public page, including their element IDs, click on the panels below.

The search box on the system default homepage is displayed beneath buttons for toggling between the various guide list views. This search box is set to search all guides that are published and in publicly available groups.

System homepage search box

HTML code example

<form role="search" class="form-inline pull-right" action="/srch.php">
  <span>Search:</span>
  <div class="form-group">
    <div class="s-lg-public-search-field">
      <label class="control-label sr-only" for="s-lg-guide-search">Enter Search Words</label>
      <div class="input-group">
        <input type="text" id="s-lg-guide-search" name="q" class="form-control" placeholder="Enter Search Words">
        <span class="input-group-btn">
          <button class="btn btn-default" type="submit">Search</button>
        </span>
      </div>
    </div>
  </div>
</form>
Want to customize the placeholder text for this search box? This can be customized in your system's Language Customization options (see Key IDs 7 and 8 under "Global").

The search box on a group's default homepage is displayed beneath buttons for toggling between the various guide list views. By default, this search box is set to search all guides that are published within the group.

You can change the behavior -- choosing between searching within the group or performing a system-wide search -- for the search box on a group's homepage within that group's settings.

Group homepage search box

HTML code example

<form role="search" class="form-inline pull-right" action="/srch.php"><input type="hidden" name="group_id" value="14416">
  <span>Search:</span>
  <div class="form-group">
    <div class="s-lg-public-search-field">
      <label class="control-label sr-only" for="s-lg-guide-search">Search this Group</label>
      <div class="input-group">
        <input type="text" id="s-lg-guide-search" name="q" class="form-control" placeholder="Search this Group">
        <span class="input-group-btn">
          <button class="btn btn-default" type="submit">Search</button>
        </span>
      </div>
    </div>
  </div>
</form>
Want to customize the placeholder text for this search box? This can be customized in the group's Language Customization options (see Key ID 298 under "Group Homepage" and Key ID 8 under "Global").

The search on a guide page displays in the top right corner of the page, above the guide's content area. By default, this search box is set to search only this guide.

You can change the behavior -- choosing between searching within the guide or performing a system-wide search -- for the search box on guide pages with the Search Options under the System Settings. Or, if you would like to customize the behavior for guides with a group from within that group's settings.

 

Guide search box

HTML code example

<div id="s-lg-guide-header-search">
  <div id="s-lg-guide-search-box">
    <form role="search" id="s-lg-guide-search-form" action="https://springylib.libguides.com/srch.php" method="GET" _lpchecked="1">
      <div class="input-group input-group-sm">
        <input type="text" id="s-lg-guide-search-terms" name="q" class="form-control" placeholder="Search this Guide">
        <label class="sr-only" for="s-lg-guide-search-terms">Search this Guide</label><input type="hidden" name="guide_id" value="682826">
        <span class="input-group-btn">
          <button class="btn btn-default" type="submit">Search</button>
        </span>
      </div>
    </form>
  </div>
</div>
Want to customize the placeholder text for this search box? This can be customized in your system's Language Customization options (see Key ID 320 under "Guide Pages" and Key ID 8 under "Global"). Or for guides within a group, from that group's Language Customization options (see Key ID 320 under "Guide Pages in a Group" and Key ID 8 under "Global").

The search box on the A-Z Database List page is displayed to the right of the subject, type, and vendor filters. This search box only searches for keywords in your database assets -- it does not search within any guide content.

A-Z Database List page search box

HTML code example

<div id="col-search" class="col-md-3 center">
  <form role="search" onsubmit="springSpace.publicObj.filterAzBySearch(1); return false;" _lpchecked="1">
    <div class="form-group">
      <label class="control-label sr-only" for="s-lg-az-search">DATABASES</label>
      <div class="input-group">
        <input type="text" id="s-lg-az-search" class="form-control" placeholder="Search for Databases">
        <span class="input-group-btn">
          <button class="btn btn-default" type="submit">Go</button>
        </span>
      </div>
    </div>
  </form>
</div>
Want to customize the placeholder text for this search box? This can be customized in your system's Language Customization options (see Key IDs 55 and 56 under "A-Z Database List").

The search box on the profiles landing page is displayed in the sidebar. This search box will perform a system-wide search.

Profiles landing page search box

HTML code example

<div id="s-lg-profile-search-div">
  <div class="margin-bottom-xlg">
    <div class="s-lib-public-side-header">
      <h2 class="pad-bottom-sm">Search</h2>
    </div>
    <div class="txt pad-top-sm">
      <div class="margin-bottom-med">Search the full text of this site. Results will link to pages containing your terms; results from subject page searches are automatically filtered by that subject.
      </div>
    </div>
    <div class="input-append">
      <form role="search" method="GET" action="/srch.php">
        <label class="control-label sr-only" for="s-lg-guide-search">Guide Search Terms</label>
        <input class="form-control" name="q" id="s-lg-guide-search" type="text" placeholder="Enter Search Words">
        <button class="btn btn-info" type="submit" style="margin-top:2px;">Search</button>
      </form>
    </div>
  </div>
</div>
Want to customize the placeholder text for this search box? This can be customized in your system's Language Customization options (see Key IDs 7, 41, and 42 under "Global").

The search box on the subjects pages is displayed in the sidebar. This search box will perform a system-wide search.

Subjects  page search box

HTML code example

<div class="margin-bottom-xlg">
  <div class="s-lib-public-side-header">
    <h2 class="pad-bottom-sm">Search</h2>
  </div>
  <div class="txt pad-top-sm">
    <div class="margin-bottom-med">Search the full text of this site. Results will link to pages containing your terms; results from subject page searches are automatically filtered by that subject.
    </div>
  </div>
  <div class="input-append">
    <form role="search" method="GET" action="/srch.php">
      <input type="hidden" name="subject" value="Animal Science">
      <label class="control-label sr-only" for="s-lg-guide-search">Guide Search Terms</label>
      <input class="form-control" name="q" id="s-lg-guide-search" type="text" placeholder="Enter Search Words">
      <button class="btn btn-info" type="submit" style="margin-top:2px;">Search</button>
    </form>
  </div>
</div>
Want to customize the placeholder text for this search box? This can be customized in your system's Language Customization options (see Key IDs 7, 41, and 42 under "Global").

[Return to top]

How do I hide a search box?

There are actually two ways you could approach this: using custom CSS code, or removing the search box elements from your page templates.

Using custom CSS code

One option for hiding a search box is by adding some custom CSS code to LibGuides. This takes less work than removing search boxes from each page template. The code you would need depends on the search box you are trying to hide.

To use the CSS to hide search boxes yourself, simply copy the code below and paste it in the appropriate Custom JS/CSS Code box.

  • To hide the search boxes for the system-level homepage, A-Z database list, profiles landing page, subjects pages, or all guides that are not in a group, or if you do not have LibGuides CMS, add your code to your system-level Custom JS/CSS Code.
  • If you have LibGuides CMS:
    • You can hide the search boxes for a group's homepage and for the guides within that group by adding your code to the group's Custom JS/CSS Code.
    • You can hide the search box for a single guide by adding the guide-level search box code to the guide's Custom JS/CSS Code.

System-level and group homepages

<style>
#s-lg-hp-nav-bottom .clearfix {
  display: none;
}
</style>

Guides

<style>
#s-lg-guide-header-search {
  display: none;
}
</style>

A-Z Database List

<style>
#col-search {
  display: none;
}
/*Restores padding to the filters panel*/
#s-lg-az-filters {
  padding-bottom: 15px;
}
</style>

Profiles landing page

<style>
#s-lg-profile-search-div {
  display: none;
}
</style>

Subject pages

<style>
#s-lg-sb-cols #col2 > .margin-bottom-xlg {
  display: none;
}
</style>

[Return to top]

Using custom page templates

You can also remove the search boxes from pages by creating custom templates. For guides, you would also need to ensure that all guides are using your custom template (this is easier if you have locked each guide into a specific template).

When editing a template, you can remove the search box by deleting the following code:

System-level and group homepage

<div class="clearfix">
  {{search_guides}}
</div>

Guides

<div id="s-lg-guide-header-search">
  {{guide_search}}
</div>

A-Z Database List

Search box cannot be removed via the template code. 
It must be hidden with CSS.

Profiles landing page and Subject landing/individual pages

{{content_box_search}}

For best results, we do not recommend using comment tags to hide elements in page templates.

[Return to top]

Related Articles