Cách tạo mot giao diện Redmine tùy chỉnh

Zaletą motywu niestandardowego jest to, że jest wyjątkowy, a jego projekt jest dokładnie taki, jak chcesz (ta korzyść nie jest dostępna w przypadku większości motywów domyślnych). Masz swobodę projektowania niestandardowego motywu w dowolny sposób. Chociaż tworzenie niestandardowego motywu może wymagać więcej wysiłku niż korzystanie z domyślnego, wyniki są tego warte. Czytaj dalej, aby dowiedzieć się, jak utworzyć niestandardowy motyw Redmine.

Stworzenie nowego motywu Redmine

Redmine zapewnia podstawowe wsparcie dla tematów. Te motywy mogą dodać kilka niestandardowych javascript i przesłonić arkusze stylów (application.css).
Pierwszym krokiem jest utworzenie nowego katalogu w public / themes. Nazwa katalogu zostanie użyta jako nazwa motywu. Na przykład: public / themes / my_theme.
Następnie utwórz niestandardowy plik application.css i zapisz go w podfolderze o nazwie arkusze stylów:
Publiczne / motywy / mój_motyw / arkusze stylów / application.css
Poniżej znajduje się przykład niestandardowego arkusza stylów, który zastępuje tylko kilka ustawień:
/ * 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) no-repeat 2px;
    dopełnienie lewe: 86px;
}
/ * przesuń menu projektu w prawo * /
#menu główne {
    po lewej: auto;
    po prawej: 0px;
}
Powyższy przykład zakłada, że ​​masz obraz znajdujący się pod adresem my_theme / images / logo.png.
Możesz pobrać ten motyw (przykład) jako punkt początkowy dla własnego niestandardowego motywu Redmine. Wyodrębnij motyw w katalogu public / themes.

Dodanie niestandardowego Javascript

Po prostu umieść swój javascript w javascript /theme.js, a zostanie on automatycznie załadowany na każdej stronie.

Ustawianie Favicon

Wstaw favicon do folderu favicon, a zostanie załadowany automatycznie, a nie domyślny na każdej stronie. Nazwa pliku favicon może być dowolna. (Jeśli nie wiesz, favicon to niewielka ikona 16 × 16 pikseli, która służy do budowania marki Twojej witryny. Jej głównym celem jest ułatwienie odwiedzającym zlokalizowania Twojej strony, gdy mają otwartych kilka kart).

Stosowanie niestandardowego motywu

• Krok 1:

Pierwszym krokiem jest pobranie nowego motywu.

• Krok 2:

Rozpakuj motyw do ../public/themes/. Wynikiem tego byłaby ścieżka do katalogu application.css, taka jak

../public/themes/redminecrm/stylesheets/application.css

• Krok 3:

Przejdź do Administracja -> Ustawienia iz listy „Motyw” (lista rozwijana) wybierz nowo utworzony motyw. Następnie zapisz ustawienia.
W tym momencie Redmine powinien być teraz wyświetlany przy użyciu niestandardowego motywu.

Jeśli korzystasz z Redmine <1.1.0, może być konieczne ponowne uruchomienie aplikacji, aby pojawiła się na liście dostępnych motywów.

Struktura katalogów tematów

Motyw zawiera następujące pliki:

• javascripts / theme.js (to jest opcjonalne): dostosowany JavaScript dla motywu
• favicon / (to jest opcjonalne): favicon dla motywu Redmine
• stylesheets / application.css (jest to konieczne): CSS (Cascading Style Sheets) dla motywu

Pokazano to poniżej:
publiczny/
  + - motywy /
       + - /
            |
            + - favicon /
            | + - (np. favicon.ico, favicon.png)
            |
            + - javascripts /
            | + - theme.js
            |
            + - arkusze stylów /
                 + - application.css

Tworzenie motywu Redmine przy użyciu motywu domyślnego

Możesz także utworzyć motyw Redmine, zmieniając kolory w pliku CSS motywu domyślnego.

Powiedz, że chcesz zmienić wszystko z niebieskiego na czerwony. Możesz to zrobić za pomocą CSS poniżej.

1. sh # cd / path / to / redmine
2. sh # mkdir -p public / themes / redtheme / stylesheets
3. sh # vi public / themes / redtheme / stylesheets / application.css (kodowanie pokazano poniżej)
4. Przejdź do ustawień 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^st Krok:

Umieść plik logo w @. / Public / themes / redminecrm / images @

2^nd Ewolucja krok po kroku

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

...

#header> h1 {

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

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

}