Cách tạo một giao diện Redmine tùy chỉnh

Fördelen med ett anpassat tema är att det är unikt och dess design är precis som du vill ha det (denna fördel är inte tillgänglig med de flesta standardteman). Du har flexibiliteten att designa ett anpassat tema som du vill. Även om det kan ta mer ansträngning att skapa ett anpassat tema än att använda ett standardtema, är resultaten helt värt det. Läs vidare för att lära dig hur du skapar ett anpassat Redmine-tema.

Skapande av ett nytt Redmine-tema

Redmine ger grundläggande stöd för teman. Dessa teman kan lägga till några anpassade javascript och åsidosätta stilmallar (application.css).
Det första steget är att skapa en ny katalog i offentliga / teman. Katalogens namn kommer att användas som temat. Till exempel: public / teman / my_theme.
Skapa sedan anpassad application.css och spara den i en undermapp som heter stilark:
Public / teman / my_theme / stylesheets / application.css
Följande är ett anpassat formatmallsexempel som endast åsidosätter ett par inställningar:
/ * ladda standardmallen Redmine-format * /
@import url (../../../ stilark / applikation.css);
/ * lägg till en logotyp i rubriken * /
#huvud {
    bakgrund: # 507AAA url (../ images / logo.png) no-repetera 2px;
    stoppning vänster: 86px;
}
/ * flytta projektmenyn till höger * /
#huvudmeny {
    vänster: auto;
    höger: 0px;
}
Ovan nämnda exempel antar att du har en bild som finns på my_theme / images / logo.png.
Du kan ladda ner detta tema (exempel) som en startpunkt för ditt eget anpassade Redmine-tema. Extrahera temat i den offentliga / temakatalogen.

Tillägg av anpassat Javascript

Inkludera bara ditt javaskript i javascript /theme.js så laddas det automatiskt på varje sida.

Ställer in Favicon

Infoga din favicon i favicon-mappen, så kommer den att laddas automatiskt istället för standarden på varje sida. Favicon-filens namn kan vara vad som helst. (Om du inte vet är en favicon en liten ikon på 16×16 pixlar som tjänar syftet med din webbplatss varumärke. Dess primära syfte är att hjälpa besökare att lättare hitta din sida när de har flera flikar öppna).

Tillämpa det anpassade temat

• Steg 1:

Det första steget är att ladda ner ett nytt tema.

• steg 2:

Packa upp temat i ../public/themes/. Resultatet av detta skulle vara en katalogsökväg till application.css som

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

• steg 3:

Gå till Administration -> Inställningar och välj temat som du nyligen har skapat i listan "Tema" (rullgardinslista). Efter detta, spara dina inställningar.
Just nu ska Redmine visas med ditt anpassade tema.

Om du använder Redmine <1.1.0 kan du behöva starta om programmet så att det visas i listan över tillgängliga teman.

Temas katalogstruktur

Ett tema består av dessa filer:

• javascripts / theme.js (detta är valfritt): anpassad JavaScript för temat
• favicon / (detta är valfritt): favicon för Redmine-temat
• stylesheets / application.css (detta är nödvändigt): CSS (Cascading Style Sheets) för temat

Detta visas nedan:
offentlig/
  + - teman /
       + - /
            |
            + - favicon /
            | + - (t.ex. favicon.ico, favicon.png)
            |
            + - javascripts /
            | + - theme.js
            |
            + - stilark /
                 + - applikation.css

Skapa ett redmine-tema med hjälp av standardtema

Du kan också skapa ett Redmine-tema genom att ändra färgerna i CSS-filen för standardtema.

Säg att du vill ändra allt från ett blått tema till ett rött. Du kan göra det med CSS nedan.

1. sh # cd / path / to / redmine
2. sh # mkdir -p public / teman / redtheme / stilark
3. sh # vi public / themes / redtheme / stylesheets / application.css (kodning visas nedan)
4. Gå över till admininställningarna och välj sedan redtheme

/ * ladda standardmallen Redmine-format * /

@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); }

Hur man ändrar temat logotyp?

1^st Steg:

Sätt logofilen till @. / Public / teman / redminecrm / images @

2^nd Steg

Ersätt logo.png-fil med den nya logofilen med storlek 43x30

...

#header> h1 {

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

               stoppning: 5px 60px; / * Ändra detta för att ställa in din egen logotyp * /

}