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

6/3/2020
6 minuter
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 minimalistisk, 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ýhodou vlastního tématu je to, že je jedinečné a jeho design je přesně takový, jaký chcete (tento benefit není k dispozici u většiny výchozích témat). Máte flexibilitu navrhnout vlastní téma jakýmkoli způsobem, jaký chcete. I když vytvoření vlastního tématu může vyžadovat více úsilí než použití výchozího, výsledky jsou naprosto stojí za to. Pokračujte v č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 vytvořte vlastní application.css and uložte jej do podadresáře stylesheets:
Public/themes/my_theme/stylesheets/application.css
Následující příklad vlastního stylesheetu přepíše pouze několik nastavení:
/* načíst výchozí Redmine stylesheet */
@import url (../../../ stilark / applikation.css);
/* přidat logo v záhlaví */
#huvud {
    bakgrund: #507AAA url(../images/logo.png) no-repeat 2px;
    stoppning vänster: 86px;
}
/* přesunout projektové meny doprava */
#huvudmeny {
    vänster: auto;
    höger: 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ždé stránce 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 brandingování 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,něko).

Použití vlastního tématu
Krok 1: Stáhněte si nové téma.
Krok 2: Rozbalte téma do ../public/themes/. Výsledkem bude cesta k application.css jako například ../public/themes/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ě av měl být Redmine zobrazen s vaším upraveným tématem.
Pokud používáte Redmine < 1.1.0, har 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 är volitelné): upravený JavaScript pro téma
  • favicon / (toto je volitelné): favicon pro Redmine téma
  • stylesheets / application.css (toto je nutné): CSS (Cascading Style Sheets) pro téma

För att demonstrera níže:
offentlig/
  + - teman /
       +- /
            |
            + - favicon /
            | +- (např. favicon.ico, favicon.png)
            |
            + - javascripts /
            | + - theme.js
            |
            + - stilark /
                 + - applikation.css

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

Du har tagit reda på Redmine téma změnou barev mot CSS-förutsättningar.

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 / teman / redtheme / stilark
  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 Redmine stylu */

@import url (../../../ stilark / applikation.css);

# toppmeny {bakgrund: RGB (128,0,0);}

#header {bakgrundsfärg: RGB (192,0,0);}

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

innehåll h1, h2, h3, h4 {färg: RGB (128,0,0);}

#main {färg: RGB (128,0,0); }

a, a: länk, a: besökte {färg: RGB (128,0,0); }

a: svävar, a: aktiv {färg: RGB (128,0,0); }


Vilken typ av logotyp?


1. krok:

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


Andra steg

Nahraďte soubor logo.png novým souborem s logem o velikosti 43x30

...

#header> h1 {

               bakgrund: url (../bilder / logo.png) ingen upprepning 10px 20%;

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

}

Nejlepší uppgradera Redmine? Snadné.

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

Vyzkoušejte Easy Redmine på 30 dagar

Kompletní funkce, chráněno protokolem SSL, denní zálohování, veší lokalitě.