Skip to content

Set colours, fonts and images for a website from an admin panel

License

Notifications You must be signed in to change notification settings

samrayner/rails-app-themer

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

25 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Rails App Themer

Sponsored by [Terracoding](http://www.terracoding.com/)

Requirements

Configuration

To add a color, font or image variable, just add it to Theme::COLOR_VARS, Theme::FONT_VARS or Theme::IMAGE_VARS.

Theme Template

There are two ways to generate a theme template:

1. Automatically (inline styles)

You can include theme style rules in any stylesheet within a /* THEME ... THEME */ comment block using the color(), font() and image_url() helpers as so:

body {
  /* defaults */
  background-color: white;
  color: black;
  font-family: sans-serif;

  /* THEME --------
  background-color: theme.color(background);
  background-image: theme.image_url(background);
  color: theme.color(text);
  font-family: theme.font(body);
  -------- THEME */

  h1, h2, h3, h4, h5, h6 {
    /* defaults */
    font-family: serif;

    /* THEME --------
    font-family: theme.font(headings);
    -------- THEME */
  }
}

Sass mixins are provided that make this even easier. The above code can be rewritten as:

body {
  @include theme-bg-color(background, white);
  @include theme-color(text, black);
  @include theme-font(body, sans-serif);

  h1, h2, h3, h4, h5, h6 {
    @include theme-font(headings, serif);
  }
}

When you're done editing, remember to run rake theme:update. It will parse your compiled application.css to generate app/views/themes/show.css.erb.

The generated stylesheet also includes utility classes for all of your theme variables to quickly add style to HTML:

.theme-font-<var-name>
.theme-color-<var-name>
.theme-bg-color-<var-name>
.theme-bg-image-<var-name>

2. Manually (separate stylesheet)

Modify /app/views/themes/show.css.erb by hand. Bear in mind you'll need rules to have higher specificity than those they are overriding. You might want to suffix them with !important. Specificity is handled for you if you use the automated method.

Customisation and Usage

In the example app, the theme can be modified by any user at /theme/edit. You'll probably want to add some authentication!

The generated stylesheet is available at /theme.css for inclusion in the <head> of any page or via CSS import.

<%= stylesheet_link_tag '/theme.css' %>
@import '/theme.css'

The database request for the theme values is cached and the controller action will return a 304 Not Modified status until you modify the theme.

Theme Defaults

Theme values that haven't been chosen by the user fall back to invalid CSS values so the style rules that use them are ignored. This lets you set default styles anywhere you like to fall back to.

About

Set colours, fonts and images for a website from an admin panel

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published