Theming

Theming

Available themes

Here are some other themes you can use:

Blue links, black headers:

gem 'forem-theme-twist', :git => "git://github.com/radar/forem-theme-twist.git"

Brown links, orange headers and posts body:

gem 'forem-theme-orange', :git => "git://github.com/radar/forem-theme-orange.git"

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-theme-base. These gems must be set up like a Rails engine, like this:

require 'forem'
module Forem
  module Theme
    module Base
      class Engine < Rails::Engine
        Forem.theme = :base
      end
    end
  end
end

The forem gem must first be required so that the Forem module is loaded and has a theme= method defined on it. 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 CSS file (be sure to replace {theme} with the name of the theme you are using, like 'base'):

*= require "forem/{theme}/style"

This line will include the app/assets/stylesheets/forem/base/style.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.

If you'd rather just outright include the CSS file use stylesheet_link_tag, you may use the following line, replacing {theme} as above:

<%= stylesheet_link_tag "forem/{theme}/style" %>

Important: the themes may interfere with your site's CSS, such as changing the font-family and font-color. If you'd rather not have this, you can take a theme as your base and use its CSS yourself. For example, here is the CSS for the "twist" theme:

https://github.com/radar/forem-theme-twist/blob/master/app/assets/stylesheets/forem/twist/style.css.scss

Mobile Compatibility

http://github.com/radar/forem-theme-base includes an iPhone-compatible stylesheet that can be added on to provide a modicum of compatibility for mobile users. Follow the instructions above to include the base theme's style.css file, but additionally, add either:

*= require "forem/{theme}/iphone"

in your CSS file, or

<%= stylesheet_link_tag "forem/base/iphone" %>

in your layout file as above.