CSU Library Website Customization

Documentation of CSU Primo and LibGuides customization

Template

The over all look of the page is defined under template

SprinShare's instruction on how to customize the page.  Look & Feel: Customize the A-Z Database List page layout, template, & sidebar content

LibGuides -> Admin -> Look & Feel -> Page Layout -> A-Z

a-z template explained

 

a-z database template

As of November 16, 2020, we are using A-Z DB 2020 template. The customized one include suggestion boxes on the top.  Make sure the current template is selected not the default one. 

a-z template

Custom CSS for A-Z

Changed icon sizes for database list. 

Added lines to the file:  \includes\libguides\libguides.css
.s-lg-icon {
    max-height: 25px;
    max-width: 25px;
}
 

Template Code

<?xml version="1.0" encoding="UTF-8"?>
<body class="s-lib-public-body">
    {{skip_link}}
    <!-- BEGIN: Page Header -->
    {{public_header}}
    <!-- END: Page Header -->
    <!-- BEGIN: Content Header -->
    <div id="s-lib-public-header" class="s-lib-header container s-lib-side-borders">
        <div id="s-lib-bc">{{breadcrumbs}}
        </div>
        <h1 id="s-lib-public-header-title">{{page_title}}</h1>
        <div id="s-lib-public-header-desc">{{page_description}}</div>

    <!-- Add a special message below the  A-Z page title  -->
 <!--  <div  id="s-lib-public-header-desc" style="padding:15px; background-color:#f7eda3"><span style="color:#EE0000; line-height:1.5;"><strong>To access library e-resources, please first log out of Pulse Secure or secure.colostate.edu. After logging out, just click on the e-resource and you will be prompted to enter your eID information.</strong></span></div> -->
    <!-- END: Page Header -->

    </div>
    <!-- END: Content Header -->
    <!-- BEGIN: Nav Bar -->
    <div id="s-lib-public-nav" class="container s-lib-side-borders">
        {{page_nav}}
    </div>
    <!-- END: Nav Bar -->
        
    <!-- End of Custom Help Boxes -->
    <!-- BEGIN: content -->
    <div id="s-lib-public-main" class="s-lib-main container s-lib-side-borders">
        <section>
            <div class="row s-lg-row">
                <!-- Starting Point Box -->
                <div class="col-md-4">                    
                   {{content_box_15654453}}   
                </div>
                
                <!-- Start of Need Help Box -->
                <div class="col-md-4">
               {{content_box_15654864}}                       
                </div>
                <!-- End of Help Box -->
                
                <!-- Start of Legend Box -->
                <div class="col-md-4">    
                {{content_box_18443432}}                   
                </div>
            <!-- End of legend Box -->                        
    </div> 
        </section>
        <section>
            <div id="s-lg-az-search-bar" class="row">
                <div id="az-search-col-1" class="col-md-12 center">
                    {{navbar_wide}}
                </div>
            </div>
        </section>
        <section>
            <div id="s-lg-az-cols"  class="row">
                <div id="col1" 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 id="col2" class="col-md-4 center">
                    {{content_box_16746473}}
                    {{popular_box}}
                    {{trials_box}}
                    {{content_box_experts}}
                    {{content_box_guides}}
                </div>
            </div>
        </section>
    </div>
    <!-- END: content -->
        <!-- BEGIN: Page Footer -->
        {{system_footer}}
        <!-- END: Page Footer -->
    <div id="s-lib-alert" title="">
        <div id="s-lib-alert-content"></div>
    </div>        
    <div id="s-lib-popover-title" class="hide">
        <span class="text-info"><strong>title</strong></span>
        <button type="button" id="popclose" class="close" onclick="jQuery('.s-lib-popover').popover('hide')">&times;</button>
    </div>
    <div id="s-lib-popover-content" class="hide"><i class="fa fa-refresh fa-spin"></i> Loading...
        <button class="btn btn-default btn-sm popclose" type="button">Close</button>
    </div>        
    <div id="s-lib-scroll-top">
        <a href="javascript:void(0);" onclick="jQuery('html, body').animate({scrollTop: 0}, 750);" title="Back to Top" aria-label="Back to Top"
            aria-hidden="true">
            <span class="fa-stack fa-lg">
                <i class="fa fa-square-o fa-stack-2x"></i>
                <i class="fa fa-angle-double-up fa-stack-1x" style="position:relative; bottom:2px;"></i>
            </span>
        </a>
    </div>        
    <!-- BEGIN: Custom Footer -->
    {{public_footer}}
    <!-- END: Custom Footer -->
</body>

URL: https://libguides.colostate.edu/web_customization | Print Page