This is automatic translation. If you do not like it, switch to English or another language. Thank you for understanding. OK Show original
Treść

Jak utworzyć niestandardowy motyw Redmine

Redmine oferuje szybki i łatwy sposób na administrację, aby zastosować motyw, który odpowiada Twoim preferencjom. Kilka z domyślne motywy dostępne są minimalistyczny, inni są bardziej wibrujący, a jeśli żadna z tych opcji nie przypadnie Ci do gustu, możesz utworzyć Twój własny niestandardowy motyw Redmine.

Zaletą niestandardowego motywu jest to, że jest unikalny, a jego wygląd jest dokładnie taki, jak chcesz (ta korzyść nie jest dostępna w przypadku większości domyślnych motywów). Masz swobodę projektowania niestandardowego motywu w dowolny sposób.

Chociaż tworzenie niestandardowego motywu może wymagać więcej wysiłku niż użycie domyślnego, wyniki są całkowicie 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 będzie używana 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:

Public / themes / my_theme / stylesheets / 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;

padding-left: 86px;

}

/ * przesuń menu projektu w prawo * /

#menu główne {

po lewej: auto;

po prawej: 0px;

}

Powyższy przykład zakłada, że ​​masz obraz, który znajduje się w my_theme / images / logo.png.

Możesz pobrać ten motyw (przykład) jako punkt wyjścia do własnego niestandardowego motywu Redmine. Wyodrębnij motyw z katalogu public / themes.

Dodanie niestandardowego Javascript

Po prostu dołącz swój javascript do javascript /theme.js, a zostanie on automatycznie załadowany na każdej stronie.

Ustawianie Favicon

Wstaw favicon do folderu favicon, a zostanie on 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. Jego głównym celem jest pomoc odwiedzającym w łatwiejszym zlokalizowaniu strony, gdy mają otwarte 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, takiego jak

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

  • Krok 3:

Przejdź do Administracja -> Ustawienia iz listy „Motyw” (rozwijana lista) 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 (jest to opcjonalne): dostosowany JavaScript dla motywu
  • favicon / <plik favicon> (jest to opcjonalne): favicon dla motywu Redmine
  • stylesheets / application.css (jest to konieczne): CSS (Cascading Style Sheets) dla motywu

Pokazano to poniżej:

publiczny/

+ - motywy /

+ - <nazwa motywu> /

|

+ - favicon /

| + - <plik 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?

1st Krok:

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

2nd Krok

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 * /

}

Autor: Sa Bal, Lukáš Beňa

Dodatkowe informacje
Free Trial

Łatwy upgrade Redmine 10
Najlepsze wtyczki i funkcje
Nowy i mobilny projekt
Uaktualnienia serwera
Globalna chmura

Zacznij Free Trial

Wypróbuj Easy Redmine w 30-dniowej bezpłatnej wersji próbnej

Pełne, 30 Dni, chronione przez SSL, codzienne archiwizacje, w Twojej lokalizacji geograficznej

or