Hur man skapar ett anpassat Redmine-tema

Fördelen med ett anpassat tema är att det är unikt och designen är precis som du vill ha den (denna fördelar finns inte med de flesta standardteman). Du har flexibiliteten att designa ett anpassat tema på vilket sätt du vill. Även om det kan krävas mer ansträngning att skapa ett anpassat tema jämfört med att använda ett standardtema, är resultatet 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).
Första steget är att skapa en ny mapp i public/themes. Namnet på kartan kommer att användas som namnet på temat. Till exempel: public/themes/my_theme.
Sedan skapar du en anpassad application.css och sparar den i en undermapp som heter stylesheets:
Public/themes/my_theme/stylesheets/application.css
Följande är ett exempel på en anpassad stilmall som bara åsidosätter några inställningar:
/* ladda standardstilmallen för Redmine */
@import url (../../../ stilark / applikation.css);
/* lägg till en logotyp i sidhuvudet */
#huvud {
    bakgrund: #507AAA url(../images/logo.png) no-repeat 2px;
    stoppning vänster: 86px;
}
/* flytta projektmenyn till höger */
#huvudmeny {
    vänster: auto;
    höger: 0px;
}
Ovanstående exempel förutsätter att du har en bild som är placerad i 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 public/themes-mappen.

Tillägg av anpassad JavaScript

Inkludera bara din JavaScript i javascript/theme.js och den kommer att laddas automatiskt på varje sida.

Inställning av favicon

Infoga din favicon i favicon-mappen, och den kommer att laddas automatiskt istället för standardfaviconen på varje sida. Favicon-filens namn kan vara vad som helst. (Om du det är en favorit en liten 16x16 pixlar som används för att inte kontakta din webbplats. Syftet är att hitta besökaren att hitta din sida lättare när de flera flikar har öppnats).

Tillämpning av det anpassade temat

• Steg 1:

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

• Steg 2:

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

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

• Steg 3:

Gå till Administration -> Inställningar och välj temat du nyss skapat från listan "Tema" (rullgardinsmeny). Spara dina inställningar efter detta.
Vid det här laget bör Redmine visa med ditt anpassade tema.

Om du använder Redmine < 1.1.0 kan det vara nödvändigt att starta om applikationer för att de ska visa i listan över tillgängliga teman.

Struktur för temamappar

Ett tema består av följande filer:

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

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

Hur man skapar ett Redmine-tema genom att använda standardtemat

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

Säg att du vill ändra allt från ett blått tema till ett rött. Det kan du göra med följande CSS.

1. sh# cd /sökväg/till/redmine
2. sh# mkdir -p public/themes/redtheme/stylesheets
3. sh# vi public/themes/redtheme/stylesheets/application.css (koden visa nedan)
4. Gå till admininställningarna och välj sedan redtheme

/* ladda standard-Redmine-stilmallen */

@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 temats logotyp?

1:a steg:

Placera logofilen i @./public/themes/redminecrm/images@

2^a Steg

Ersätt logo.png filen med den nya logofilen med storleken 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 */

}