Customizing guide layout templates

LibGuides offers two basic layouts for guide pages: tabbed navigation and side navigation. This not only determines where on the page the navigation menu appears, but it also determines the column layout of your pages. See the panels below for examples.

Each system has two default templates, one for tabbed navigation and one for side navigation. You can create customized templates, but please note:

  • If you do not have LibGuides CMS, you are limited to the two system default templates. You can customize each, but cannot create additional customized templates.
  • If you have LibGuides CMS, you can create as many custom templates as you'd like. These will exist in addition to the system default templates.

For guides using a tabbed navigation template, the page navigation menu appears as tabs at the top of the page. Each page of the guide can be laid out with 1 to 4 content columns, with a full-width box at both the top and bottom of the page. The example below shows a tabbed navigation guide with a full-width top box, followed by two content columns.

Example of a tabbed navigation guide

For guides using a side navigation template, pages are divided into two columns: the first contains the navigation menu (which can also contain content boxes), and the second is a larger column containing the page content. The example below illustrates the general organization and column layout, with the navigation column at the default width of 25% and the content column at the default width of 75%. You'll also notice that there is a content box just below the side-navigation menu.

Example of a side navigation guide


Customizing a 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

If you have LibGuides CMS, you can create a new template based upon any existing template, or you can select an existing custom template to modify it.

