View Categories

Scarlet Themes

Introduction #

The Redmineflux Scarlet Theme Plugin is a comprehensive UI theme for Redmine that transforms the default interface into a modern, clean, and visually polished experience. Designed for teams who demand a professional project management interface, it delivers a complete layout overhaul — including a collapsible left sidebar, a collapsible page header with project navigation tabs, and a full set of customization options — all without requiring any database changes.

Version Compatibility #

Redmine Versions
5.0.x, 5.1.x
6.0.x

Installation #

To install the Redmineflux Scarlet Theme Plugin, follow these steps:

  1. Make sure you have a working installation of Redmine.
  2. Download the Scarlet Theme Plugin from the Redmineflux.com website. The plugin is distributed as a ZIP file.
  3. Extract the plugin ZIP file into Redmine’s plugins/ directory. Do not rename the plugin folder — it must remain Redmineflux_scarlet.
    /path/to/redmine/plugins/Redmineflux_scarlet/
  4. Run the following command to install required dependencies:
    bundle install
  5. Run the plugin migration command.

    In Production:

    RAILS_ENV=production bundle exec rails redmine:plugins:migrate

    In Development:

    RAILS_ENV=development bundle exec rails redmine:plugins:migrate

    Note: The Redmineflux Scarlet plugin does not create any database tables. This command is run as a standard step to ensure plugin registration is complete.

  6. Start the Redmine server:
    rails s
  7. Activate the theme by navigating to Administration → Settings → Display, selecting “Redmineflux Scarlet” from the Theme dropdown, and clicking Save.

The plugin also auto-installs a companion theme on first server start. If the theme does not appear in the dropdown, you can install it manually:

bundle exec rake Redmineflux_scarlet:install_theme RAILS_ENV=production

Configuration #

Accessing Plugin Settings #

  1. Log in to your Redmine instance as an administrator.
  2. Navigate to Administration → Plugins.
  3. Find “Redmineflux Scarlet Theme Plugin” in the list.
  4. Click “Configure” to open the settings page.

The settings page has three tabs:

Tab 1: Tracker Border Colors #

