Theming

Theming in Forem is made possible by the way that layouts are configured. By default, Forem will use the layout from views/layouts/forem/default. This can be changed by setting the Forem.layout configuration option within config/initializers/forem.rb to use something else, such as Forem.layout = 'application' if you want Forem to use your application's layout.

Just remember to include Forem's assets within your layout!

<%= stylesheet_link_tag "forem" %>
<%= javascript_include_tag "forem" %>

Otherwise the JS and CSS assets that Forem depends on might not be available.

Available themes

Forem currently only has one supported theme:

• Forem-Bootstrap

Forem uses Bootstrap classes internally, and so this this theme provides you with a perfect starting point. You may fork it and customize it as you see fit.

If you want to use Forem-Boostrap, add this line to Gemfile:

gem 'forem-bootstrap', :github => "radar/forem-bootstrap"

Then include this theme in your application's vendor/assets/stylesheets/forem.css.scss file:

/*
*= require forem-bootstrap
*/

Building your own theme

Forem has support for theming built right in. To apply a theme to the forem engine you must first install a Forem theme gem such as http://github.com/radar/forem-bootstrap. These gems must be set up like a Rails engine, like this:

require 'forem'
module Forem
  module Theme
    module Bootstrap
      class Engine < Rails::Engine
      end
    end
  end
end

By defining an engine like this, the hooks to the assets in this engine are created and so stylesheets, JavaScript files and images will be able to be included by either the forem engine itself or its host application.

To then apply the styling of this theme to your application you can place this line in your Forem CSS file (vendor/assets/stylesheets/forem.css.scss)

*= require "forem/bootstrap"

This line will include the app/assets/stylesheets/forem/bootstrap.css file from the gem, which should either be a manifest file containing requires for other stylesheets so that Sprockets can read them, or a stylesheet itself. Sprockets will process this.