ⓘ 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: Permalink Button

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 add a "permalink" button (for both the guide's URL and the tab's URL) below a guide's title and description near the top of the page. 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:
Tabs Layout
Permalink Template | Permalink CSS Stylesheet | Permalink Javascript
Side-Nav Layout
Permalink Template | Permalink CSS Stylesheet | Permalink Javascript

To begin, open your system template, enter a new "Template Name" (e.g. Template w/ permalink), 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: Insert a "Permalink" link

The first step is to add a "Permalink" link below your guide's title and description fields.  This link will trigger a popup "modal" that will display the permanent link for a current guide, as well as the currently selected tab.

Find the following code (System Default - Tab Layout template: approximately lines 19-21; System Default: Side-Nav Layout: approximately lines 20-22):

<div id="s-lg-guide-desc-container">

    <span id="s-lg-guide-description">{{guide_description}}</span>

</div>

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

<div id="guidePermalink">

    <span aria-hidden="true" class="glyphicon glyphicon-link"></span>&nbsp;

    <a data-toggle="modal" data-target="#permalink">Permalink</a>

</div>

Click here to show in context

Step 2: Create the popup "modal"

Next you need to create the popup "modal" that will house the permalink content. This code can appear anywhere on the page, but it is recommended that it be placed near the top of the page. You may want to customize the text in red. This should represent the name of your LibGuides system. For instance, RIT's popup will refer to an InfoGuide URL rather than a LibGuide URL.

Find the following code (System Default - Tab Layout: approximately line 3; System Default: Side-Nav Layout: approximately line 4):

{{ADMIN_CMD_BAR}}

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

<!--BEGIN: Permalink Modal-->

<div aria-hidden="true" aria-labelledby="permalinkLabel" class="modal fade" id="permalink" role="dialog" tabindex="-1">

    <div class="modal-dialog">

        <div class="modal-content">

            <div class="modal-body">

                <button aria-label="Close" class="close" data-dismiss="modal" type="button">

                    <span aria-hidden="true">&times;</span>

                </button>

                <h4>{{guide_title}} LibGuide URL</h4>

                <p style="padding-bottom:10px;">{{guide_url}}</p>

                <h4><span id="tabName"></span> Tab URL</h4>

                <p id="tabURL"></p>

            </div>

            <div class="modal-footer">

                <button class="btn btn-default" data-dismiss="modal" type="button">Close</button>

            </div>

        </div>

    </div>

</div>

<!--END: Permalink Modal-->

Click here to show in context

Step 3: Generating a dynamic tab URL

While the permanent URL for an entire guide is automatically generated by the system, you will need to add a small snippet of Javascript in order to generate the URL for a specific tab. You will need to replace the text in red with your LibGuide system's home URL. For instance, RIT's home URL is: https://infoguides.rit.edu

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

<script type="text/javascript">

  $(document).ready(function() {

    var tabName = $('#s-lg-guide-tabs .active a span').text();

    $('#tabName').text(tabName.trim());

    var tabURL = $('#s-lg-guide-tabs .active a').attr('href');

    $('#tabURL').text('http://YourLibGuideURL.com' + tabURL);

  });

</script>

Click here to show in context

Step 4: Stylize Permalink link

The "Permalink" link that you added near the top of each guide will be the default "hyperlink" blue and the cursor will be designed for text selection. To recolor your permalink link and change the cursor to a pointer (indicating that the link should be clicked), insert the following code.

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

<style type="text/css">

  #guidePermalink, #guidePermalink a {

    color:#706F6F;

    cursor:pointer;

  }

</style>

Click here to show in context

Step 5: Remove default "Guide URL" (Optional)

The LibGuides template includes a "Guide URL" (i.e. permalink) that appears near the bottom of each page.  Leaving this link on the page will not effect the functionality of your new Permalink button; however, you may want to remove the link to avoid redundancy. This step is optional.

Remove the following code (System Default - Tab Layout: approximately lines 46-48; System Default - Side-Nav Layout: approximately lines 54-56):

<li id="s-lg-guide-header-url" class="s-lg-h-separator">

    {{guide_url_display}}

</li>

Click here to show in context

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