如何创建自定义的Redmine主题

Fordelen ved et brugerdefineret tema er, at det er unikt, og 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 tilpasset tema, som du vil. Selvom det kan tage mere indsats at oprette et brugerdefineret tema i modsætning til at bruge et standard, er resultaterne det hele værd. 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 et par brugerdefinerede javascript og tilsidesætte stilark (application.css).
Det første trin er at oprette en ny mappe i det offentlige / temaer. Navnet på biblioteket vil blive brugt som navnet på temaet. For eksempel: offentlig / temaer / min_tema.
Opret derefter brugerdefineret application.css og gem dette i en undermappe kaldet stylesheets:
Offentlige / temaer / my_theme / stilark / application.css
Følgende er et brugerdefineret typografiarkeksempel, der kun tilsidesætter et par indstillinger:
/ * indlæse standard Redmine-stilarket * /
@import url (../../../ stilark / applikation.css);
/ * tilføj et logo i overskriften * /
#header {
    baggrund: # 507AAA url (../ images / logo.png) ingen gentagelse 2px;
    polstring til venstre: 86px;
}
/ * flyt projektmenuen til højre * /
#hovedmenu {
    venstre: auto;
    højre: 0px;
}
Det ovennævnte eksempel antager, at du har et billede, der er placeret på my_theme / images / logo.png.
Du kan downloade dette tema (prøve) som udgangspunkt for dit eget tilpassede Redmine-tema. Uddrag temaet i den offentlige / temakatalog.

Tilføjelse af tilpasset Javascript

Bare inkluder dit javascript i javascript /theme.js, så indlæses det automatisk på hver side.

Indstilling af Favicon

Indsæt dit favicon i favicon-mappen, og det vil blive indlæst automatisk i stedet for standarden på hver side. Favicon-filens navn kan være hvad som helst. (Hvis du ikke ved det, er et favicon et lillebitte 16×16 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 tilpassede tema

• Trin 1:

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

• Trin 2:

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

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

• Trin 3:

Gå over til Administration -> Indstillinger, og vælg det tema, du lige har oprettet, på listen "Tema" (rulleliste). Gem derefter dine indstillinger efter dette.
På dette tidspunkt skal Redmine nu vises ved hjælp af dit tilpassede tema.

Hvis du bruger Redmine <1.1.0, skal du muligvis genstarte applikationen, så den vises på listen over tilgængelige temaer.

Temaers katalogstruktur

Et tema omfatter disse filer:

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

Dette demonstreres nedenfor:
offentlig/
  + - temaer /
       + - /
            |
            + - favicon /
            | + - (f.eks. favicon.ico, favicon.png)
            |
            + - javascripts /
            | + - theme.js
            |
            + - stilark /
                 + - ansøgning.css

Oprettelse af et Redmine-tema ved hjælp af standardtema

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

Sig, at du vil ændre alt fra et blåt tema til et rødt tema. Du kan gøre det med CSS nedenfor.

1. sh # cd / sti / til / redmine
2. sh # mkdir -p offentlige / temaer / redtheme / stilark
3. sh # vi public / themes / redtheme / stylesheets / application.css (kodning er vist nedenfor)
4. Gå over til administratorindstillingerne, og vælg derefter redtheme

/ * indlæse standard Redmine-stilarket * /

@import url (../../../ stilark / applikation.css);

# top-menu {baggrund: RGB (128,0,0);}

#header {baggrund-farve: RGB (192,0,0);}

# projects-index ul.projects div.root a.project {color: RGB (128,0,0); }

indhold h1, h2, h3, h4 {farve: RGB (128,0,0);}

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

a, a: link, a: besøgt {color: RGB (128,0,0); }

a: hover, a: aktiv {farve: RGB (128,0,0); }

Sådan ændres temaets logo?

1^st Trin:

Sæt logo-fil til @ / offentlig / temaer / redminecrm / billeder @

2^nd Trin

Udskift logo.png-fil med den nye logofil med 43x30 størrelse

...

#header> h1 {

               baggrund: url (../billeder / logo.png) ingen gentagelse 10px 20%;

               polstring: 5px 60px; / * Rediger dette for at indstille dit eget logo * /

}