Jak stworzyć niestandardowy motyw Redmine.

6/3/2020
6 minuti
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 a minimalista, 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. Puoi aggiungere uno script JavaScript non standard e aggiungere lo stile dell'architettura (application.css).
Pierwszym krokiem jest utworzenie nowego katalogu w public/themes. Il nostro catalogo è molto utile come nazwa motywu. Selezionato: public/themes/my_theme.
Il seguente file application.css non è standard e vai alla cartella pod o ai nostri fogli di stile:
Pubblico/themes/my_theme/stylesheets/application.css
Questo stile di architettura non standard è quello che ti piace di più:
/* crea un'architettura in stile Redmine */
@import url (../../../ stylesheets / application.css);
/* aggiungi il logo alla pagina */
#intestazione {
    sfondo: #507AAA url(../images/logo.png) nessuna ripetizione 2px;
    imbottitura-sinistra: 86px;
}
/* apri il menu del progetto nel pranzo */
#menu principale {
    sinistra: auto;
    a destra: 0px;
}
Wymieniony powyżej przykład zakłada, że ​​masz obraz, który znajduje się w my_theme/images/logo.png.
Potresti avere dieci moti (professioni) come punti di partenza per il motivo non standard di Redmine. Rozpakuj motyw w catalogo pubblico/temi.

Postu 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, and zostanie ona automatycznie załadowana zamiast domyślnej na każdej stronie. Nazwa pliku favicon poż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/. Ho un problema con application.css, così come:
../public/themes/redminecrm/stylesheets/application.css
Przejdź do Administracja -> Ustawienia iz listy "Motyw" (lista rozwijana) wybierz nowo utworzony motyw. Następnie zapisz ustawienia.
In questo momento Redmine può essere utilizzato per usare Twojego niestandardowego motywu.
Ora sono in possesso di Redmine <1.1.0, puoi usare l'app per la musica e puoi spostarti nella lista disponibile.

Catalogo della struttura motywów

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

  • javascripts/theme.js (opzionale): è disponibile JavaScript per la funzionalità
  • icona preferita / (opzionale): favicon dla motywu Redmine
  • fogli di stile / application.css (konieczny): CSS (Cascading Style Sheets) dla motywu

Poniżej przedstawiono a na przykładzie:
publiczny/
  +- motywy/
       +- /
            |
            + - favicon /
            | +- (np.favicon.ico, favicon.png)
            |
            + - javascripts /
            | + - theme.js
            |
            + - fogli di stile /
                 + - application.css

Due motiwu Redmine per pomocą domyślnego motywu

Puoi usare il motivo Redmine per aggiungere colori al motivo CSS domyślnego.

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 / themes / redtheme / stylesheets
  3. sh# vi public / temi / redtheme / stylesheets / application.css (kodowanie jest pokazane poniżej)
  4. Dopo l'amministratore, il miglior tema rosso

/* crea un'architettura in stile Redmine */

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

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

#header {background-color: RGB (192,0,0);}

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

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

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

a, a: link, a: visitato {color: RGB (128,0,0); }

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


Jak zmienić logo motywu?


1Szy ok:

Metti il ​​logo su @./publiczny/motywy/redminecrm/images@


passo 2

Metti sotto logo.png ora piega il logo o rozmiarze 43x30

...

#header> h1 {

               sfondo: url (../ images / logo.png) no-repeat 10px 20%;

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

}

L'ultimo aggiornamento di Redmine? Facile.

Ottieni tutti gli strumenti potenti per una perfetta pianificazione, gestione e controllo del progetto in un unico software.

Prova Easy Redmine per 30 giorni

Funzionalità aggiuntive, crittografia SSL, copia codificata disponibile in due località