Jak stworzyć niestandardowy motyw Redmine.

6/3/2020
דקות 6
Lukáš Beňa -> Łukasz Beňa

Redmine posiada szybki i łatwy sposób administracyjny, aby zastosować motyw, który odpowiada Twoim preferencjom. Kilka z dostępnych domyślnych motywów ל minimalistyczne, inne są bardziej żywe, a jeśli żadna z tych opcji Cię nie przekonuje, możesz stworzyć swoją własną niestandardową motyw Redmine.

Korzyścią niestandardowego motywu jest to, że jest on unikalny, a jego projektowanie jest dokładnie takie, jakie chcesz (ta korzyść nie jest dostępna w większości domyślnych motywów). Masz elastyczność w projektowaniu niestandardowego motywu w dowolny sposób. Chociaż tworzenie niestandardowego motywu może wymagać więcej wysiłku niż korzystanie z domyślnego, wyniki są warte tego wysiłku. Przeczytaj, jak stworzyć niestandardowy motyw Redmine.

Redmine zapewnia podstawowe wsparcie dla motywów. יש לך אפשרות להשתמש ב-JavaScript וב-Nadpisywać Arkusze Stylów (application.css).
Pierwszym krokiem jest utworzenie nowego catalogu עם ציבורי/ערכות נושא. Nazwa katalogu będzie używana jako nazwa motywu. Na przykład: public/themes/my_theme.
נסתפק ב-niestandardowy application.css ב-zapisz go w podfolderze או nazwie stylesheets:
Public/themes/my_theme/stylesheets/application.css
Oto przykład niestandardowego arkusza stylów, który tylko nadpisuje kilka ustawień:
/* załaduj domyślny arkusz stylów Redmine */
@ ייבוא ​​url (../../../ סגנונות / יישום.css);
/* dodaj logo w nagłówku */
#header {
    רקע: #507AAA url(../images/logo.png) no-repeat 2px;
    ריפוד שמאל: 86 פיקסלים;
}
/* przesuń menu projektu w prawo */
#תפריט ראשי {
    משמאל: אוטומטי;
    משמאל: 0px;
}
Wymieniony powyżej 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 dla własnego niestandardowego motywu Redmine. Rozpakuj motyw w katalogu public/themes.

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

Włóż swoją favicon do folderu favicon, a zostanie ona automatycznie załadowana zamiast domyślnej na każdej stronie. 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, gwarty kąot kart).

Pobierz nowy motyw.
Rozpakuj motyw do ../public/themes/. Wynikiem tego będzie ścieżka do application.css, טאק יא:
../public/themes/redminecrm/styleheets/application.css
Przejdź do Administracja -> Ustawienia iz listy "Motyw" (lista rozwijana) wybierz nowo utworzony motyw. Następnie zapisz ustawienia.
W tym momencie Redmine powinien być wyświetlany z użyciem Twojego niestandardowego motywu.
Jeśli korzystasz z Redmine <1.1.0, możesz musieć ponownie uruchomić aplikację, aby pojawiła się na liście dostępnych motywów.

Struktura katalogów motywów

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

  • javascripts/theme.js (opcjonalnie): dostosowany JavaScript dla motywu
  • favicon / (opcjonalnie): favicon dla motywu Redmine
  • גיליונות סגנונות / application.css (קונieczny): CSS (Cascading Style Sheets) dla motywu

Poniżej przedstawiono to na przykładzie:
publiczny/
  +- מוטיwy/
       +- /
            |
            + - favicon /
            | +- (np. favicon.ico, favicon.png)
            |
            + - javascripts /
            | + - theme.js
            |
            + - גיליונות סגנונות /
                 + - יישום. css

Tworzenie motywu Redmine za pomocą domyślnego motywu

Możesz również stworzyć motyw Redmine, zmieniając colory w pliku CSS domyślnego motywu.

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

  1. sh# cd / ścieżka / do / redmine
  2. sh # mkdir -p ציבורי / נושאים / redtheme / גיליונות סגנונות
  3. sh# vi public / themes / redtheme / stylesheets / application.css (kodowanie jest pokazane poniżej)
  4. Przejdź do ustawień administratora, ערכת נושא אדום

/* załaduj domyślny arkusz stylów Redmine */

@ ייבוא ​​url (../../../ סגנונות / יישום.css);

# התפריט העליון {רקע: RGB (128,0,0);}

#header {צבע רקע: RGB (192,0,0);}

# פרויקטים-אינדקס ul.projects div.root a.project {color: RGB (128,0,0); }

תוכן h1, h2, h3, h4 {צבע: RGB (128,0,0);}

#main {צבע: RGB (128,0,0); }

א, קישור: א, ביקרו {color: RGB (128,0,0); }

א: רחף, א: פעיל {צבע: RGB (128,0,0); }


הלוגו של Jak zmienic?


1szy קרוק:

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


שלב 2

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

...

#header> h1 {

               רקע: url (../ images / logo.png) ללא חזרה 10px 20%;

               ריפוד: 5px 60px; /* Zmień to, aby ustawić własne logo */

}

השדרוג האולטימטיבי של Redmine? קַל.

קבל את כל הכלים החזקים לתכנון מושלם, ניהול ובקרה של פרויקטים בתוכנה אחת.

Wypróbuj Easy Redmine במחיר של 30 ימים

Pełne funkcje, zabezpieczenie SSL, codzienne kopie zapasowe, dostępne w Twojej lokalizacji