Jak vytvořit vlastní téma Redmine
Redmine přichází s rychlým a snadným administrativním způsobem, jak použít téma, které vyhovuje vašim preferencím. Několik z výchozí motivy k dispozici jsou minimalistický, další jsou více vibrující, a pokud žádná z těchto možností nenapadne vaši fantazii, můžete vytvořit své vlastní vlastní téma Redmine.
Výhodou vlastního motivu je, že je jedinečný a jeho design je přesně takový, jaký ho chcete (tato výhoda není dostupná u většiny výchozích motivů). Máte flexibilitu navrhnout vlastní motiv, jak chcete. Přestože vytvoření vlastního motivu může vyžadovat více úsilí než použití výchozího motivu, výsledky rozhodně stojí za to. Čtěte dále a zjistěte, jak vytvořit vlastní téma Redmine.
Vytvoření nového tématu Redmine
Redmine poskytuje základní podporu tématům. Tato témata mohou přidat několik vlastních javascriptů a přepsat šablony stylů (application.css).
Prvním krokem je vytvoření nového adresáře ve veřejné / témata. Název adresáře bude použit jako název motivu. Například: public / themes / my_theme.
Dále vytvořte vlastní application.css a uložte to do podsložky s názvem styly:
Veřejné / témata / my_theme / styly / application.css
Následuje příklad vlastního stylu, který přepíše pouze několik nastavení:
/ * načíst výchozí šablonu stylů Redmine * /
@import url (../../../ styly / application.css);
/ * přidat do záhlaví logo * /
#záhlaví {
pozadí: # 507AAA url (../ images / logo.png) bez opakování 2px;
padding-left: 86px;
}
/ * přesuňte nabídku projektu doprava * /
#hlavní menu {
vlevo: auto;
doprava: 0px;
}
Výše uvedený příklad předpokládá, že máte obrázek, který je umístěn na my_theme / images / logo.png.
Toto téma (ukázku) si můžete stáhnout jako výchozí bod pro své vlastní vlastní téma Redmine. Extrahujte téma v adresáři public / themes.
Přidání vlastního Javascriptu
Stačí zahrnout váš javascript do javascript /theme.js a automaticky se načte na každou stránku.
Nastavení Favicon
Vložte svou favicon do složky favicon a načte se automaticky, nikoli jako výchozí na každé stránce. Název souboru favicon může být jakýkoli. (V případě, že to nevíte, favicon je malá ikona o rozměrech 16×16 pixelů, která slouží k brandingu vašeho webu. Jejím hlavním cílem je pomoci návštěvníkům snáze najít vaši stránku, když mají otevřeno několik karet).
Použití vlastního motivu
- Krok 1:
Prvním krokem je stažení nového motivu.
- Krok 2:
Rozbalte téma do ../public/themes/. Výsledkem by byla cesta k adresáři application.css, například
../public/themes/redminecrm/stylesheets/application.css
- Krok 3:
Přejděte do části Správa -> Nastavení a ze seznamu „Téma“ (rozevírací seznam) vyberte nově vytvořené téma. Poté uložte nastavení.
V tomto okamžiku by se nyní měl Redmine zobrazit pomocí vašeho přizpůsobeného motivu.
Pokud používáte Redmine <1.1.0, možná budete muset aplikaci restartovat, aby se zobrazila v seznamu dostupných motivů.
Struktura adresářů témat
Téma obsahuje tyto soubory:
- javascripts / theme.js (toto je volitelné): přizpůsobený JavaScript pro dané téma
- favicon / (toto je volitelné): favicon pro téma Redmine
- stylesheets / application.css (to je nutné): CSS (Cascading Style Sheets) pro dané téma
Toto je demonstrováno níže:
veřejnost/
+ - témata /
+ - /
|
+ - favicon /
| + - (např. favicon.ico, favicon.png)
|
+ - javascripty /
| + - theme.js
|
+ - styly /
+ - application.css
Vytvoření motivu Redmine pomocí výchozího motivu
Můžete také vytvořit motiv Redmine změnou barev v souboru CSS výchozího motivu.
Řekněme, že chcete změnit vše z modrého na červené. Můžete tak učinit pomocí níže uvedeného CSS.
- sh # cd / path / to / redmine
- sh # mkdir -p public / themes / redtheme / stylesheets
- sh # vi public / themes / redtheme / stylesheets / application.css (kódování je zobrazeno níže)
- Přejděte na nastavení správce a poté vyberte znovu
/ * načíst výchozí šablonu stylů Redmine * /
@import url (../../../ styly / 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); }
obsah h1, h2, h3, h4 {barva: RGB (128,0,0);}
#main {color: RGB (128,0,0); }
a, a: link, a: navštíveno {color: RGB (128,0,0); }
a: hover, a: active {color: RGB (128,0,0); }
Jak změnit logo motivu?
1st Krok:
Umístěte soubor s logem na @. / Public / themes / redminecrm / images @
2nd Krok
Nahraďte soubor logo.png novým logem o velikosti 43x30
...
#header> h1 {
pozadí: url (../ images / logo.png) neopakovat 10px 20%;
čalounění: 5px 60px; / * Upravte toto a nastavte své vlastní logo * /
}
Dokonalý upgrade Redmine? Snadný.
Získejte všechny výkonné nástroje pro dokonalé plánování, správu a řízení projektů v jednom softwaru.