Как да създадете персонализирана тема за Redmine

Предимството на персонализирана тема е, че тя е уникална, а дизайнът й е точно такъв, какъвто искате (тази полза не е налична в повечето теми по подразбиране). Имате гъвкавостта да проектирате персонализирана тема по всякакъв начин, който желаете. Въпреки че създаването на персонализирана тема може да изисква повече усилия в сравнение с използването на тема по подразбиране, резултатите са напълно стойностни. Прочетете, за да научите как да създадете персонализирана тема на Redmine.

Създаване на нова тема на Redmine

Redmine осигурява основна поддръжка на теми. Тези теми могат да добавят няколко персонализирани javascript и да заменят стиловете (application.css).
Първата стъпка е да създадете нова директория в public/themes. Името на директорията ще се използва като име на темата. Например:  public /themes / my_theme.
След това създайте персонализиран application.css и го запазете в подпапка, наречена stylesheets:
Public / themes / my_theme / stylesheets / application.css
Следният пример е за персонализиран stylesheet, който заменя само няколко настройки:
/* зарежда стандартния Redmine stylesheet */
@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; /* Променете това, за да зададете своето лого */

}