Skip to content
logo Self Service

Basic Vega Header Template for Consortias to Add a Collection Site Drop-Down

Updated  by samantha.cunning@iii.com

Environment

Vega Discover Consortia & Vega Discover Premium Customers that have multiple Collection Sites available to users. 

Description

Vega Consortias and Vega Premium customers are able to customize the Vega Header area of the Discover site with custom code.  For libraries that would like to start with a ready made template for a Collection Site navigation drop-down to place in the header of the main Consortia site of Vega Discover, please see the code below.  

 NOTE: Please note that all customizations made to the Vega Discover header are the sole responsibility of the library and that Vega Support is unable to assist with any custom code issues you may encounter.  This code template is provided only as an example of how you might create a Collection Site drop-down if you would like to offer one in your custom header.  

Custom Header code must be entered in the Vega Admin Settings under the Page Customizations section.  Separate Code must be configured for each language your library supports for viewing Vega Discover.  For each Collection Site, if you want to include the same drop-down you will need to add this code at the site level Page Customization settings for each supported language as well.  In the Page Configuration, select Use Customized Header Code to open a box that you can paste your code into.  You can use the Preview button before saving the code to view how it will look when published to your site. 

Image

The following code example has internal comments to help direct you.  Please read the following 'Getting Started' guide before modifying the Code Example for your library.  

Getting Started: Adding a Collection Site Navigation Drop-Down to the Vega Header

Custom Header with “Select a library” dropdown 

Before using this custom header file, you must make the following edits to the file: 

1. Search for the text LIBRARY LOGO URL and replace it with a link to your library logo image as the src attribute for the <img> tag. 


If you aren’t sure what URL to use, you can copy the link to the image currently used in the Vega Discover header and use it as the URL for your logo image. The image below shows copying the image link when using Microsoft’s Edge browser. 

A screenshot of a computer Description automatically generated 

If you copy the existing image link from Discover your <img> tag will look similar to this: <img class="libraryLogo" src="https://iii-vega-customization-us-east-2.s3.us-east-2.amazonaws.com/0f387eca-611e-4f4b-bf40-3221d1f5927a/customization/logo/latest/en-US/logo?timestamp=1706808516154”> 

2. Search for LIBRARY NAME and replace it with the name of your library.  

3. Search for ADD LIBRARIES and replace the <a> tags with the URLs and names the libraries which will appear in the “select a library” dropdown. Add as many as necessary; the dropdown will display a scroll bar automatically if the list is long.  


4. OPTIONAL: Make any changes you would like to the CSS rules in the <style> section of the file.


5. This file includes two CSS rules that can control the style of the “Select a library” button: “text link style” and “button style”. You can choose the one you want by changing the class attribute of the <button> tag. The default selected style in the sample code is "selectLibraryTextStyle", to use the button style change this to "selectLibraryButtonStyle"


The class should be selectLibraryTextStyle to use the text link style: <button class="selectLibraryTextStyle">Select a Library</button>  

A close up of a text Description automatically generated 


The class should be selectLibraryButtonStyle to use the button style: <button class="selectLibraryButtonStyle">Select a Library</button>  

A close up of a sign Description automatically generated 


You can alter the appearance of the button by editing the appropriate rule in the <style> section of the custom header file. 

Code Example

Select and copy this code into a text editor to make changes.  The portions containing the Library Name, Logo, Button or Text Style, and Defined Libraries in the List are bolded to help you find them.  Then paste the edited code into the Page Customization > Use Customized Header Code box in the Vega Admin for the Main and/or Collection Sites you would like to customize. 


<style>
 
.headerContainer {
    display: flex;
    padding: 8px 0;
    border-bottom: 4px solid #eaedef;
    align-items: center;
    position: relative;
    justify-content: space-between;
    }
 
 
.libraryInfoSection {
    display: flex;
    align-items: center;
    margin: 0 24px;
    flex-grow: 1;
    }
 
.libraryLogo {
    margin-right: 16px;
    }
 
h1.libraryName {
    margin: 0;
    margin-right: 10px;
    font-size :24px;
    color: #33475b;
    }
 
.separator {
    border-left: 1px solid #babec3;
    height: 32px;
    }
 
.selectLibraryDropdown {
    padding-top: 4px;
    }
 
/* Option 1 for the "Select a Library" button - text link style */
/* Set the class attribute of the <button> tag to the following to use a text link style */
.selectLibraryTextStyle {
    margin: 0 8px;
    border: none;
    padding: 0 3px;
    font-size: 16px;
    letter-spacing: 0px;
    color:#33475b;
    }
 
/* Option 2 for the "Select a Library" button - button style */
/* Set the class attribute of the <button> tag to the following to use a button style */
.selectLibraryButtonStyle {
    margin: 0 8px;
    border: 1px solid gray;
    border-radius: 8px;
    background-color: #eeeeee;
    padding: 0 5px;
    font-size: 16px;
    letter-spacing: 0px;
    color:#33475b;
    }
 
/* For proper alignment, margin-left should equal left margin of .selectLibraryButton. */
.dropdownContent {
    display: none;
    position: absolute;
    margin-left: 8px;
    background-color: #fff;
    box-shadow: 0px 2px 8px #0003;
    z-index: 1;
    white-space: nowrap;
    max-height: 400px;
    overflow-y: auto;
    }
 
.dropdownContent a {
    color: #33475b;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: 16px;
    }
 
.dropdownContent a:hover {
    background-color: #eaedef;
    }
 
.selectLibraryDropdown:hover .dropdownContent {
    display: block;
    }
 
.selectLibraryDropdown:hover .selectLibraryButton {
    background-color: #eaedef;
    }
 
</style>
 
 
<!-- Open HTML container for custom header div -->
<div class="headerContainer">
 
    <!-- Open library info div -->
    <div class="libraryInfoSection">
 
        <!-- Library logo and/or name -->
        <img class="libraryLogo" src="LIBRARY LOGO URL">
        <h1 class="libraryName"> LIBRARY NAME </h1>
 
        <!-- Vertical bar separator -->
        <div class="separator"></div>
 
        <!-- Dropdown for selecting a specific library -->
        <div class="selectLibraryDropdown">
            <button class="selectLibraryTextStyle">Select a Library</button>
            <div class="dropdownContent">
            <!-- ADD LIBRARIES - Add as many library <a> tags as needed to this div; they will appear in the dropdown menu. -->
            <a href="FIRST LIBRARY DISCOVER URL">FIRST LIBRARY</a>
            <a href= "SECOND LIBRARY DISCOVER URL">SECOND LIBRARY </a>
            <a href= "THIRD LIBRARY DISCOVER URL">THIRD LIBRARY </a>
            </div>
        </div>
    
     <!-- Close library info div -->
    </div>
 
    <div class="languageSwitcher"><vega-language-switcher></vega-language-switcher></div>
    <div class="help"><vega-help-button></vega-help-button></div>
    <div class="libraryInfo"><vega-library-info-button></vega-library-info-button></div>
    
    <!-- Vertical bar separator -->
    <div class="separator"></div>
    
    <div class="bookmarks"><vega-toggle-bookmarks-button></vega-toggle-bookmarks-button></div>
    <div class="login"><vega-login-button></vega-login-button></div>
 
 <!-- Close HTML container for custom header div -->
</div>