Homepage

Configuring featured and carousel collections

Avalon 7.0 introduces a redesigned homepage that includes two configurable blocks for highlighting collections.  Below the search bar and background image is a space to feature a single collection by giving a large area to display the collection's poster image, title, and description.  Beneath the featured collection is a carousel for highlighting up to 10 collections by displaying their poster image and title.  Both of these features are randomized based upon the collections configured.  They are also hidden if no collections have been configured.

home_page:
  featured_collections: ['7m01bk80s', 'qz20ss619']
  carousel_collections: ['v118rd550', 'pn89d6567', 'mp48sc83h', 'qz20ss50s']

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>

Styling

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;

After all the code changes have been made, recompile your assets and restart the application to make this changes effective.