Jak stworzyć inte standardowy motyw Redmine.

6/3/2020
6 minuter
Lukáš Beňa -> Łukasz Beňa

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

Korzyścią niestandardowego motywu skämt med, że skämt på unikalny, a jego projektowanie skämt 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ć inte standardowy motyw Redmine.

Redmine zapewnia podstawowe wsparcie dla motywów. Om du vill använda JavaScript inte standardiseras och skrivas ut (application.css).
Pierwszym krokiem jest utworzenie nowego katalogu med offentliga/teman. Nazwa katalogu będzie używana jako nazwa motywu. Na przykład: public/themes/my_theme.
Następnie utwórz niestandardowy application.css i zapisz go w podfolderze eller 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 (../../../ stilark / applikation.css);
/* dodaj logo w nagłówku */
#huvud {
    bakgrund: #507AAA url(../images/logo.png) no-repeat 2px;
    stoppning vänster: 86px;
}
/* przesuń menu projektu w prawo */
#huvudmeny {
    vänster: auto;
    höger: 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, en zostanie på 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 strony, gwarty majchąot).

Pobierz nowy motyw.
Rozpakuj motyw do ../public/themes/. Wynikiem tego będzie ścieżka do application.css, tak jak:
../public/themes/redminecrm/styleheets/application.css
Przejdź do Administracja -> Ustawienia iz listy "Motyw" (lista rozwijana) wybierz nowo outworzony 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ę med tych plików:

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

Poniżej przedstawiono to na przykładzie:
publiczny/
  +- motywy/
       +- /
            |
            + - favicon /
            | +- (np. favicon.ico, favicon.png)
            |
            + - javascripts /
            | + - theme.js
            |
            + - stilark /
                 + - applikation.css

Tworzenie motywu Redmine za pomocą domyślnego motywu

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

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

  1. sh# cd / ścieżka / do / redmine
  2. sh # mkdir -p public / teman / redtheme / stilark
  3. sh# vi public / themes / redtheme / stylesheets / application.css (kodowanie jest pokazane poniżej)
  4. Przejdź do ustawień administratora, ett następnie wybierz redtheme

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

@import url (../../../ stilark / applikation.css);

# toppmeny {bakgrund: RGB (128,0,0);}

#header {bakgrundsfärg: RGB (192,0,0);}

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

innehåll h1, h2, h3, h4 {färg: RGB (128,0,0);}

#main {färg: RGB (128,0,0); }

a, a: länk, a: besökte {färg: RGB (128,0,0); }

a: svävar, a: aktiv {färg: RGB (128,0,0); }


Jak zmienić logotyp motywu?


1st krok:

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


steg 2

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

...

#header> h1 {

               bakgrund: url (../bilder / logo.png) ingen upprepning 10px 20%;

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

}

Den ultimata Redmine -uppgraderingen? Lätt.

Få alla kraftfulla verktyg för perfekt projektplanering, hantering och kontroll i en programvara.

Visa Easy Redmine för 30 dagar för darmo

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