Themes¶

Some Redmine themes change the look and feel very much. With such themes outlines used by Hooks Manager can become useless (it can be too hard to recognize pages and placeholder locations). That’s why support for themes was added to this plugin.

What is a theme?¶

A theme in Hooks Manager plugin has nothing to do with a Redmine theme. Each new theme for the plugin must be created from scratch. Using a Redmine theme does not automatically create a theme for Hooks Manager. And a plugin’s theme has no affect on the Redmine themes.

The name of the plugin’s theme must be the same as the name of the Redmine theme.

Switching to another theme¶

The plugin is always trying to use the theme with the same name, that the current Redmine theme has. If such theme does not exist the plugin always uses the default theme.

There is no way to use a plugin’s theme with different name than the currently used Redmine theme has.

Creating a theme¶

When creating a theme for Redmine one just needs to add a directory to the public/themes and create the CSS file stylesheets/application.css in it (check this page for more details).

Creating a theme for this plugin is very much the same... You just need to create a CSS file having the same name as the corresponding Redmine theme does.

For example, let’s create a plugin’s theme for Red-Andy Redmine theme.

We have:

/usr/share/redmine$ ls -l public/themes
-rw-r--r-- 1 root root   30 Jun 18  2012 README
drwxr-xr-x 3 root root 4096 Jun 24 14:13 alternate
drwxr-xr-x 4 root root 4096 Jun 24 14:13 classic
drwxr-xr-x 1 root root 4096 Aug  7 12:17 red-andy

So we create a file red-andy.css in the plugins/hooks_manager/assets/stylesheets directory:

/usr/share/redmine$ ls -l plugins/hooks_manager/assets/stylesheets
-rw-r--r-- 1 s-andy s-andy 3507 Aug  7 13:10 admin.css
-rw-r--r-- 1 s-andy s-andy   71 Aug  3 18:54 hooks.css
-rw-r--r-- 1 s-andy s-andy 1908 Aug  7 12:58 red-andy.css

Here is the content of this CSS file (just a sample):

#outline {
    -moz-box-shadow: 1px 3px 3px #b4b4b4;
    box-shadow: 1px 3px 3px #b4b4b4;
}
#outline .hooks-top-menu {
    margin: 0 2px;
    background-color: #000;
}
#outline .hooks-header {
    margin: 0 2px;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    -moz-border-radius-bottomleft: 3px;
    -moz-border-radius-bottomright: 3px;
    background-color: #374047;
}
#outline .hooks-main .hooks-content {
    border-right: none;
}
#outline .hooks-main .hooks-issue,
#outline .hooks-main .hooks-sidebar {
    border-radius: 3px;
    -moz-border-radius: 3px;
    background-color: #FDF7BB;
    border: 1px solid #E4C742;
}
#outline .hooks-main .hooks-sidebar {
    margin: 2px 2px 2px 0;
    padding: 0;
}
#outline .hooks-main .hooks-table {
    background-color: #F3F3F3;
    border: 1px solid #DDD;
    border-top: 4px solid #536A3F;
}
#outline .hooks-content .hooks-data,
#outline .hooks-content .hooks-box {
    background-color: #F3F3F3;
    border-color: #B4B4B4;
}
#outline .hooks-sidebar .hooks-box {
    margin: 2px;
    border: none;
    border-top: 4px solid #353D43;
    background-color: #F0D573;
}
#outline .hooks-left .hooks-box,
#outline .hooks-right .hooks-box {
    border-radius: 3px;
    -moz-border-radius: 3px;
    background-color: #E9FACD;
    border-color: #B8D573;
}
#outline .hooks-form {
    border-radius: 3px;
    -moz-border-radius: 3px;
    background-color: #E9FACD;
    border-color: #B8D573;
}
#outline .hooks-login {
    border-radius: 3px;
    -moz-border-radius: 3px;
    background-color: #FFEBC1;
    border-color: #FDBF3B;
}
#outline .hooks-footer {
    margin: 0 2px;
    height: 4px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-topright: 3px;
    background-color: #374047;
}
#outline #hook-content {
    background-color: #2A5685;
    border: none;
}

As you might notice to create a theme for the plugin you need to be familiar with CSS...

For meanings of CSS classes used in the theme check this page. Notice also #hook-content – a <DIV> with this ID marks the placeholder.