Customizing the UI

Keeping the old homepage

To revert to the old homepage follow these steps,

• Delete/rename the app/views/catalog/index.html.erb , this file overrides the default Blacklight view (the old homepage)
• Then follow one of these steps:
  • Option 1:
    1. Remove the home_page settings in config/settings.yml (if it was added previously
    2. Cherry-pick the GitHub commit here, which will adjust the CSS for the old homepage conditionally (based on the presence of home_page config in config/settings.yml)
  • Option 2:

Make the following changes,

<div class="container">
	<%= render 'modules/flash_messages' %>
	<%= yield %>
</div>

<div id="footer">
	<footer class="container">
	.
	.
	.
	</footer>
</div>

This feature is compatible with Avalon versions greater than or equal to 7.

Customize color palette

To change the color palette in Avalon, change colors in the branding.scss in /app/assets/stylesheets/ directory. This file defines a set of Custom variables and Bootstrap variables used in Avalon.

Any changes to these variables will effectively change the UI throughout Avalon

Custom Variables: CSS variables defined for the color palette and fonts used throughout Avalon.

E.g. change $primaryDark from $primaryDark:#2a5459 to $primaryDark:#56592a will change the colors as follows;

Bootstrap Variables: CSS variables related to Bootstrap CSS used in UI components in Avalon.

E.g changing  $link-color from $link-color:$primaryDark to $link-color:blue will change the links in Avalon as follows;