KISO Docs
KISO Docs

Customizing the Themes

#Overview
KISO 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 KISO Themes specific variables.
To select a different theme, just edit the kiso_themes.css file so that a different theme is chosen by moving the equals sign to be in front of a different theme combination:
/* KISO_THEMES.CSS
  Pick one style by placing the = sign in front the the style you want.  Just one, now. 

 = require kiso_themes/orion/blue
   require kiso_themes/orion/purple
   require kiso_themes/orion/green
   require kiso_themes/orion/orange


   require kiso_themes/auriga/blue
   require kiso_themes/auriga/green
   require kiso_themes/auriga/red
   require kiso_themes/auriga/yellow

   require kiso_themes/gemini/blue
   require kiso_themes/gemini/amber
   require kiso_themes/gemini/granite
   require kiso_themes/gemini/ocean

   require kiso_themes/lyra/azure
   require kiso_themes/lyra/charcoal
   require kiso_themes/lyra/lime
   require kiso_themes/lyra/raspberry

  To fully customize your theme, run: rails generate kiso_themes: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 kiso_themes: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 kiso_thems.css.scss file and kiso_themes.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 kiso_themes: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 kiso_themes.css.scss file, and recreate the kiso_themes.css file from the snippet above.
#kiso_themes.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 kiso_themes.css.scss explicitly.
Examining this file will show you where to start customizing the Sass variables to your taste.
#kiso_themes.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('kiso_themes/stock/landscape_12.jpg') %>)">
This is pointing to an KISO Themes 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('kiso_themes/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.

#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 kiso_themes:customize generator as above to get the SCSS generated into your project - make sure to read and follow the instructions about deleting kiso_themes.css etc
  3. In kiso_themes.css.scss, delete line 1 which contains @import 'kiso_themes/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