#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- Add the
link
tag to theHEAD
inapp/views/layouts/_base.html.erb
- Run the
rrt:customize
generator as above to get the SCSS generated into your project - make sure to read and follow the instructions about deletingrrt.css
etc - In
rrt.css.scss
, deleteline 1
which contains@import 'rrt/orion/font_family';
- 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.