FAQ content

Look & Feel: Customize the search results page layout

In this article

Out of the box, LibGuides will use a default template for your system's search results page. However, you do have the option to create and apply your own custom search page template instead. This can be helpful if you want the search results page layout to more closely match the look and feel of your site.

Before you get started with customizing a template, it's important to note a few key points.

  • Changing a template's layout requires modifying HTML code, so having some familiarity with HTML is important. If you're learning HTML for the first time, or just need to refresh your memory, the Mozilla Developer Network has some great tutorials and references.
  • Templates use the Bootstrap grid system to structure content in containers, rows, and columns. Not sure what this means? We recommend learning more in the Bootstrap documentation.
  • Code editors are your friends! Modifying templates within a code editor can make the process go more smoothly. Not only will you have an easier time organizing and editing your code, it also gives you an opportunity to save different versions of your code to your computer. All you need to do is copy and paste the code into LibGuides. There are some really great free and open source code editors, including:
  • Need help? If you run into any snags while customizing a template, contact the Springy Support Team -- we're always happy to lend a hand!

Creating a custom template

Step 1. Select a template to customize

You can create a new template based upon any existing template, or you can select an existing custom template to modify it.

  1. Go to Admin > Look & Feel.
  2. Click on the Page Layout tab and select Search.
  3. Under the Templates tab, click on the Customize Search Page Templates panel to expand it.
  4. From the Select a template dropdown, choose the template you want to customize.

Selecting a search template to customize


Step 2. Give your template a name

  1. In the Template Name field, enter a name for your template.
    • If you are editing an existing custom template, you do not need to change its name.

The Template Name field


Step 3. Modify the template code

The Template Code box contains the HTML code for your template. Throughout the code, you'll find template keywords enclosed in double curly braces (for example, {{content}}). Whereas the HTML code structures the page itself, those keywords are what insert the content into your pages. For example, where you place that {{content}} keyword is where the search results will appear.

Template Code text box

  1. In the Template Code text box, modify the code for your template.
    • See the list of supported template keywords below to see which keywords are available to use. When adding or moving keywords, try to keep them within their parent HTML elements, as they often have element IDs and/or class names that help the keyword content display properly on the page.
    • The syntax of these parent elements is especially important. It can be especially helpful to use the system default template code as a reference, especially if you're updating an older template to use the latest keywords and element IDs/classes.
    • Pro tip: consider copying the template code into a code editor, such as Microsoft Visual Studio Code. This can make it easier to make your changes and keep your code organized. Once finished, just copy and paste the revised code back into the Template Code text box.
Supported template keywords
Keyword Output
{{skip_link}} Outputs the skip link, which users can click to navigate to the main content section of the page.
Important for optimizing page accessibility.
{{public_header}} Outputs the header from the system level.
{{breadcrumbs}} Outputs the breadcrumbs in the format Institution Reference > System Name > Page Name.
{{page_title}} Outputs the title of the page.
{{page_description}} Outputs the page description.
{{page_nav}} Does not currently output content.
{{content_box_search}} Outputs the search box.
{{content}} Outputs the content area of the entire page (search results and filters).
{{content_box_<id>}} Outputs the content box with whatever ID you define in the keyword.
Replace <id> with the appropriate box ID.
The box ID must already exist in a guide the system (e.g., a reusable content guide) for this to work.
{{system_footer}} Outputs the system footer, which includes the "Login to LibApps" and "Report a Problem" links.
{{public_footer}} Outputs the custom footer defined at the system level.

Step 4. Select template options

Below the template code, you'll find the following options:

  1. Make this template shareable in the community: select this checkbox if you would like to share your template with the LibGuides Community. (Please note: copying templates from the community is not yet available.)

Option to share the template in the community


Step 5. Save your template

  1. If you are making changes to an existing template, click on the Save changes to this template button.
  2. Click on the Save as a NEW template button to save your changes as a brand new custom template.

Save buttons


Managing customized templates

When editing a template, you can:

  1. Delete a custom template: if you no longer need the template, click on the Delete this template button.
    • This will permanently remove your template, so please make a copy of your template code if you want to save any of your work.
    • If that template was being used as the system default, we recommend selecting a different template to use before deleting it.

Delete this Template button


Applying a template to your search results page

To change the template being applied to your search results page:

  1. Go to Admin > Look & Feel.
  2. Click on the Page Layout tab and select Search from the dropdown.
  3. Under the Templates tab, in the Layout Options for Search Page panel, select the template you want to apply.
  4. Click the Save button.

