Customize the A-Z Database List page template and navigation bar dropdowns

Customizing a template

A template is what provides the layout of a LibGuides page. Out of the box, LibGuides uses a default template for the A-Z Database List page. If you need to modify this default layout to better fit the look and feel of your site, you can create your own custom template.

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!

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 System Settings from the Admin menu

Selecting a 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, {{navbar_wide}}). Whereas the HTML code structures the page itself, those keywords are what insert the content into your pages. For example, where you place that {{navbar_wide}} keyword is where the database filters and search box will appear.

  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.

Template Code text box 

Supported template keywords

Keyword Output
{{skip_link}} This displays the skip link, which allows users of assistive technologies to navigate easily to the content of the page. (This is hidden off-screen by default, but can be viewed by pressing the TAB key after the page loads.)
{{public_header}} This displays your site's banner or custom header.
{{breadcrumbs}} This displays the navigation breadcrumbs on the page.
{{page_title}} This displays the title of your A-Z Database List, which can be customized in your Language Options.
{{page_description}} This displays the description of the A-Z Database List, which can be customized in your Language Options.
{{navbar_wide}} This is the navigation bar for the A-Z Database List, including the Subject, Type, and Vendor filters, as well as the Search box. You can hide one or more of these filters using Custom CSS code (see Example 2 below).
Please note: older custom templates may instead be using the {{navbar}} keyword with separate {{subject_list}}, {{type_list}}, and {{vendor_list}} keywords.
{{alpha_list}} This displays the alphabetical name filters for the database list ("All", letters "A" to "Z", and "#").
{{search_reset}} This displays the Clear Filters/Browse All Databases button.
{{chat_widget_box}} This displays the chat widget selected in your A-Z Settings.
{{popular_box}} This displays the Popular Databases box listing all databases designated as Popular.
{{trials_box}} This displays the New / Trial Databases box listing all databases designated as New and/or Trial.
{{content_box_experts}} When your A-Z list is filtered by subject, this displays the Experts box listing all of the assigned subject experts. Otherwise, it does not appear.
{{content_box_guides}} When your A-Z list is filtered by subject, this displays the Guides box listing all of the guides assigned to the chosen subject. Otherwise, it does not appear.
{{system_footer}} This displays the LibGuides system footer, including the "Report a problem" and "Login to LibApps" links.
{{public_footer}} This displays your site's custom footer.
{{content_box_<id>}} This is an optional keyword you can use to add a box to your A-Z List from one of your guides. Just replace the <id> with the box's ID number. For example: {{content_box_123456}} for box ID 123456.

Example 1: switching the sidebar from column 2 to column 1

The public A-Z Database List page has two columns: one containing your list of databases, and the other containing your sidebar. By default, the A-Z List is in the first column and the sidebar is in the second column. If you're using a custom template, you can actually modify your HTML code to switch these around!

Tip: Are you using the "System Default - A-Z Page" template? Then you can actually do this by changing the Sidebar Placement option in your A-Z Settings.
<div id="s-lg-az-cols"  class="row">
    <div id="col1" class="col-md-4 center">
        {{chat_widget_box}}
        {{popular_box}}
        {{trials_box}}
        {{content_box_experts}}
        {{content_box_guides}}
    </div>    
    
    <div id="col2" class="col-md-8 center">
        <div id="s-lg-az-index" class="pad-right-sm">
            {{alpha_list}}
        </div>
        <div id="s-lg-az-search-reset" class="pad-top-med pad-bottom-med">
            {{search_reset}}
        </div>
        <div id="s-lg-az-content" class="pad-right-sm pad-top-med">
            <div class="bold s-lib-color-lt-grey pad-top-med text-center">Loading...</div>
        </div>
    </div>
</div>

Example 2: using CSS to hide specific {{navbar_wide}} filters

If you would like to hide any of the filters displayed by the {{navbar_wide}} keyword, go to Admin > Look & Feel > Custom JS/CSS and add as many of the following CSS rules as you need (making sure to keep them between <style></style> tags):

<style>
/* Hide the Subjects dropdown */
#col-subjects {
    display: none;
}
/* Hide the Database Types dropdown */
#col-types {
    display: none;
}
/* Hide the Vendors dropdown */
#col-vendors {
    display: none;
}
/* Hide the search box */
#col-search {
    display: none;
}
</style>

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

Related Articles