Skip to main content
ExLibris
  • Subscribe by RSS
  • Ex Libris Knowledge Center

    How to Move Browse and Simple Search Links to Right of Advanced Search?

    • Article Type: General
    • Product: Primo
    • Product Version: 4

    Desired Outcome Goal:
    Move the "Browse" and "Simple Search" buttons up to the right of the Advanced Search box (from the bottom left).

    Procedure:
    1. Using Notepad or Notepad++ (a tool which does not auto-add editing commands), edit the local css file for the institution. This is the file which is loaded to the server via the back office Uploader Utility and associated with the Primo View of the institution.
    2. Add the following lines to the localized css:
    /* Move the "Browse" and "Simple Search" buttons up to the right of the Advanced Search */
    #exlidAdvancedSearchRibbon div.EXLBrowseFieldRibbon {
    background-color: transparent;
    border: 0px solid #8FB9D0;
    clear: none;
    margin: 0;
    min-height: 0em;
    padding: 0em 0em 0em;
    width: auto;
    float: none;
    }
    #exlidAdvancedSearchTile div.EXLAdvancedBrowseRibbon div.EXLSearchFieldRibbonFormSubmitSearch {
    float: left;
    width: auto;
    clear: none;
    display: inline;
    float: left;
    border-top: 1px solid #ADB9C2;
    border-bottom: 1px solid #ADB9C2;
    border-right: 1px solid #ADB9C2;
    border-left: 0px solid #ADB9C2;
    margin-top: 0px;
    }
    #exlidAdvancedSearchRibbon div.EXLBrowseFieldRibbon div.EXLSearchFieldRibbonFormFields {
    width: auto;
    background-color: #FFFFFF;
    }
    #exlidAdvancedSearchRibbon div.EXLBrowseFieldRibbon div.EXLSearchFieldRibbonFormFields div.EXLSearchFieldRibbonFormSearchFor {
    float: left;
    width: 25em;
    }
    #exlidAdvancedSearchRibbon div.EXLBrowseFieldRibbon div.EXLSearchFieldRibbonFormSearchFor input {
    border-top: 1px solid #8FB9D0;
    border-bottom: 1px solid #8FB9D0;
    border-left: 1px solid #8FB9D0;
    border-right: 0px solid #8FB9D0;
    font-size: 1em;
    height: 1.5em;
    padding-left: 0;
    padding-top: 0;
    width: 20em;
    }
    #exlidAdvancedSearchTile div.EXLAdvancedBrowseRibbon div.EXLSearchFieldRibbonFormSubmitSearch input.submit {
    height: 26px;
    }

    3. Save the changes to the <institution>.css file.
    4. Enter the Primo back office
    5. Go to the Primo Utilities menu.
    6. Select 'File Uploader'
    7. Select the VIEW: to which the new css file should be loaded.
    8. BROWSE the local PC directories to locate the changes <institution>.css
    9. Select the correct file and Open in the Uploader Utility.
    10. Load & Update CSS
    11. As the file loads, click the Refresh button to track progress
    12. When the load is complete, press the Back button to return to the Uploader Utility
    13. Proceed to the Front End and test the changes

    Category: Front End

    Subject: Look and Feel


    • Article last edited: 11/12/2014