Theming

Theming Blacklight

Bootswatches

The Blacklight 4.x styling is Twitter Bootstrap based. While there is some Blacklight-specific code for handling layouts and positions, most (if not all) the "styling" (colors, fonts, etc) are handled by Bootstrap.

There are many sources for Bootstrap themes. We'll look at bootswatches because they are fairly painless to integrate into a Rails application.

First, add the bootswatch-rails gem to your Gemfile:

gem 'bootswatch-rails'

This will give you the set of themes from http://bootswatch.com/, converted to SASS and exposed to the Rails asset pipeline.

Out of the box, your application's blacklight stylesheet (generated by default to app/assets/stylesheets/blacklight.css.scss) looks something like:

@import 'bootstrap';
@import 'bootstrap-responsive';

@import 'blacklight/blacklight';

To add the cerulean bootswatch:

@import "bootswatch/cerulean/variables";

@import "bootstrap";
@import "bootstrap-responsive";

@import "bootswatch/cerulean/bootswatch";

@import 'blacklight/blacklight'

The bootswatch-rails documentation provides similar directions, a list of available out-of-the-box themes, and more.