If you do not have LibGuides CMS, then you can select from either default template to customize it.

  1. Go to Admin > Look & Feel.
  2. Click on the Page Layout tab and select Guide.
  3. Click on the Customize Guide 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 Guide from the Page Layout dropdown

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 have LibGuides CMS, every template you create needs to be given a name. If you are editing an existing custom template, you do not need to change its name.
    • If you do not have LibGuides CMS, you are not required to change the name of either default template. However, you may find it helpful to do so, that way you'll know that the template has been customized.

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 columns and boxes for your guide 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 when creating custom column configurations. See the tabbed navigation syntax and side navigation syntax sections below for tips and examples.
    • 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 

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 or group level, as appropriate.
{{breadcrumbs}} Outputs the breadcrumbs in the format Institution Reference > System Name > Group Name > Guide Name > Page Name.
{{guide_title}} Outputs the title of the guide.
{{page_title}} Outputs the page title.
{{guide_description}} Outputs the guide description.
{{guide_nav}} Outputs all page titles in an unordered list, so you can customize this area via CSS.
{{content}} Outputs the content area of the entire page (all boxes).
If using this, do not use the other {{content_something}} options below.
Alternately, if using the options below, do not include this keyword on the page.
{{content_col_<id>}} Outputs the boxes belonging to the column designated.
Replace <id> with the appropriate identifier for the column. (e.g., {{content_col_1}}, {{content_col_2}}, etc.)
Do not use if using {{content}} in the template.
{{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.
Do not use if using {{content}} in the template.
{{content_box_profile}} Outputs the profile box for the guide owner.
Do not use if using {{content}} in the template.
{{content_box_profile_<id>}} Outputs the profile box for a specific user.
Replace <id> with the appropriate User ID.
Do not use if using {{content}} in the template.
{{page_prev_next_links}} Outputs the previous / next buttons.
Style them however you'd like via CSS.
{{guide_updated}} Outputs the date the guide was last updated.
{{guide_url}} Outputs the guide's URL (or page URL, if on a specific page).
{{guide_subjects}} Outputs a linked list of subject categories associated with the guide.
{{guide_tags}} Outputs a linked list of tags associated with the guide.
{{public_footer}} Outputs the footer defined either at the system level or group level, as appropriate.
{{side_nav_boxes}} Outputs the boxes below the side-nav page listing.
Only applicable to side-nav templates.
Do not use if using the {{content_col_<id>}} keyword, only if using the {{content}} keyword.

By default, all guides are made up of 1 row with varying columns. However, you can replace the {{content}} keyword of the template with whatever you'd like to create the rows / columns for your guide.  (This is how you achieve the look of some boxes spanning 2 columns, while below that box there are 2 columns...and whatever else you can think of. ;)

Best Practices:
  • Copy the HTML of the template into an HTML editor of some sort (could range from Notepad to TextWrangler, Coda, DreamWeaver...whatever you like) to help keep everything straight, so you know how many divs you've opened - and equally as important - how many you've  closed. Not always easy to keep straight - the color coding / tabbing in and out in these programs really does help!
  • Use an HTML Validator to make sure what you've written is proper HTML.
  • Then paste your modified template into your LibGuides system.
Row syntax:
<div class="row s-lg-row"> </div>
  • ​​You need a div with specific classes to define the row. Every template needs at least ONE row.
  • If you are going to create more than one row, it's a good idea to give each row a unique ID.
Column syntax
<div id="s-lg-col-<id>" class="col-md-<col-width>">
  <div class="s-lg-col-boxes">
    {{content_col_<id>}}
  </div>
</div>
  • In the above example, <id> is the id of that column and <col-width> is the width of the column (number between 1 and 12).
  • Each column consists of 2 divs and at least one keyword - the {{content_col_<id>}} keyword.
    • You can add whatever content keywords you'd like - specific content boxes or profiles.
    • You can leave out the {{content_col_<id>}} keyword if you do not want people to add boxes to that column.
  • Each column has a unique ID (number) that is used in both the outer div ID and the column keyword.
  • Each column has a class that defines the width of that column - col-md-#, where # is the width from 1 to 12.
  • The total width of all columns on the page (so, the number in the col-md-<col-width> class) must equal 12.
  • The 2nd div is what prevents you from having to reload the guide edit page after adding a box to the page.
    If you do not include this 2nd div / associated class, you will have to reload the page to see any new boxes.
Example 1. Template With 2 Columns:

Replace the {{content}} keyword with this:

<div class="row s-lg-row">
  <div id="s-lg-col-1" class="col-md-10">
    <div class="s-lg-col-boxes">
      {{content_col_1}}
    </div>
  </div>

  <div id="s-lg-col-2" class="col-md-2">
    <div class="s-lg-col-boxes">
      {{content_col_2}}
    </div>
  </div>
</div>
Example 2. Template with 2 Columns & Other Content Keywords:

Replace the {{content}} keyword with this:

<div class="row s-lg-row">
  <div id="s-lg-col-1" class="col-md-10">
    <div class="s-lg-col-boxes">
      {{content_col_1}}
    </div>
  </div>

  <div id="s-lg-col-2" class="col-md-2">
    <div class="s-lg-col-boxes">
      {{content_box_1909}}
      {{content_box_profile}}
      {{content_col_2}}
    </div>
  </div>
</div>
Example 3. Template with 2 Rows (Row 1 has 2 columns; Row 2 has 3 columns):

Replace the {{content}} keyword with this:

<div id="s-lg-row-1" class="row s-lg-row">
  <div id="s-lg-col-1" class="col-md-10">
    <div class="s-lg-col-boxes">
      {{content_col_1}}
    </div>
  </div>

  <div id="s-lg-col-2" class="col-md-2">
    <div class="s-lg-col-boxes">
      {{content_col_2}}
    </div>
  </div>
</div>

<div id="s-lg-row-2" class="row s-lg-row">
  <div id="s-lg-col-3" class="col-md-5">
    <div class="s-lg-col-boxes">
      {{content_col_3}}
    </div>
  </div>

  <div id="s-lg-col-4" class="col-md-5">
    <div class="s-lg-col-boxes">
      {{content_col_4}}
    </div>
  </div>

  <div id="s-lg-col-5" class="col-md-2">
    <div class="s-lg-col-boxes">
      {{content_col_5}}
    </div>
  </div>
</div>

By default, all side nave guides are made up of 1 row with 2 columns. However, you can replace the {{content}} keyword of the template with whatever you'd like to create the rows / columns for your guide.

Best Practices:
  • Copy the HTML of the template into an HTML editor of some sort (could range from Notepad to TextWrangler, Coda, DreamWeaver...whatever you like) to help keep everything straight, so you know how many divs you've opened - and equally as important - how many you've  closed. Not always easy to keep straight - the color coding / tabbing in and out in these programs really does help!
  • Use an HTML Validator to make sure what you've written is proper HTML.
  • Then paste your modified template into your LibGuides system.
Row syntax:
<div id="s-lg-row-<id>" class="row s-lg-row"> </div>
  • In the above example,  <id> is the id of that column.
  • Unlike the Tabbed Nav template, the Side Nav template already has the one base row defined. This is because the two columns are also already defined.
  • If you decide to create more than one row, it's a good idea to give each row a unique ID. Also, do not replicate the {{guide_nav}} or {{side_nav_boxes}} keywords after the first row, or you'll end up duplicating the page list / boxes added to that row.
Column syntax
<div id="s-lg-col-<id>" class="col-md-<col-width>">
  <div class="s-lg-col-boxes">
    {{content_col_<id>}}
  </div>
</div>
  • In the above example,  <id> is the id of that column and <col-width> is the width of the column (number between 1 and 12).
  • As mentioned for the row syntax, the two columns are already defined.
    • The first column is the one that contains the page listing - the left hand column.
    • The second column contains the rest of the page content - the right hand column.
    • You can easily adjust the width of these two columns by simply adjusting the  col-md-<col-width> class in that column's outer <div> tag. By default, the left column is 3 and the right column is 9.
  • If you remove the {{side_nav_boxes}}  keyword from the first column, you will remove the ability to add boxes to that column.
  • You  can replace the {{content}} keyword with custom columns, if you wish.
    • Please keep the width of the page in mind when creating columns here.
    • If you decide to add additional columns, you will need to add an additional row tag, as well as the 2 <div> elements for each column. (See the template examples below.)
  • Each column consists of 2  <div> elementss and at least one keyword - the {{content_col_<id>}} keyword.
    • You can add whatever content keywords you'd like - specific content boxes or profiles.
    • You can leave out the {{content_col_<id>}} keyword if you do not want people to add boxes to that column.
  • Each column has a unique ID (number) that is used in both the outer <div> ID and the column keyword.
  • Each column has a class that defines the width of that column - col-md-#, where # is the width from 1 to 12.
  • The total width of all columns on the page (so, the number in the col-md-<col-width> class) must equal 12. Even though the 2nd column - where you're working - is using a column width of 9, the columns you create within that area can still add up to 12, because in Bootstrap, the columns are nestable. ( See their documentation to learn more about that.)
  • The 2nd <div> is what prevents you from having to reload the guide edit page after adding a box to the page. If you do not include this 2nd <div> / associated class, you will have to reload the page to see any new boxes.
Template With 2 Content Columns vs. 1 Content Column:

Replace the {{content}} keyword (and only the {{content}} keyword) with this:

<div class="row s-lg-row">
  <div id="s-lg-col-1" class="col-md-6">
    <div class="s-lg-col-boxes">
      {{content_col_1}}
    </div>
  </div>

  <div id="s-lg-col-2" class="col-md-6">
    <div class="s-lg-col-boxes">
      {{content_col_2}}
    </div>
  </div>
</div>
Template with 2 Content Columns (vs. 1 Content Column) & Other Content Keywords

Replace the {{content}} keyword (and  only the {{content}} keyword) with this:

<div class="row s-lg-row">
  <div id="s-lg-col-1" class="col-md-9">
    <div class="s-lg-col-boxes">
      {{content_col_1}}
    </div>
  </div>

  <div id="s-lg-col-2" class="col-md-3">
    <div class="s-lg-col-boxes">
      {{content_box_1909}}
      {{content_box_profile}}
      {{content_col_2}}
    </div>
  </div>
</div>
Template - Switch Page List to Right Side of Page

Replace this code:

<div id="s-lg-tabs-container" class="container s-lib-side-borders pad-top-med">
  <div id="s-lg-guide-tabs">
    <div class="row">
      <div class="col-md-3 s-lg-tabs-side pad-bottom-med">
        <ul class="nav nav-pills nav-stacked">{{guide_nav}}</ul>
        {{side_nav_boxes}}
      </div>
      <div class="col-md-9">
        <div class="s-lg-tab-content">
          <div class="tab-pane active">
            {{content}}
          </div>
        </div>
        {{page_prev_next_links}}
      </div>
    </div>
  </div>
</div>

With this code:

<div id="s-lg-tabs-container" class="container s-lib-side-borders pad-top-med">
  <div id="s-lg-guide-tabs">
    <div class="row">
      <div class="col-md-9">
        <div class="s-lg-tab-content">
          <div class="tab-pane active">
            {{content}}
          </div>
        </div>
        {{page_prev_next_links}}
      </div>
      <div class="col-md-3 s-lg-tabs-side pad-bottom-med">
        <ul class="nav nav-pills nav-stacked">{{guide_nav}}</ul>
        {{side_nav_boxes}}
      </div>
    </div>
  </div>
</div>

Step 4. Customize the keyword parameters

There are a few keywords (listed below) where you have parameters around where to display the information:

  • on every page in the guide, or
  • only on the homepage of the guide.

These parameters appear in the Keyword Parameters section below the Template Code box, so you may have to scroll down a bit to see them.

Keyword Parameter Options:

  • guide_description: Displays the guide description on all pages or just the homepage of the guide.
  • content_box_profile: Displays the guide owner's profile box in the designated place on all pages or just the homepage of the guide.
  • content_box_profile_<id>: Displays the designated profile box in the designated place on all pages or just the homepage of the guide.
  • content_box_<id>: Displays the designated content box in the designated place on all pages or just the homepage of the guide.

Only Keyword Parameters found in the template code will appear in this area. That means that if you do not have one of these keywords defined in the template, it will not appear in this section.

If you add (or remove) these related keywords, click the link in the on-screen help just above the parameter list to update the list. Or click Save changes to this template at the bottom.

Tag Parameter example


Step 5. Select template options

Below the Keyword Parameters, 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.)
  2. Use default guide admin interface: select this checkbox if you only want to apply your custom template to the public view of your guides. When editing your guides, the default template layout will be used.
    • For example, let's say you don't want to display the page title on your guide. You could do this by removing the {{page_title}} keyword and related code.
    • However, this would also prevent you from ever renaming the guide, since it also wouldn't display the guide title while editing the guide.
    • By choosing to use the default guide admin interface, you won't have to worry since the {{page_title}} keyword would only be removed from the public view of the guide.

Options to share the template in the community, and use default guide admin interface


Step 6. Save your template

  1. If you are making changes to an existing template, click on the Save changes to this template button.
    • Please note: if you have LibGuides CMS, you cannot save changes to the system default templates.
    • Once you save, your changes will be reflected in any guide using that template.
  2. If you have LibGuides CMS, click on the Save as a NEW template button to save your changes as a brand new custom template.
    • Please note: if you do not have LibGuides CMS, you are limited to saving changes to the two system default templates.
    • Once you save, you will be able to apply the new template to your guides.

Save buttons


Managing customized templates

When editing a template, you can:

  1. Restore a system default template: if you do not have CMS, you are only able to make changes to the two system default templates. If at any point you would like to restore those templates to their default template code, click on the Reset this template to default button.
    • This will permanently remove your customizations, so please make a copy of your template code if you want to save any of your work.
  2. Delete a custom template: if you have LibGuides CMS, you can create an unlimited number of custom templates. If you no longer need one, 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.
    • Guides assigned to that template will revert to the current default layout. If that template was being used as the system/group default, we recommend selecting a different template to use before deleting it.

Reset this template to default button

Delete this template button

Related Articles