ⓘ Library Under Construction

The library’s circulating books, journals, and many of its services are now located in the Ritter Ice Arena. More information.

RIT LibGuides v2 Customizations: Side Nav with Column Flexibility

This guide includes step-by-step directions for various customizations implemented on RIT's InfoGuides system
https://infoguides.rit.edu/prf.php?account_id=419

Purpose

The directions on this page will explain how to use the built-in System Default - Tab Layout template to create a guide template with side navigation, but also with the flexibility for guide creators to choose the number of columns and column layout. Example

While it is recommended that you follow the directions on this page to implement the code yourself, you may also download a completed copy of this template to copy and paste into your system:
Side Navigation with Column Flexibility Template | Side Navigation with Column Flexibility CSS Stylesheet

To begin, open the System Default - Tab Layout template, enter a new "Template Name" (e.g. Side nav w/ columns), and choose "Save as a NEW template" near the bottom of the page. It may be easier to copy the template to an external editor (e.g. Notepad, Notepad++) and make all changes there before saving in the system. Click here to show in context

Step 1: Move the Title Bar

By default the title bar is set to appear below your navigational tabs in the System Default - Tab Layout template.  If you do not move the title bar to the top of the following series of code, all of your options for "Page" and "Layout," as well as the internal "Discuss Guide" feature, will now appear at the end of the guide's content. These steps will ensure that the title bar remains at the top of your content.

Find <div id="s-lg-tabs-container" class="container s-lib-side-borders pad-top-med">
(approximately line 25)

Add the following code immediately before the code you just found:

<div id="s-lg-guide-tabs-title-bar" class="container s-lib-side-borders"></div>

Click here to show in context

Step 2: Remove Tab-based Navigation

Before you can add in side navigation, you will need to remove the tab-based navigation that is the default option in the System Default - Tab Layout template.

Step 3: Add Side Navigation

To add side navigation, you must utilize Bootstrap's grid system. First, you must create a row with two columns: one for navigation and one for content. Then, you must populate these columns with the appropriate content.

Find <div id="s-lg-guide-tabs" class="tabs" role="navigation" aria-label="Guide Page Menu">
(approximately line 27)

Add the following code immediately after the code you just found:

<div class="row">

    <div class="col-md-3">

            <ul class="nav nav-pills nav-stacked">

            {{guide_nav}}

            </ul>

    </div>

    <div class="col-md-9">

        <div class="s-lg-tab-content">

            <div class="tab-pane active" id="s-lg-guide-main">

                {{empty_page_sub_page_list}} {{content}}

            </div>

        </div>{{page_prev_next_links}}

    </div>

</div>

Click here to show in context

Step 4: Remove Duplicated Content

Now that you have added the guide's content to one of the columns you created in the step above, you must remove the code for content from the original System Default - Tab Layout template; otherwise, you will have duplicate content on every guide page.

Remove the following code (approximately lines 44-50):

<div id="s-lg-guide-tabs-title-bar" class="container s-lib-side-borders"></div>

<!-- BEGIN: Guide Content -->

<div id="s-lg-guide-main" class="container s-lib-main s-lib-side-borders">

    {{empty_page_sub_page_list}}

    {{content}}

    {{page_prev_next_links}}

</div>

Click "Save changes to this template" near the bottom of the screen

Click here to show in context

Step 5: Round Bottom Corners

Because your new side navigation is based on the System Default - Tab Layout tabs which run across the top of your screen, the bottoms of each side tab will now be flat. In order to round-out your side tabs, you will need to add the following code to the built-in "Custom JS/CSS Code" or to your institution's custom stylesheet.

Add the following CSS code as "Custom JS/CSS Code":

<style type="text/css">

  #s-lg-tabs-container .nav-pills > .active > a,
  #s-lg-tabs-container .nav-pills > li > a,
  #s-lg-tabs-container .nav-pills > li > a.s-lg-tab-top-link,
  #s-lg-tabs-container .nav-pills > li > a.s-lg-tab-top-link:hover,
  #s-lg-tabs-container .nav-pills > li > button.s-lg-tab-top-link,
  #s-lg-tabs-container .nav-pills > li > button.s-lg-tab-top-link:hover {

    border-radius: 4px;

  }

  #s-lg-tabs-container .nav-pills > li > a.s-lg-tab-drop,
  #s-lg-tabs-container .nav-pills > li > button.s-lg-tab-drop {

    border-radius: 0 4px 4px 0;

  }

</style>

Click here to show in context

Edit this Guide

Log into Dashboard

Use of RIT resources is reserved for current RIT students, faculty and staff for academic and teaching purposes only.
Please contact your librarian with any questions.

Facebook icon  Twitter icon  Instagram icon  YouTube icon