Left Menu Right Menu
March 16, 2016

Uploading CSS, HTML, and Mashup Skins to the PBO

Custom CSS, HTML, and Mashup skins each need to be loaded to the PBO or Alma in different ways. What area of the interface you are customizing will determine where the code will be uploaded to, and how you will be able to make edits in the future.

Created by: Dawn Lowe-Wincentsen, Oregon Institute of Technology

System components: PBO, Alma, CSS, HTML

Skill set requirements: PBO, Alma, CSS, HTML

Accessibility: This varies depending on the specific HTML or CSS that you upload.

Browser support: This varies depending on the specific HTML or CSS that you upload.

Mobile support: This varies depending on the specific HTML or CSS that you upload.

Implementation steps:

Uploading new files to the PBO

  • Log in to the PBO.
  • Go to Primo Utilities > File uploader.
  • Select the view that you wish to change and click View Loaded Files.
  • You will now see all of the HTML and CSS files that you’ve uploaded to Primo.
  • To load a new file:
    • Select Choose File at the bottom of the screen.
    • Select your file, and then click the Load button.
  • To edit an already uploaded file:
    • Click the Download button next to the file that you want to edit
    • After making your changes, use the Load File process to load the changed file. This will overwrite the existing version in the PBO.
  • If you are loading a file with a new name (such as a new CSS file) and want that file to be used in one of your views:
    • Determine which CSS is currently being used by your view. Go to Ongoing Configuration Wizard > Views Wizard, and click the Edit button next to the view you want your new CSS file to apply to.
    • In the CSS drop-down menu, find the name of the CSS currently being used by the view.
    • Go to Advanced Configuration > All Mapping Tables and click the Edit button next to the CSS table.
    • Find the matching row for the CSS file referenced by the view in the step above, and add the name of the new file (with the proper path) to the CSS Url value. For example, if the original CSS Url value was:
    • Primo_default.3.0.css;
    • You would change this to be:
    • Primo_default.3.0.css;../uploaded_files/[your instititon code]/[filename]
    • Example: Primo_default.3.0.css;../uploaded_files/PSU/psu.css
    • Save the change and click the Deploy button at the top of the screen.

Adding a new Mashup skin to Alma/Primo

In Alma:
  • Go to Alma > Administration > General Configuration > General Configuration Menu
  • Select Delivery System Skins
  • Select Add a Skin
  • Name the Skin
  • Download skin.zip
  • Unzip the file, and look for mashup.css - this is the file most frequently edited
  • Open mashup.css in your favorite editing tool such as Notepad or Notepad ++
  • Make desired edits
  • Rezip the file. Note: must be named skin.zip
  • Upload the zip file to the skin profile you created and then save.
In the Primo back office:
  • Go to Advanced Configuration > Mapping Tables
  • Select your institution, subsystem delivery, and table name templates
  • Select Edit
  • Look for "Almagetit" and "Almaviewit." These are the codes that can be affected by the skin.
  • At the end of the code template, add the following: &req.skin=<skin name>
  • Save, and then Deploy

Referencing locally-hosted HTML, CSS, or Mashup skins

Staging HTML and CSS files on a local server allows you to make changes to the local files and to have those changes reflected immediately in your Primo front end.  It also allows you to name the Alma mashup CSS files anything you want, instead of having all skin files named “mashup.css”.

As you may imagine, this approach comes with some pretty significant risks, especially if you have multiple developers working on your Primo files at any one time, or if your local server goes offline for any reason.  As a result, this approach is probably best suited for use on a sandbox environment, rather than on production.

File staging:
  • Select or create a location on an existing web server that is open to Primo and/or Alma.  
  • You may need to work with your campus/library IT folks to make sure that there is a firewall exception for Primo / Alma access to the server location you choose.
  • It’s generally a good idea to keep Alma mashup CSS in its own directory, separate from the HTML and CSS files used by Primo - just to avoid confusion.
  • Save your desired HTML and CSS files to this chosen web server location.

Static HTML used by Primo:
  • Once your files are staged on the local server, go to the PBO Views Wizard
  • Edit the view you want to point at your static HTMLs.
  • Click “Continue” until you reach the Tiles List.
  • Edit the “Static HTML” tile.
  • In the “Contents of HTML Tile” area, put the URL of the locally-hosted file(s) into the appropriate “Assigned HTML” field.
  • *NOTE* For some reason, the “services_page” views do NOT like it when you point them to a locally-hosted footer file.  It’s best to upload the footer for your services_page views.
  • The example below shows WWU’s sandbox WWU view, which points to locally-hosted header and footer files.

  • Save and deploy the view.

CSS files used by Primo:
  • Once your files are staged on the local server, go to the PBO Mapping Tables.
  • Edit the “CSS” mapping table.
    • The CSS mapping table contains all of the CSS profiles (groups of CSS files) that are used by your Primo views.
    • To see which profile a view is using, go back to the Views wizard and edit that view. The CSS profile will be listed on the first page under Appearance > CSS.
  • Find the line(s) in the table for the profile(s) that you want your locally-staged CSS file(s) to affect.
  • In the CSS URL field, add the URL for your locally-hosted file to the end of the field, using a semicolon to separate file locations.
    • It helps to use the drag handles to widen the CSS URL column, so that you can see more of the text in the field!
  • The example below shows WWU’s sandbox CSS mapping table:
  • Save the table and deploy it.
  • Go to the Views Wizard.
  • For any view that uses a CSS profile you just modified:
    • Edit the view
    • Check the CSS profile setting under Appearance > CSS.
    • If the setting has changed, set it to the correct CSS profile, save, and deploy the view.

Mashup CSS used by Alma:
  • Once the Alma mashup CSS file is staged on the local server, go to Alma > Administration > General Configuration > General Configuration Menu
  • Select Delivery System Skins
  • Click on the name of the skin you wish to edit.
  • Download skin.zip
  • Unzip the file, and look for mashup.css - this is the file most frequently edited
  • Open mashup.css in favorite editing tool such as Notepad or Notepad ++
  • Delete everything from the file, and add the line: @import url("[path to the mashup CSS file on your local server]");
  • Save your changes to mashup.css.
  • Rezip the file. Note: must be named skin.zip
  • Upload the zip file to the skin profile you created. Save.
  • The example below shows the complete contents of one of WWU’s mashup.css files


Related customizations


 
Back to Blog
Comments (0)
Reply To Article