Assign a unique border color to each issue tracker type. When configured, a colored left border appears on issue ID cells throughout Redmine’s issue lists, making it easier to visually distinguish tracker types at a glance.

  • Each tracker defined in your Redmine instance appears with a color picker.
  • You can pick a color visually or type a hex code (e.g., #0094FF) directly into the input field.
  • Changes take effect immediately after saving.

Tab 2: Priority Icons #

Replace Redmine’s default text-based priority labels with custom icons on the issue detail page.

  • Each issue priority appears with an icon upload option.
  • Supported formats: SVG, PNG, JPG, GIF (maximum file size: 100 KB).
  • You may either upload a file from your computer or enter a direct URL to an external image.
  • A live preview of the selected icon is shown inline before saving.

Tab 3: Login Page #

Customize the visual appearance and messaging on the Redmine login screen.

Setting Description Default Value
Background Image The image displayed on the right side of the login page Default Redmineflux login image
Main Subtitle The tagline displayed below the login form heading Powerful project management and team collaboration.
Forgot Password Subtitle The description shown on the password reset page Enter your email address to receive password reset instructions.

Usage Guide #

How to Activate the Theme #

  1. Log in as an administrator.
  2. Go to Administration → Settings → Display.
  3. In the Theme dropdown, select “Redmineflux Scarlet”.
  4. Click Save.

The Scarlet layout, fonts, icons, and styles will be applied immediately across all pages.

How to Toggle the Sidebar #

The left sidebar displays per-project navigation links.

  • Click the sidebar toggle button (hamburger icon) that appears at the top of the content area to collapse or expand the sidebar.
  • You can also press Ctrl+B anywhere on the page as a keyboard shortcut.
  • Your preference is saved automatically in your browser and persists across page reloads and sessions on the same device.

How to Collapse or Expand the Page Header #

The page header contains the page title and the project-level navigation tab bar.

  • Click the page title (h1) to toggle the project navigation tabs open or closed.
  • This works only on pages where project navigation tabs (#main-menu) are present.
  • Your preference is saved automatically in the browser.

How to Configure Tracker Border Colors #

  1. Go to Administration → Plugins → Configure (next to Redmineflux Scarlet Theme Plugin).
  2. Click the “Tracker Border Colors” tab.
  3. For each tracker listed, click the color swatch to open the color picker, or type a hex code directly into the input field.
  4. Click Save to apply.

Issue ID cells in issue lists will now display a left border in the configured color for each tracker type.

How to Upload Custom Priority Icons #

  1. Go to Administration → Plugins → Configure.
  2. Click the “Priority Icons” tab.
  3. For each issue priority:
    • Enter an image URL in the “Icon URL” field, or
    • Click “Choose File” to upload a local image (SVG, PNG, JPG, or GIF; max 100 KB).
  4. A preview of the selected icon appears inline.
  5. Click Save to apply.

Priority icons will appear on the issue detail page next to the issue’s priority field.

How to Customize the Login Page #

  1. Go to Administration → Plugins → Configure.
  2. Click the “Login Page” tab.
  3. Modify any of the following:
    • Background Image: Enter the URL to a custom background image.
    • Subtitle: The tagline displayed below the login form heading.
    • Forgot Password Subtitle: The description displayed on the password reset page.
  4. Click Save.

Changes are reflected immediately on the login and password recovery pages.

How to Use Filters on the Issue List #

The issue list filter panel starts collapsed by default for a cleaner initial view.

  • Click the “Filters” legend/heading to expand the filter panel.
  • The Apply and Clear buttons appear automatically when the Filters or Options panel is open.
  • The buttons are hidden when both panels are collapsed.

UI Overview #

The Redmineflux Scarlet Theme gives Redmine a fresh, modern look and feel. Here’s what you’ll see:

Left Sidebar Menu #

A clean sidebar on the left side showing project-specific navigation links (like Issues, Roadmap, Wiki, Files). The currently active page is always highlighted. You can collapse it anytime using the toggle button or the Ctrl+B keyboard shortcut, and it remembers your preference. On pages with no sidebar content, it hides itself automatically.

Page Header #

Each page has a clear title with action buttons at the top, along with the project navigation tabs. You can click the page title to collapse or expand the navigation tabs for more screen space.

Content Area #

The main working area where all your project content appears. Filters and options can be expanded or collapsed to keep things tidy. On the issue list, the filter panel starts collapsed for a cleaner initial view.

Login Page #

A modern split-screen design with the login form on the left and a customizable background image on the right. It looks great on desktops, tablets, and mobile devices.

Enhanced Pages #

The Scarlet Theme gives a fresh, redesigned look to many Redmine pages for a more polished and consistent experience:

Page What’s Improved
Home / Welcome Page A cleaner home page with modern fonts and well-organized content
Issue Detail Page A better issue view with neatly grouped fields and custom priority icons
Project Overview A redesigned project summary that’s easier to read and navigate
Roadmap / Versions Cleaner version pages with better-looking progress bars
Issue List / Query Form A tidier issue list with filters collapsed by default and a refined table layout
Activity Page A cleaner activity feed layout
Login Page A modern two-panel login screen with a customizable background image and messaging
Password Recovery Page A styled password reset page that matches the login page look
Administration Pages A refreshed admin interface that’s easier to read

Troubleshooting #

Theme not appearing after installation

Ensure the theme was activated: go to Administration → Settings → Display and verify that “Redmineflux Scarlet” is selected in the Theme dropdown. If the theme does not appear in the dropdown, run the following command and restart the server:

bundle exec rake Redmineflux_scarlet:install_theme RAILS_ENV=production

Sidebar toggle button not appearing

The toggle button is only injected when the #sidebar element has content. On pages where the sidebar is empty, the button is hidden intentionally. Navigate to a project page where the sidebar contains navigation links.

Priority icons are not displaying

Ensure that the Redmine web server has proper file write permissions. Uploaded icons are stored inside the Redmine public directory. Re-upload the icons from the plugin settings if they were lost during a server migration.

Tracker border colors are not applied

After saving colors, perform a hard refresh (Ctrl+Shift+R / Cmd+Shift+R) to bypass any cached stylesheets. A server restart is not needed — colors take effect on the next page load.

Header collapse not working

Clicking the page title only toggles the header on pages that include the #main-menu navigation tabs. On pages without a project nav bar, the click is intentionally disabled.

Layout conflicts with another plugin

If another plugin also modifies the main Redmine layout, conflicts may occur. Try disabling other layout-modifying plugins to confirm. Check the Redmine log for any view template errors.

Companion theme not auto-installing

If the theme doesn’t appear automatically after installation, run the install command manually:

bundle exec rake Redmineflux_scarlet:install_theme RAILS_ENV=production

Frequently Asked Questions #

Q: Does the plugin require database changes?

A: No. The Redmineflux Scarlet plugin does not create any database tables. All settings are stored using Redmine’s built-in plugin settings system.

Q: Can I install the plugin without activating the theme?

A: Yes. The plugin can be installed without activating the Scarlet theme. All visual changes are only applied when “Redmineflux Scarlet” is selected in Administration → Settings → Display. Until then, Redmine looks and behaves exactly as before.

Q: Is there a keyboard shortcut to toggle the sidebar?

A: Yes. Press Ctrl+B anywhere on the page to toggle the sidebar open or closed. The sidebar state is saved in your browser.

Q: Can I upload animated GIFs as priority icons?

A: Yes. The plugin accepts GIF files for priority icon uploads, in addition to SVG, PNG, and JPG formats. The maximum allowed file size is 100 KB.

Q: Is the plugin compatible with other Redmineflux plugins?

A: Yes. The Scarlet plugin is designed to work seamlessly with other Redmineflux plugins, including the Dashboard, Agile Board, and Workload plugins.

Q: Will the theme affect other users immediately?

A: Yes. Once an administrator activates the Scarlet theme, the new layout is applied for all users across the Redmine instance.

Uninstallation #

To uninstall the Redmineflux Scarlet Theme Plugin:

  1. Deactivate the theme first: go to Administration → Settings → Display, select a different theme (e.g., Default), and click Save.
  2. (Optional) Remove the companion theme files:
    bundle exec rake Redmineflux_scarlet:uninstall_theme RAILS_ENV=production
  3. Delete the plugin directory from your Redmine installation:
    rm -rf /path/to/redmine/plugins/Redmineflux_scarlet
  4. No database rollback is required — the plugin has no database tables.
  5. Restart the Redmine server:
    rails s

The Scarlet theme, all custom icons, and all plugin settings will be removed from your Redmine instance.

Conclusion #

The Redmineflux Scarlet Theme Plugin transforms Redmine into a modern, professional-looking project management tool that your team will enjoy using every day. With its collapsible sidebar, collapsible page header, keyboard shortcuts, customizable tracker colors, priority icons, and a polished login page — it brings a complete visual upgrade without touching your database or disrupting your workflow.

Whether you’re managing a small team or a large organization, Scarlet makes Redmine feel like a premium, app-style experience right out of the box.