CSU Library Website Customization

Goal:

Similar to California State University-Bakersfield and other institutions, the best solution is to split the Primo logo and the CSU Libraries’ logo, rather than combining them. A combined logo would decrease the proportions of the Ram’s Head and Libraries’ logo text to an unreadable size. Splitting the location of the logos allows the Libraries’ logo to retain its integrity and the Primo logo to receive the visual weight needed.

Source code studied and borrowed:  CSU Bakersfield’s source code and The Primo New UI Customization Workflow Development Environment.

Solution: 

Step 1: Add app.component('prmSearchBarAfter'  to custom.js

app.component('prmSearchBarAfter', {

bindings: {parentCtrl: '<'},

template: '<div class="primo-search-logo"><a href="https://colostate-primosb.hosted.exlibrisgroup.com/primo-explore/search?vid=01COLSU&lang=en_US&sortby=rank"><img ng-src="custom/01COLSU/img/primo_logo.png" src="custom/01COLSU/img/primo_logo.png" alt="Primo Search"></a></div>'

});

Note: change href="YourURL" ng-src="path to your logo in custom/image folder" src="path to your logo in custom/image folder"

Step 2. logo file location

Add a logo file to your custom’s image folder. Our path for that image is custom/01COLSU/img/primo_logo.png

Step 3. Customize CSS

Code in step 1 will put the logo under the search box. Use CSS to put the logo to the left of the search box. Add the following code to custom1.css

@media (max-width: 970px) {

    .primo-search-logo {  display: none;  }

}

@media (min-width: 970px) {

     .search-wrapper { margin-left: 25%; }

    .search-wrapper .flex-lg-10 { display: none; }

    .search-wrapper .flex-lg-65 { max-width: 80%;  }

    .primo-search-logo {

        display: block;

        width: 25%;

        text-align: center;

        top: 35px;  // Depend on your logo size, you need adjust the # of px here to make it center vertically to the search box

        position: absolute;

    }

    .primo-search-logo img {

        width: 90%;

        max-width: 226px;

    }

}

Step 4. Deploy

Zip the custom folder, make sure the Thumbs.db (if you use Windows) file in the img folder is deleted before you upload to Primo back office. Deploy. Refresh browser.