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 προς την μινιμαλιστικό, 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 αστείο το, że αστείο στο unikalny, a jego projektowanie jest dokładnie takie, jakie chcesz (ta korzyść nie jest dostępna w większości domyśwólnych). 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 και να δημιουργήσετε στυλ (application.css).
Pierwszym krokiem jest utworzenie nowego κατάλογος με δημόσια/θέματα. Nazwa katalogu będzie używana jako nazwa motywu. Na przykład: public/themes/my_theme.
Następnie utwórz niestandardowy application.css and zapisz 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 (../../../ stylesheets / application.css);
/* logo dodaj w nagłówku */
# επικεφαλής {
    φόντο: #507AAA url(../images/logo.png) χωρίς επανάληψη 2px;
    πληκτρολόγηση αριστερά: 86px;
}
/* przesuń menu projektu w prawo */
#κυρίως μενού {
    αριστερά: auto;
    δεξιά: 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 με το javascript/theme.js, ένα zostanie στο automatycznie załadowany και 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ć dovolna. (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 majkilkaty,).

Pobierz nowy motyw.
Rozpakuj motyw do ../public/themes/. Wynikiem tego będzie ścieżka do application.css, tak jak:
../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 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 (konieczny): CSS (Cascading Style Sheets) dla motywu

Poniżej przedstawiono to na przykładzie:
publiczny/
  +- motywy/
       +- /
            |
            + - favicon /
            | +- (σ. favicon.ico, favicon.png)
            |
            + - javascripts /
            | + - 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 / do / redmine
  2. sh # mkdir -p public / θέματα / redtheme / stylesheets
  3. sh# vi public / themes / redtheme / stylesheets / application.css (kodowanie jest pokazane 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);

# top-menu {φόντο: RGB (128,0,0);}

#header {φόντο-χρώμα: RGB (192,0,0);}

# έργα-δείκτης 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: link, a: επισκέφθηκε {color: RGB (128,0,0); }

a: hover, a: ενεργό {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 ή rozmiarze 43x30

...

#header> h1 {

               φόντο: url (../ images / logo.png) χωρίς επανάληψη 10px 20%;

               padding: 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