Jak stworzyć niestandardowy motyw Redmine.

Korzyścią dodanego motywu jest to, że jest on wyjątkowy, a jego projektowanie jest dokładnie takie, jakie chcesz (ta korzyść nie jest dostępna w uwzględnieniu domyślnych motywów). Masz wymyślone źródło w sposób. Tworzenie wzoru motywu może wymagać więcej zastosowań niż korzystanie z dedykowanego, są warte tego wsparcia. Przeczytaj, jak stworzyć niestandardowy motyw Redmine.

Redmine zapewnia podstawowe wsparcie dla motywów. Motywy mogą zawierać kilka niestandardowych skryptów JavaScript i nadpisać arkusze stylów (application.css).
Wstępne wprowadzenie nowego katalogu w public/themes. Nazwa katalogu będzie używana jako nazwa motywu. Na przykład: public/themes/my_theme.
Fragment utworu niestandardowy application.css i zapisz go w podfolderze o nazwie stylesheets:
Public/themes/my_theme/stylesheets/application.css
Oto przykładowy arkusz stylów, który tylko nadpisuje kilka instrukcji:
/* załaduj domyślny arkusz stylów Redmine */
@import url (../../../ stylesheets / application.css);
/* dodaj logo w nagłówku */
#nagłówek {
    tło: #507AAA url(../images/logo.png) bez powtórzeń 2px;
    dopełnienie lewe: 86px;
}
/* przesuń menu projektu w prawo */
#menu główne {
    po lewej: auto;
    po prawej: 0px;
}
Wymieniony został przykład, że masz obraz, który znajduje się w my_theme/images/logo.png.
Możesz podać ten motyw (przykład) jako punkt wyjścia dla twojego własnego motywu Redmine. Rozpakuj motyw w katalogu public/themes.

Po prostu dołącz swój skrypt JavaScript w javascript/theme.js, a zostanie automatycznie przesłany na każdą stronę.

Włóż swoją favikonę do folderu favicon, a Zostań ona automatycznie przesłana zamiast tego na każdą stronę. Nazwa pliku favicon może być dowolna. (Jeśli nie wiesz, favicon to mała ikona 16x16 pikseli, która służy do brandingowania Twojej strony internetowej. Jej głównym celem jest ułatwienie użytkownikom odnalezienia Twojej strony, gdy mają otwarte kilka kart).

Pobierz nowy.
Rozpakuj motyw do ../public/themes/. Wynikiem tego będą ścieżki do application.css, tak jak:
../public/themes/redminecrm/stylesheets/application.css
Przejdź do Administracja -> Ustawienia iz listy "Motyw" (lista rozwijająca) wybierz nowy motyw. Następnie zapisz ustawienia.
W tym momencie Redmine powinno być użyte z twoim źródłemgo motywu.
Jeśli korzystasz z Redmine <1.1.0, możesz ponownie włączyć aplikację, aby włączyć się na liście wysyłania motywów.

Struktura katalogów motywów

Motyw składa się z tych plików:

• javascripts/theme.js (opcjonalny): włączony JavaScript dla motywu
• ikona ulubionych / (opcjonalne): favicon dla motywu Redmine
• stylesheets / application.css (konieczny): CSS (Kaskadowe arkusze stylów) dla motywu

Poniżej przedstawiono zestawienie:
pracownik/
  +- motywy/
       +- /
            |
            + - favicon /
            | +- (np. favicon.ico, favicon.png)
            |
            + - javascripts /
            | + - theme.js
            |
            + - arkusze stylów /
                 + - application.css

Tworzenie motywu Redmine za pomocą dedykowanego motywu

Możesz również stworzyć motyw Redmine, dostosować kolory w pliku CSS danego motywu.

Jeśli chcesz zmienić wszystko z niebieskiego komunikatu na czerwony, możesz to zrobić za pomocą dobrego CSS.

1. sh# cd / ścieżki / do / redmine
2. sh # mkdir -p public / themes / redtheme / stylesheets
3. sh# vi public / themes / redtheme / arkusze stylów / application.css (kodowanie jest pokazane poniżej)
4. Przejdź do regulaminu administratora, a następnie wybierz redtheme

/* załaduj domyślny arkusz stylów 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); }

Jak zmienić logo motywu?

1^szy krok:

Umieść plik logo w @./ publiczne / motywy / redminecrm / images@

krok 2

Zastąp plik logo.png nowym plikiem logo o formacie 43x30

...

#header> h1 {

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

               wypełnienie: 5px 60px; /* Zmień na, aby skonfigurować własne logo */

}