Theme Development

See themes directory for samples.

To create a theme, you must be familliar with at least Rails, HAML (for views), SASS (for CSS).

Directory structure

app
  helpers
    helper1.rb
    helper2.rb
    ...
  stylesheets
    style1.sass
    style2.sass
    ...
  views
    layouts
      page.html.haml
      ...
public
  images
    favicon.ico
    ...
init.rb
README

Only init.rb and app/views/layouts/page.html.haml are required, other things are optional.

Files (e.g. views, CSS, JavaScript, images) in the theme directory will overwrite files at other places (e.g. modules).

init.rb

You must declare regions that your theme support. In HTML pages, there are regions, and in each region there are blocks. The site admin will use the admin interface to put blocks the regions you specified.

CONF[:regions] = [:content, :sidebar1, :sidebar2]

Loading and effective order

Just create .sass files and they will be automatically loaded in alphanumeric order. Remember to prefix them with your module name to avoid naming conflict.

File loading order: modules_core → modules → theme

CSS effective order: theme → modules → modules_core

Class

.notice
.help
.error

Image autoresize

By default, big images in views are automatically resized to their parent’s size. To disable this functionality, set the class of the images or their parent (not neccessarily direct parent) to “no_resize_images”.

Id

CAPTCHA

For the CAPTCHA to work, in all pages there must be a div that the id “container” and contains all elements.

Tip: Fix for IE

The right div drops down on IE if the font is justify and italic at the same time. If justify is used, the following fix is needed:

/* Fix IE: the right div drops down if font is justify and italic at the same time */
blockquote {
  font-style: normal;
  padding-left: 10px;
  border-left: 4px solid #B9335D;
}

/* Fix IE: the right div drops down if font is justify and italic at the same time */
em {
  font-style: normal;
  font-weight: bolder;
}

Tip: Fix for Blueprint

/* Fix Blueprint: clear float:left for images */
#container img {
  float: none;
  margin: 0;
  padding: 0;
}
}