Korleis lage eit tilpassa Redmine-tema

Fordelen med et tilpasset tema er at det er unikt, og designet er akkurat slik du ønsker det (denne fordelen er ikke tilgjengelig med de fleste standardtemaer). Du har fleksibiliteten til å designe et tilpasset tema akkurat slik du vil. Selv om det kan kreve mer innsats å lage et tilpasset tema i motsetning til å bruke et standard tema, er resultatene helt verdt det. Les videre for å lære hvordan du oppretter et tilpasset Redmine-tema. Opprettelse av et nytt Redmine-tema Redmine gir grunnleggende støtte for temaer. Disse temaene kan legge til noen tilpassede JavaScript og overstyre stiler (application.css). Første trinn er å opprette en ny mappe i public/themes. Navnet på mappen vil bli brukt som navnet på temaet. For eksempel: public/themes/my_theme. Deretter oppretter du en tilpasset application.css og lagrer den i en undermappe kalt stylesheets: Public/themes/my_theme/stylesheets/application.css Følgende er et eksempel på en tilpasset stylesheet som bare overstyrer noen få innstillinger: /* last standard Redmine stylesheet */ @import url(../../../stylesheets/application.css); /* legg til et logo i headeren */ #header { background: #507AAA url(../images/logo.png) no-repeat 2px; padding-left: 86px; } /* flytt prosjektmenyen til høyre */ #main-menu { left: auto; right: 0px; } Det nevnte eksempelet forutsetter at du har et bilde som er plassert i my_theme/images/logo.png. Du kan laste ned dette temaet (eksempel) som et utgangspunkt for ditt eget tilpassede Redmine-tema. Pakk ut temaet i public/themes-mappen. Tillegg av tilpasset JavaScript Inkluder bare JavaScript-en din i javascript/theme.js, og den vil bli lastet automatisk på hver side. Innstilling av Favicon Sett inn faviconen din i favicon-mappen, og den vil bli lastet automatisk i stedet for standard favicon på hver side. Favicon-filens navn kan være hva som helst. (Hvis du ikke vet det, er en favicon et lite 16x16 piksels ikon som tjener formålet med merkevaren til nettstedet ditt. Hovedmålet er å hjelpe besøkende med å finne siden din lettere når de har flere faner åpne). Bruk av det tilpassede temaet Trinn 1: Første trinn er å laste ned et nytt tema. Trinn 2: Pakk ut temaet i ../public/themes/. Resultatet av dette vil være en mappensti til application.css, for eksempel: ../public/themes/redminecrm/stylesheets/application.css Trinn 3: Gå til Administrasjon -> Innstillinger og fra "Tema" -listen (rullegardinlisten), velg temaet du nettopp har opprettet. Etter dette, lagre innstillingene dine. På dette tidspunktet skal Redmine nå vises med det tilpassede temaet ditt. Hvis du bruker Redmine < 1.1.0, må du kanskje starte applikasjonen på nytt for at den skal vises i listen over tilgjengelige temaer.

Temaets katalogstruktur

Et tema består av disse filene:

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

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

Slik oppretter du et Redmine-tema ved å bruke standardtemaet

Du kan også opprette et Redmine-tema ved å endre fargene i CSS-filen til standardtemaet.

Si at du vil endre alt fra et blått tema til et rødt tema. Dette kan du gjøre med CSS-en nedenfor.

1. sh# cd /sti/til/redmine
2. sh# mkdir -p public/themes/redtheme/stylesheets
3. sh# vi public/themes/redtheme/stylesheets/application.css (koding vises nedenfor)
4. Gå til admininnstillingene og velg deretter redtheme

/* last inn standard Redmine-stilark */

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

Hvordan endre temaets logo?

1. trinn:

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

2^nd steg

Erstatt logo.png-filen med den nye logofilen med størrelsen 43x30

...

#header > h1 {

               bakgrunn: url(../images/logo.png) ingen gjentakelse 10px 20%;

               padding: 5px 60px; /* Endre dette for å sette ditt eget logo */

}