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ördel 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äva 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å mappen 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(../../../stylesheets/application.css);
/* lägg till en logotyp i sidhuvudet */
#header {
    background: #507AAA url(../images/logo.png) no-repeat 2px;
    padding-left: 86px;
}
/* flytta projektmenyn till höger */
#main-menu {
    left: auto;
    right: 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 inte vet det är en favicon en liten 16x16 pixlars ikon som används för att marknadsföra din webbplats. Dess huvudsakliga syfte är att hjälpa besökare att hitta din sida lättare när de har flera flikar öppna).

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/stylesheets/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 visas med ditt anpassade tema.

Om du använder Redmine < 1.1.0 kan det vara nödvändigt att starta om applikationen för att den ska visas 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 temat
• favicon / <favicon-fil> (valfritt): favicon för Redmine-temat
• stylesheets / application.css (nödvändigt): CSS (Cascading Style Sheets) för temat

Detta visas nedan:
public/
  +- themes/
       +- <temanamn>/
            |
            +- favicon/
            |    +- <favicon-fil> (t.ex. favicon.ico, favicon.png)
            |
            +- javascripts/
            |    +- theme.js
            |
            +- stylesheets/
                 +- application.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 /path/to/redmine
2. sh# mkdir -p public/themes/redtheme/stylesheets
3. sh# vi public/themes/redtheme/stylesheets/application.css (koden visas nedan)
4. Gå till admininställningarna och välj sedan redtheme

/* ladda standard-Redmine-stilmallen */

@import url(../../../stylesheets/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); }

content h1, h2, h3, h4 {color:RGB(128,0,0);}

#main { color:RGB(128,0,0); }

a, a:link, a:visited{ color:RGB(128,0,0); }

a:hover, a:active{ color: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 {

               background: url(../images/logo.png) no-repeat 10px 20%;

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

}