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

6/3/2020
6 minut
Łukasz Беньа.

Redmine має швидкий та простий адміністративний інтерфейс, щоб ви могли застосувати тему, яка відповідає вашим уподоб annż. Декілька з доступних типових тем є minіmalістичними, інші більш żywimyа якщо жодна з цих опцій не підходить вам, ви можете створити власну тему Redmine.

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

Nowa wersja tematu Redmine
Redmine надає фундаментальну підтримку для тем. Możesz użyć skryptu javascript i zainstalować таблиці стилів (application.css).
Першим кроком є ​​створення нового каталогу w public/themes. Назва каталогу буде використовуватися як назва temi. Nazwa: public/themes/my_theme.
Możesz użyć pliku application.css, aby połączyć się ze stylesheets/application.css: Public/themes/my_theme/stylesheets/application.css
Наведений нижче приклад користувацької таблиці стилів перевизначає лише декілька налаштувань:
/* завантажити таблицю стилів Redmine за замовчуванням */
@import url (../../../ stylesheets / application.css);
/* додати логотип в заголовок */
#nagłówek {
    tło: #507AAA url(../images/logo.png) bez powtórzeń 2px;
    dopełnienie lewe: 86px;
}
/* перемістити меню проекту вправо */
#menu główne {
    po lewej: auto;
    po prawej: 0px;
}
У наведеному прикладі припускається, що у вас є зображення, яке знаходиться w my_theme/images/logo.png.
Ви можете завантажити цю тему (зразок) як початкову точку для своєї власної користувацької теми Redmine. Przeglądaj temy w katalogu public/themes.


Dodatkowa kodyfikacja Javascript
Możesz zainstalować javascript w javascript/theme.js, korzystając z automatycznej synchronizacji z kodem źródłowym.

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

Застосування користувацької теми
Krok 1: Спочатку завантажте нову тему.
Krok 2: Розпакуйте тему в ../public/themes/. Dołącz do pliku application.css, napisany: ../public/themes/redminecrm/stylesheets/application.css
Крок 3: Перейдіть до Адміністрування -> Налаштування і зі списку "Тема" (випадаючий список) виберіть тему, я ку ви щойно створили. Після цього збережіть свої налаштування.
На цьому етапі Redmine повинен відображатися з використанням вашої користувацької temi.
Pobierz za pomocą przeglądarki Redmine < 1.1.0, możesz to zrobić, aby uzyskać dostęp do programu доступних тем.

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

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

  • javascripts/theme.js (nie dotyczy): zaawansowany JavaScript dla elementów
  • ikona ulubionych / (це необов'язково): favicon dla tych tematów Redmine
  • stylesheets / application.css (nie dotyczy): CSS (Kaskadowe arkusze stylów)

Це продемонстровано нижче:
publiczny/
  + - motywy /
       +- <ім'я теми>/
            |
            + - favicon /
            | +- (napis, favicon.ico, favicon.png)
            |
            + - javascripts /
            | + - theme.js
            |
            + - arkusze stylów /
                 + - application.css


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

Dzięki temu możesz stworzyć ten temat Redmine, korzystając z plików CSS-файлі теми dla użytkownika.

Скажімо, ви хочете змінити все з синьої теми на червону. Ви можете зробити це за допомогою 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

/* zapisz styl dla użytkownika Redmine */

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

# menu główne {tło: RGB (128,0,0);}

#header {kolor tła: RGB (192,0,0);}

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

zawartość h1, h2, h3, h4 {kolor: RGB (128,0,0);}

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

a, a: link, a: odwiedzono {kolor: RGB (128,0,0); }

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


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


1th krok:

Dodaj logo w @./ public / themes/ redminecrm / images@

2s krok

Zdjęcie logo logo.png na nowym zdjęciu z logo 43x30

...

#header> h1 {

               tło: url (../ images / logo.png) bez powtarzania 10px 20%;

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

}

Ogłoszenie Redmine na Twojej stronie? Легко.

Отримайте всі потужні інструменти для ідеального планування, управління та контролю проектів в одному програмном у забезпеченні.

Pobierz Easy Redmine na 30-dniową wersję oprogramowania

Повнофункціональний, захищений SSL, щоденне резервне копіювання, у вашій геолокації