Jak stworzyć niestandardowy motyw Redmine.

6/3/2020
6 минути
Лукаш Беня -> Лукаш Беня

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. Motywy може да добави няколко нестандартни скрипта на JavaScript и надписва аркусен стил (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 и запишете go w podfolderze or 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 */
@import url (../../../ стилове / application.css);
/* додай лого в надпис */
#header {
    фон: #507AAA url(../images/logo.png) без повторение 2px;
    padding-left: 86px;
}
/* przesuń меню 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 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 mala ikona 16x16 пиксела, która służy do branding 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/. Wynikiem tego będzie ścieżka to application.css, така че:
../public/themes/redminecrm/stylesheets/application.css
Przejdź do Administracja -> Ustawienia iz listy "Motyw" (list rozwijana) wybierz nowo utworzony motyw. Następnie zapisz ustawienia.
W tym momentencie Redmine powinien być wyświetlany z użyciem Twojego niestandardowego motywu.
Ако използвате Redmine <1.1.0, можете да изпълнявате нова музикална уручаваща апликация, за да я покажете на списъка с достъпни мотиви.

Struktura katalogów motywów

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

  • javascripts/theme.js (opcjonalnie): достъпен JavaScript за motywu
  • фавикон / (опция): favicon dla motywu Redmine
  • stylesheets / application.css (konieczny): CSS (каскадни стилови таблици) dla motywu

Poniżej przedstawiono to na przykładzie:
publiczny/
  +- motywy/
       +- /
            |
            + - фавикон /
            | +- (np. favicon.ico, favicon.png)
            |
            + - javascripts /
            | + - theme.js
            |
            + - таблици за стилове /
                 + - application.css

Tworzenie motywu Redmine за помощ на homeślnego motywu

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

Ако chcesz zmienić wszystko z niebieskiego motywu na zzerwony, możesz to zrobić za pomocą poniższego CSS.

  1. sh# cd / ścieżka / do / redmine
  2. sh # mkdir -p public / теми / redtheme / стилове
  3. sh# vi public / themes / redtheme / stylesheets / application.css (кодът е показан понижен)
  4. Przejdź do ustawień administratora, a następnie wybierz redtheme

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

@import url (../../../ стилове / application.css);

# топ меню {фон: RGB (128,0,0);}

#header {фон-цвят: RGB (192,0,0);}

# проекти-индекс ul.projects div.root a.project {цвят: RGB (128,0,0); }

съдържание h1, h2, h3, h4 {цвят: RGB (128,0,0);}

#main {color: RGB (128,0,0); }

a, a: връзка, a: посетен {цвят: RGB (128,0,0); }

a: hover, a: active {color: RGB (128,0,0); }


Jak zmienić logo motywu?


1во крок:

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


Стъпка 2

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

...

#header> h1 {

               фон: url (../ images / logo.png) без повторение 10px 20%;

               подложка: 5px 60px; /* Zmień to, aby ustawić własne logo */

}

Най -добрият ъпгрейд на Redmine? Лесно.

Вземете всички мощни инструменти за перфектно планиране, управление и контрол на проекти в един софтуер.

Изпробвайте Easy Redmine за 30 дни безплатно

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