איך ליצור ערכת עיצוב מותאמת אישית ב-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.

1. sh # cd / path / to / redmine
2. sh # mkdir -p public / themes / redtheme / stylesheets
3. sh # vi public / themes / redtheme / stylesheets / application.css (kódování je zobrazeno níže)
4. 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?

1^st Krok:

Umístěte soubor s logem na @. / Public / themes / redminecrm / images @

2^nd 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 * /

}