Jak vytvořit vlastní téma pro Redmine.

6/3/2020
6 minut
Lukáš Beňa.

Redmine přichází s rychlým a snadným administrativním způsobem, jak aplikovat téma, které vyhovuje vašim preferencím. Několik výchozích témat je k dispozici, jako je minimalistické, jiná jsou více živé, a pokud se vám žádná z těchto možností nelíbí, můžete vytvořit vlastní vlastní téma Redmine.

Výhodné téma je to, že je jedinečný a jeho design je takový, jaký chcete (tento benefit není k dispozici u většiny výchozích témat). Máte flexibilitu navrhnout vlastní téma způsob, jaký chcete. I když vytvoření vlastního tématu může vyžadovat více než použití výchozího, výsledky jsou naprosto stojí za to. Pokračujte ve čtení, abyste se dozvěděli, jak vytvořit vlastní téma Redmine.

Vytvoření nového tématu Redmine
Redmine poskytuje základní podporu pro témata. Tato témata mohou přidat několik vlastních javascriptů a přepsat styly (application.css).
Prvním krokem je vytvořit nový adresář v public/themes. Název adresáře bude použit jako název tématu. Například: public/themes/my_theme.
Dále vlastní aplikaci.css a uložte její do podadresáře styly:
Public/themes/my_theme/stylesheets/application.css
Následující příklad vlastního stylu přepíše pouze několik nastavení:
/* načíst výchozí šablonu stylů Redmine */
@import url (../../../ styly / application.css);
/* přidat logo v záhlaví */
#záhlaví {
    pozadí: #507AAA url(../images/logo.png) no-repeat 2px;
    padding-left: 86px;
}
/* přesunout projektové menu doprava */
#hlavní menu {
    vlevo: auto;
    doprava: 0px;
}
Výše uvedený příklad předpokládá, že máte obrázek, který se nachází v my_theme/images/logo.png.
Můžete si stáhnout toto téma (vzor) jako výchozí bod pro vlastní vlastní téma Redmine. Rozbalte téma v adresáři public/themes.

Přidání vlastního javascriptu
Stačí vložit váš javascript do javascript/theme.js a bude se automaticky načítat na každé stránce.

Nastavení faviconu
Vložte svůj favicon do adresáře favicon a bude se automaticky načítat na každou stránku místo výchozího. Název souboru faviconu může být cokoli. (Pokud nevíte, favicon je malá ikona 16×16 pixelů, která slouží k brandingu vašich webových stránek. Jeho hlavním účelem je pomoci návštěvníkům snadněji najít vaši stránku, když mají otevřeno několik karet).

Použití vlastního tématu
Krok 1: Uložit si nové téma.
Krok 2: Rozbalte téma do ../public/themes/. bude cesta k application.css jako například../public/predseda/redminecrm/stylesheets/application.css.
Krok 3: Přejděte do sekce Správa -> Nastavení az nabídky "Téma" (rozbalovací nabídka) vyberte téma, které jste právě vytvořili. Poté uložte svá nastavení.
V tomto bodě by měl být Redmine zobrazen s vaším upraveným tématem.
Pokud používáte Redmine < 1.1.0, může být nutné restartovat aplikaci, aby se objevila v nabídce dostupných témat.

Struktura adresáře témat

Téma se skládá z těchto souborů:

  • javascripts/theme.js (toto je volitelné): upravený JavaScript pro téma
  • favicon / (toto je volitelné): favicon pro téma Redmine
  • stylesheets / application.css (toto je nutné): CSS (Cascading Style Sheets) pro téma

To je ukázáno níže:
veřejnost/
  + - témata /
       +- /
            |
            + - favicon /
            | +- (např. favicon.ico, favicon.png)
            |
            + - javascripty /
            | + - theme.js
            |
            + - styly /
                 + - application.css

Vytvoření tématu Redmine pomocí výchozího tématu

Můžete také vytvořit Redmine téma změnou barev v CSS souboru výchozího tématu.

Předpokládejme, že chcete změnit všechno z modrého tématu na červené. Můžete tak učinit pomocí následujícího CSS.

  1. sh# cd / cesta / k / redmine
  2. sh # mkdir -p public / themes / redtheme / stylesheets
  3. sh# vi public / themes / redtheme / stylesheets / application.css (kódování je uvedeno níže)
  4. Přejděte na stránku s administrátorskými nastaveními a vyberte téma redtheme

/* načtení výchozího stylu 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 téma loga?


1. krok:

Umístěte soubor s logem do @./ public / themes/ redminecrm / images@


Druhý krok

Nahrajte soubor logo.png novým souborem s logem o velikosti 43x30

...

#header> h1 {

               pozadí: url (../ images / logo.png) neopakovat 10px 20%;

               odsazení: 5px 60px; /* Upravte toto, abyste nastavili vlastní logo */

}

Nejlepší upgrade Redmine? Snadné.

Získejte všechny výkonné nástroje pro dokonalé plánování, řízení a kontrolu projektů v jednom softwaru.

Vyzkoušejte Easy Redmine na 30 dní zdarma

Kompletní funkce, chráněný protokol SSL, denní zálohování, ve vaší lokalitě.