Sådan opretter du et brugerdefineret Redmine-tema

Fordele ved et brugerdefineret tema er, at det er unikt, og at dets design er præcist 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 og 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å kortet 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å et brugerdefineret stylesheet, der kun overskriver og par indstillinger:
/* indlæs standard Redmine-stylesheet */
@import url (../../../ stilark / applikation.css);
/* tilføj et logo i headeren */
#header {
    baggrund: #507AAA url(../images/logo.png) no-repeat 2px;
    polstring til venstre: 86px;
}
/* flyt projektmenuen til højre */
#hovedmenu {
    venstre: auto;
    højre: 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. Det primære formål er at hjælpe besøgende med at finde dine sider, når de har flere faner åbne).

Anvendelse af det brugerdefinerede tema

• Treenighed 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/styleheets/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 map

Et tema består af disse filer:

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

Disse demonstreres nedenfor:
offentlig/
  + - temaer /
       +- /
            |
            + - favicon /
            | +- (f.eks. favicon.ico, favicon.png)
            |
            + - javascripts /
            | + - theme.js
            |
            + - stilark /
                 + - ansøgning.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 (../../../ 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); }

Hvordan ændres temaets logo?

1. trin:

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

2^nd Treenighed

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

...

#header> h1 {

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

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

}