Як створити власну тему для Redmine.

Перевагою власної теми є те, що вона є унікальною, а її дизайн точно такий, як ви його хочете (цієї переваги немає в більшості тем за замовчуванням). Ви маєте можливість проектувати власну тему будь-яким способом, який вам подобається. Хоча створення власної теми може вимагати більше зусиль, ніж використання теми за замовчуванням, результати повністю того варті. Прочитайте далі, щоб дізнатися, як створити власну тему Redmine.

Створення нової теми Redmine
Redmine надає фундаментальну підтримку для тем. Ці теми можуть додавати кілька користувацьких javascript і перевизначати таблиці стилів (application.css).
Першим кроком є створення нового каталогу в public/themes. Назва каталогу буде використовуватися як назва теми. Наприклад: public/themes/my_theme.
Далі створіть користувацький application.css та збережіть його в підкаталозі з назвою stylesheets: Public/themes/my_theme/stylesheets/application.css
Наведений нижче приклад користувацької таблиці стилів перевизначає лише декілька налаштувань:
/* завантажити таблицю стилів Redmine за замовчуванням */
@import url(../../../stylesheets/application.css);
/* додати логотип в заголовок */
#header {
    background: #507AAA url(../images/logo.png) no-repeat 2px;
    padding-left: 86px;
}
/* перемістити меню проекту вправо */
#main-menu {
    left: auto;
    right: 0px;
}
У наведеному прикладі припускається, що у вас є зображення, яке знаходиться в my_theme/images/logo.png.
Ви можете завантажити цю тему (зразок) як початкову точку для своєї власної користувацької теми Redmine. Розпакуйте тему в каталозі public/themes.


Додавання користувацького Javascript
Просто включіть свій javascript в javascript/theme.js, і він буде автоматично завантажуватися на кожній сторінці.

Встановлення Favicon
Вставте свій favicon у каталог favicon, і він буде автоматично завантажуватися на кожній сторінці замість того, що за замовчуванням. Назва файлу favicon може бути будь-якою. (Якщо ви не знаєте, favicon - це маленька іконка 16×16 пікселів, яка служить для брендування вашого веб-сайту. Її основна мета полягає в тому, щоб допомогти відвідувачам легше знаходити вашу сторінку, коли вони мають відкрито кілька вкладок).

Застосування користувацької теми
Крок 1: Спочатку завантажте нову тему.
Крок 2: Розпакуйте тему в ../public/themes/. Результатом цього буде шлях до application.css, наприклад: ../public/themes/redminecrm/stylesheets/application.css
Крок 3: Перейдіть до Адміністрування -> Налаштування і зі списку "Тема" (випадаючий список) виберіть тему, яку ви щойно створили. Після цього збережіть свої налаштування.
На цьому етапі Redmine повинен відображатися з використанням вашої користувацької теми.
Якщо ви використовуєте Redmine < 1.1.0, вам може знадобитися перезапустити програму, щоб вона з'явилася в списку доступних тем.

Структура каталогу тем

Тема складається з наступних файлів:

• javascripts/theme.js (це необов'язково): настроюваний JavaScript для теми
• favicon / <favicon file> (це необов'язково): favicon для теми Redmine
• stylesheets / application.css (це необхідно): CSS ( Cascading Style Sheets) для теми

Це продемонстровано нижче:
public/
  +- themes/
       +- <ім'я теми>/
            |
            +- favicon/
            |    +- <favicon file> (наприклад, favicon.ico, favicon.png)
            |
            +- javascripts/
            |    +- theme.js
            |
            +- stylesheets/
                 +- application.css

Створення теми Redmine за допомогою теми за замовчуванням

Ви також можете створити тему Redmine, змінивши кольори в CSS-файлі теми за замовчуванням.

Скажімо, ви хочете змінити все з синьої теми на червону. Ви можете зробити це за допомогою CSS нижче.

1. sh# cd / path / to / redmine
2. sh# mkdir -p public / themes / redtheme / stylesheets
3. sh# vi public / themes / redtheme / stylesheets / application.css (кодування показано нижче)
4. Перейдіть до налаштувань адміністратора, а потім виберіть redtheme

/* завантажити стилі за замовчуванням Redmine */

@import url(../../../stylesheets/application.css);

#top-menu {background: RGB(128,0,0);}

#header {background-color:RGB(192,0,0);}

#projects-index ul.projects div.root a.project { color:RGB(128,0,0); }

content h1, h2, h3, h4 {color:RGB(128,0,0);}

#main { color:RGB(128,0,0); }

a, a:link, a:visited{ color:RGB(128,0,0); }

a:hover, a:active{ color:RGB(128,0,0); }

Як змінити логотип теми?

1^-ий крок:

Помістіть файл логотипу в @./ public / themes/ redminecrm / images@

2^ий крок

Замініть файл logo.png на новий файл логотипу розміром 43x30

...

#header > h1 {

               background: url(../images/logo.png) no-repeat 10px 20%;

               padding: 5px 60px; /* Змініть це, щоб встановити свій власний логотип */

}