KISO Docs
KISO Docs

Customizing the Rails Theme

#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: 

```css
.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.

#Changing the theme font for a Google Fonts font

In the following steps I have run the customization generator for the Orion Blue theme - bear in mind the file names will match whatever theme you have chosen to customize, e.g. lyra instead of orion, lime instead of blue etc
  1. Add the link tag to the HEAD in app/views/layouts/_base.html.erb
  2. Run the rrt:customize generator as above to get the SCSS generated into your project - make sure to read and follow the instructions about deleting rrt.css etc
  3. In rrt.css.scss, delete line 1 which contains @import 'rrt/orion/font_family';
  4. In _blue_variables.scss, change the $sans-serif-family to match whatever Google font family you have chosen
The theme will now use the font you have specified.
Contents