#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- Add the
link
tag to theHEAD
inapp/views/layouts/_base.html.erb
- 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 deletingkiso_themes.css
etc - In
kiso_themes.css.scss
, deleteline 1
which contains@import 'kiso_themes/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.