Sådan opretter du et brugerdefineret Redmine-tema

Fordele ved et brugerdefineret tema er, at det er unikt, og at dets design er præcis som du ønsker det (denne fordel er ikke tilgængelig med de fleste standardtemaer). Du har fleksibiliteten til at designe et brugerdefineret tema på den måde, du ønsker det. Selvom det kan kræve mere indsats at oprette et brugerdefineret tema i modsætning til at bruge et standardtema, er resultaterne helt værd det. Læs videre for at lære, hvordan du opretter et brugerdefineret Redmine-tema.

Oprettelse af et nyt Redmine-tema

Redmine giver grundlæggende support til temaer. Disse temaer kan tilføje nogle brugerdefinerede JavaScript og overskrive stilarter (application.css).
Det første skridt er at oprette en ny mappe i public/themes. Navnet på mappen vil blive brugt som navnet på temaet. For eksempel: public/themes/my_theme.
Derefter oprettes brugerdefineret application.css og gemmes i en undermappe kaldet stylesheets:
Public/themes/my_theme/stylesheets/application.css
Følgende er et eksempel på en brugerdefineret stylesheet, der kun overskriver et par indstillinger:
/* indlæs standard Redmine-stylesheet */
@import url(../../../stylesheets/application.css);
/* tilføj et logo i headeren */
#header {
    baggrund: #507AAA url(../images/logo.png) no-repeat 2px;
    padding-left: 86px;
}
/* flyt projektmenuen til højre */
#main-menu {
    left: auto;
    right: 0px;
}
Det førnævnte eksempel antager, at du har et billede, der er placeret i my_theme/images/logo.png.
Du kan downloade dette tema (eksempel) som et udgangspunkt for dit eget brugerdefinerede Redmine-tema. Udpak temaet i public/themes-mappen.

Tilføjelse af brugerdefineret JavaScript

Inkluder blot dit JavaScript i javascript/theme.js, og det vil blive indlæst automatisk på hver side.

Indstilling af favicon

Indsæt dit favicon i favicon-mappen, og det vil blive indlæst automatisk i stedet for standardikonet på hver side. Favicon-filens navn kan være hvad som helst. (Hvis du ikke ved det, er et favicon et lille 16x16 pixel-ikon, der tjener formålet med dit websteds branding. Dets primære formål er at hjælpe besøgende med at finde din side lettere, når de har flere faner åbne).

Anvendelse af det brugerdefinerede tema

• Trin 1:

Det første skridt er at downloade et nyt tema.

• Trin 2:

Udpak temaet i ../public/themes/. Resultatet af dette ville være en sti til application.css som f.eks.

../public/themes/redminecrm/stylesheets/application.css

• Trin 3:

Gå til Administration -> Indstillinger og vælg temaet, du lige har oprettet, fra "Tema" listen (rulleliste). Gem derefter dine indstillinger.
På dette tidspunkt skal Redmine nu vises med dit tilpassede tema.

Hvis du bruger Redmine < 1.1.0, skal du muligvis genstarte programmet, så det vises i listen over tilgængelige temaer.

Struktur for temaets mappe

Et tema består af disse filer:

• javascripts/theme.js (dette er valgfrit): tilpasset JavaScript til temaet
• favicon / <favicon fil> (dette er valgfrit): favicon til Redmine-temaet
• stylesheets / application.css (dette er nødvendigt): CSS (Cascading Style Sheets) til temaet

Dette demonstreres nedenfor:
public/
  +- themes/
       +- <tema navn>/
            |
            +- favicon/
            |    +- <favicon fil> (f.eks. favicon.ico, favicon.png)
            |
            +- javascripts/
            |    +- theme.js
            |
            +- stylesheets/
                 +- application.css

Sådan oprettes et Redmine-tema ved hjælp af standardtemaet

Du kan også oprette et Redmine-tema ved at ændre farverne i CSS-filen for standardtemaet.

Lad os sige, at du vil ændre alt fra et blåt tema til et rødt. Dette kan gøres med følgende CSS.

1. sh# cd /sti/til/redmine
2. sh# mkdir -p public/themes/redtheme/stylesheets
3. sh# vi public/themes/redtheme/stylesheets/application.css (koden vises nedenfor)
4. Gå til administrationsindstillingerne og vælg derefter redtheme

/* indlæs standard Redmine-stylesheet */

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

Sådan ændres temaets logo?

1. trin:

Placer logo-filen i @./public/themes/redminecrm/images@

2^nd Trin

Udskift logo.png filen med den nye logofil med størrelsen 43x30

...

#header > h1 {

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

               padding: 5px 60px; /* Ændre dette for at sætte dit eget logo */

}