Jak stworzyć niestandardowy motyw Redmine.

Korzyścią niestandardowego motywu jest to, że jest on unikalny, 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 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. Te motywy mogą dodawać kilka niestandardowych skryptów JavaScript i nadpisywać arkusze style(application.css).
Pierwszym krokiem jest utworzenie nowego katalogu w public/themes. Nazwa katalogu będzie używana jako nazwa motywu. 사용 가능 항목: public/themes/my_theme.
Następnie utwórz niestandardowy application.css i zapisz go w podfolderze o nazwie 스타일시트:
공개/테마/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 */
@import url (../../../ stylesheets / application.css);
/* nagłówku의 dodaj 로고 */
#헤더 {
    배경: #507AAA url(../images/logo.png) 반복 없음 2px;
    왼쪽 여백 : 86px;
}
/* przesuń 메뉴 projektu w prawo */
# main-menu {
    왼쪽 : 자동;
    오른쪽 : 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 카탈로그 공개/테마.

자바스크립트 스크립트는 javascript/theme.js에서 자동으로 실행될 수 있는 대상입니다.

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, gdy mają otwartych kilka kart).

Pobierz nowy motyw.
Rozpakuj motyw do ../public/themes/. application.css를 작성하려면 다음을 수행하십시오.
../public/themes/redminecrm/stylesheets/application.css
Przejdź do Administracja -> Ustawienia iz listy "Motyw"(lista rozwijana) wybierz nowo utworzony motyw. Następnie zapisz ustawienia.
W tym momentencie 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 카탈로그 motywów

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

• javascripts/theme.js (opcjonalnie): dostosowany JavaScript dla motywu
• 파비콘 / (opcjonalnie): favicon dla motywu Redmine
• stylesheets / application.css(konieczny): CSS(Cascading Style Sheets) dla motywu

Poniżej przedstawiono to na przykładzie:
publiczny/
  +- 모티위/
       +- /
            |
            +-favicon /
            | +- (np.favicon.ico, favicon.png)
            |
            +-자바 스크립트 /
            | +-theme.js
            |
            +-스타일 시트 /
                 +-application.css

Tworzenie motywu Redmine za pomocą domyślnego motywu

Możesz również stworzyć motyw Redmine, zmieniając kolory 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 / 할 / 레드마인
2. sh # mkdir -p public / 테마 / redtheme / 스타일 시트
3. sh# vi public / themes / redtheme / stylesheets / application.css (kodowanie jest pokazane poniżej)
4. Przejdź do ustawień 관리자, następnie wybierz redtheme

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

@import url (../../../ stylesheets / application.css);

# top-menu {배경 : RGB (128,0,0);}

#header {배경색 : RGB (192,0,0);}

# projects-index ul.projects div.root a.project {color : RGB (128,0,0); }

내용 h1, h2, h3, h4 {color : RGB (128,0,0);}

# 메인 {색상 : RGB (128,0,0); }

a, a : 링크, a : 방문한 {색상 : RGB (128,0,0); }

a : 호버, a : active {색상 : RGB (128,0,0); }

Jak zmienić 로고 motywu?

1^szy 크록:

@./ publiczny / motywy / redminecrm / images@의 Umieść 플릭 로고

2 단계

Zastąp plik logo.png 지금 plikiem 로고 또는 rozmiarze 43x30

...

#header> h1 {

               배경 : url (../ images / logo.png) 무 반복 10px 20 %;

               패딩: 5px 60px; /* Zmień to, aby ustawić własne 로고 */

}