Bagaimana cara membuat Tema Redmine Kustom

Az egyéni téma előnye, hogy egyedi, és a kialakítása is pontosan olyan, amilyennek szeretnéd (ez az előny a legtöbb alapértelmezett témánál nem érhető el). Rugalmasan megtervezheti egyéni témáját, ahogy tetszik. Bár az egyéni téma létrehozása több erőfeszítést igényelhet, mint az alapértelmezetté, az eredmény teljesen megéri. Olvasson tovább, hogy megtudja, hogyan hozhat létre egyéni Redmine-témát.

Új Redmine téma létrehozása

A Redmine alapvető támogatást nyújt a témákhoz. Ezek a témák hozzáadhat néhány egyedi javascriptet és felülírhatják a stíluslapokat (application.css).
Az első lépés egy új könyvtár létrehozása a public / témákban. A téma neve a könyvtár neve lesz. Például: public / themes / my_theme.
Ezután hozzon létre egyéni application.css fájlt, és mentse el a stíluslapok nevű almappába:
Nyilvános / témák / my_theme / stíluslapok / application.css
Az alábbiakban bemutatunk egy egyéni stíluslap-példát, amely csak néhány beállítást felülbírál:
/ * betölti az alapértelmezett Redmine stíluslapot * /
@import url (../../../ stíluslapok / application.css);
/ * logó hozzáadása a fejlécbe * /
#fejléc {
    háttér: # 507AAA URL (../ images / logo.png) nincs ismétlés 2px;
    párnázat-bal: 86 képpont;
}
/ * mozgassa a projekt menüt jobbra * /
#főmenü {
    balra: automatikus;
    jobbra: 0px;
}
A fent említett példa feltételezi, hogy van egy képe, amely a my_theme / images / logo.png címen található.
Ezt a témát (minta) letöltheti saját Redmine témájának kiindulópontjaként. Bontsa ki a témát a public / themes könyvtárba.

Egyéni Javascript hozzáadása

Csak illessze be javascriptjét a javascript /theme.js fájlba, és minden oldal automatikusan betöltődik.

A Favicon beállítása

Helyezze be a favicont a favicon mappába, és az automatikusan betöltődik az alapértelmezett helyett minden oldalon. A favicon fájl neve bármi lehet. (Ha nem tudja, a favicon egy apró, 16×16 pixeles ikon, amely a webhely márkaépítésének célját szolgálja. Elsődleges célja, hogy segítse a látogatókat abban, hogy könnyebben megtalálják az oldalt, ha több lap van nyitva).

Az egyéni téma alkalmazása

• Lépés 1:

Az első lépés egy új téma letöltése.

• 2 lépés:

Csomagolja ki a témát a ../public/themes/ könyvtárba. Ennek eredménye egy könyvtár-elérési út vezetne az application.css fájlhoz, mint pl

../public/themes/redminecrm/styleheets/application.css

• 3 lépés:

Menjen az Adminisztráció -> Beállítások elemre, és a "Téma" listából (legördülő lista) válassza ki az újonnan létrehozott témát. Ezt követően mentse el a beállításokat.
Ezen a ponton a Redmine-t most meg kell jeleníteni a testreszabott témájával.

Ha a Redmine <1.1.0 verziót használja, akkor lehet, hogy újra kell indítania az alkalmazást, hogy az megjelenjen az elérhető témák listájában.

Témák könyvtárszerkezete

A téma a következő fájlokat tartalmazza:

• javascripts / theme.js (ez nem kötelező): testreszabott JavaScript a témához
• favicon / (ez nem kötelező): favicon a Redmine témához
• stylesheets / application.css (erre szükség van): CSS (Cascading Style Sheets) a témához

Ezt az alábbiakban mutatjuk be:
nyilvános/
  + - témák /
       + - /
            |
            + - favicon /
            | + - (pl. favicon.ico, favicon.png)
            |
            + - javascriptek /
            | + - theme.js
            |
            + - stíluslapok /
                 + - application.css

Redmine-téma létrehozása az alapértelmezett téma használatával

Redmine témát is létrehozhat az alapértelmezett téma CSS fájljának színének megváltoztatásával.

Tegyük fel, hogy mindent meg akar változtatni a kék témáról egy pirosra. Megteheti az alábbi CSS-sel.

1. sh # cd / elérési út / a / redmine-hez
2. sh # mkdir -p public / témák / redtheme / stíluslapok
3. sh # vi public / themes / redtheme / stylesheets / application.css (a kódolás alább látható)
4. Keresse meg az adminisztrátori beállításokat, majd válassza a redtheme menüpontot

/ * betölti az alapértelmezett Redmine stíluslapot * /

@import url (../../../ stíluslapok / application.css);

# felső menü {háttér: RGB (128,0,0);}

#header {háttér szín: RGB (192,0,0);}

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

h1, h2, h3, h4 tartalom {szín: RGB (128,0,0);}

#main {szín: RGB (128,0,0); }

a, a: link, a: meglátogatott {szín: RGB (128,0,0); }

a: lebeg, a: aktív {szín: RGB (128,0,0); }

Hogyan lehet megváltoztatni a téma logóját?

1^st Lépés:

Helyezze a logófájlt a @. / Public / themes / redminecrm / images @ mappába.

2^nd Lépés

Helyettesítse a logo.png fájlt az új, 43x30 méretű logófájllal

...

#header> h1 {

               háttér: url (../ images / logo.png) nincs ismétlés 10x 20%;

               párnázat: 5x60xx; / * Módosítsa ezt a logó beállításához * /

}