CUSTOMIZING THE THEMES

Rapid Rails Themes can be completely customized. Since everything is based on Bootstrap 4, you have the complete array of Bootstrap customization variables at your disposal, plus a whole array of Rapid Rails Themes specific variables.

To select a different theme, just edit the rrt.css file so that a different theme is chosen by moving the equals sign to be in front of a different theme combination:

/* RRT.CSS
 * Pick one style by placing the `=` sign in front the the style you want. ** Just one, now. **
 *
 *= require rrt/orion/blue
 *  require rrt/orion/purple
 *  require rrt/orion/green
 *  require rrt/orion/orange
 *
 *
 *  require rrt/auriga/blue
 *  require rrt/auriga/green
 *  require rrt/auriga/red
 *  require rrt/auriga/yellow
 *
 *  require rrt/gemini/blue
 *  require rrt/gemini/amber
 *  require rrt/gemini/granite
 *  require rrt/gemini/ocean
 *
 *  require rrt/lyra/azure
 *  require rrt/lyra/charcoal
 *  require rrt/lyra/lime
 *  require rrt/lyra/raspberry
 *
 * To fully customize your theme, run: `rails generate rrt:customize`.
 *
 *
 * NOTE: DO NOT PLACE ANY CUSTOM CSS IN THIS FILE - IT COULD BE OVERWRITTEN IN FUTURE
 * UPDATES!
 */

If you want to customize the theme further you can run the

bin/rails g rrt:customize --theme-name=<NAME OF THEME YOU WANT TO CUSTOMIZE> --style-name=<STYLE OF THEME YOU WANT TO CUSTOMIZE></code>

generator, which will create a rrt.css.scss file and rrt.js file where you can override variables, remove anything that's included that you don't need and so on.

For example,

bin/rails g rrt:customize --theme-name=orion --style-name=blue

Will generate the customize files for the Orion theme with the Blue style.

Post Customization Options

Say you've customized the theme, but you want to switch over to one of the other themes included. Just re-run the customization generator with different parameters, and delete any old theme combination variable files you no longer need:

Orion
  • blue
  • green
  • orange
  • purple
Auriga
  • blue
  • green
  • red
  • yellow
Lyra
  • azure
  • charcoal
  • lime
  • raspberry
Gemini
  • amber
  • blue
  • granite
  • ocean

If you ran the customization generator and want to go back to just having the theme combination directly imported, just delete the rrt.css.scss file, and recreate the rrt.css file from the snippet above.

rrt.css.scss

It's really important to make sure you're not using a require_tree in your application.css, as this will load files in a random order, which may result in some files being loaded before others which define variables. You should require rrt.css.scss explicitly.

Examining this file will show you where to start customizing the Sass variables to your taste.

rrt.js

Examining this file will allow you to remove libraries you don't need.

Replacing Images

Images are specified using standard Rails asset path helpers for images.

Template specified images

In the cases where an image is specified in the ERB template, just replace the image_path or asset_path path to point to an image you have in your app/assets/images folder.

For example, take the Header 1 content block. The background image is specified in the ERB like so:

<header class="landing-header-1" style="background-image: url(<%= image_path('rrt/stock/landscape_12.jpg') %>)">

This is pointing to an RRT internal image, but you could make it point to your own background image by changing the path like so:

<header class="landing-header-1" style="background-image: url(<%= image_path('my_background.jpg') %>)">

The logo can be changed in the same way:

<%= image_tag image_path('rrt/pyrrmid_64.png'), width: 32, height: 32, class: 'mr-2'%>

becomes:

<%= image_tag image_path('my_logo.png'), width: 32, height: 32, class: 'mr-2'%>

CSS Specified Images

When the image is specified as a background or background-image CSS property, to change it just create a new instance of that CSS class, and change the property so that the path points to your image. For example:

.landing header .bg { 
  background-image: url(asset-path(cats.gif)));
}

Just make sure that your new CSS class instance comes after everything else so the CSS cascade takes effect. Also note the CSS selector path must be an exact match.