Selecting a template


Search results customization: bento & tab layouts

In addition to customizing your page template, you can also customize the layout of the search results themselves. There are two options:

  • Tabbed: this is the default layout. Initially, your system will only search your LibGuides site, so you won't actually see any tabs appear. However, if you add more LibApps search sources to the page, you will see each appear as a tab at the top of your search results. Users can switch between tabs to browse the results from each source.
  • Bento boxes: this layout will display each search source in its own box. The boxes on the search results page will be arranged in rows and columns, allowing users to browse each results from each source from the same page.

You can select from any search source present in your LibApps Search Sources settings.

  • By default, this will include your LibGuides system, A-Z Database List, and your system-level LibGuides blog.
  • If you subscribe to LibAnswers and LibCal, those search sources will also be available to you so you can search FAQs and events.
  • In addition, if you have EBSCO Discovery Service, your LibApps admin can set up a search source so you can search your EDS content right from within LibGuides!
  • Custom search sources can also be created by your LibApps admin.

Selecting a layout

  1. Click on the Search Results Customization tab.
  2. From the Layout dropdown, select your preferred layout.
  3. Click and drag the search sources from the Available Boxes box to your Tabs / Columns in the order of your choice. See the sections below for more info on configuring tabs and bento boxes.
  4. Click the Save button.

Customizing the search sources and layout

Tabbed layout

The Tabbed layout option presents the results from each Search Source on a separate page. The names of the Search Sources go across the top of the results, and users can click on each source to switch between them. You may have many Search Sources set up in LibApps, but that doesn't mean you have to use all of them on your LibGuides search results page. The option is yours. :)

Use the Preview icon in the gray bar at the top to see what your search page looks like as you customize it.

Once you're on the Search Results Customization tab, choose Tab from the Layout dropdown (if it's not already selected).

The page will now show the customization area, with sections for:

  • Tabs: The tabs currently showing on the search results screen. If nothing is listed, your LibGuides results will display by default. The tabs appear on the results page in the same order as they are listed in this section.
  • Available Boxes: These are the available Search Sources.

Adding Tabs:

  • Click on a Search Source in the Available Boxes area and drag it into the Tabs area.
  • Once you have added all of the Search Sources you want to use, click Save.

Removing Tabs:

  • Click on a Search Source in the Tabs area and drag it to the Available Boxes area.
  • Once you have removed all of the Search Sources you want to remove, click Save.

Reordering Tabs:

  • Click on a Search Source in the Tabs area and drag it wherever you'd like it to be in the list.
  • Keep dragging sources up / down until you are satisfied with the order. Click Save.

Search Sources Customization: Pointing out the Preview icon in the gray bar and demonstrating dragging a Search Source into the Tabs column.

Bento box layout

The Bento layout option presents the results from each Search Source in separate boxes on the same page. The names of the Search Sources become the box titles. You may have many Search Sources set up in LibApps, but that doesn't mean you have to use all of them on your LibGuides search results page. The option is yours. :)

Use the Preview icon in the gray bar at the top to see what your search page looks like as you customize it.

Once you're on the Search Results Customization tab, choose Bento from the Layout dropdown.

The page will now show the customization area, with sections for:

  • Columns: You can have up to 3 columns on the search results page, with as many boxes as you want in each column. (Though we wouldn't recommend adding in too many boxes, for your users' benefit! ;) Only columns with search sources in them will display, so if you only have boxes in two of the columns, it'll display 2 columns, each with a width of 50% of the page.
  • Available Boxes: These are the available Search Sources.

Adding Boxes:

  • Click on a Search Source in the Available Boxes area and drag it to the Column where you want it to appear.
  • Once you've added all of hte Search Sources you want to use, click Save.

Removing Boxes:

  • Click on a Search Source in the Tabs area and drag it to the Available Boxes area.
  • Once you've removed all of the Search Sources you want to remove, click Save.

Reordering Boxes:

  • Click on a Search Source in the Columns area and drag it wherever you'd like it to be - including dragging it to a different column.
  • Keep dragging sources up / down / across until you are satisfied with the order. Click Save.

Customizing Box Height:

Since you can have multiple rows of boxes on the page, it only makes sense that you should be able to control the height of the boxes, as well! This allows you to have boxes of similar heights in a single row, etc.

  • Click the edit icon in the Search Source listing.
  • Define a box height, in pixels.
  • Click Save.

Search Sources Customization: Pointing out the Preview icon in the gray bar and demonstrating dragging a Search Source into a bento column.