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
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>
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.
Remove the following code (approximately lines 28-30):
<ul class="nav nav-tabs split-button-nav" role="menu">
</ul>
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>
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
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>
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.
