Hvordan man skaber et tilpasset Redmine-tema

6/3/2020
6 minutter
Lukáš Beňa.

Redmine kommer med et hurtigt og enkelt administrativt værktøj for at søge et tema som passer dine foretrukne. Nogle af de standardteman som findes tilgængelige är minimalistiska, andre är mer livfulla, og om ingen af ​​disse alternative tiltalar dig kan du oprette dit helt egne tilpassede Redmine-tema.

Fordelen med et tilpasset tema er, at det er unikt og designet er præcist som du vil have den (denna fordel findes ikke med de fleste standardteman). Du har fleksibiliteten til at designe et tilpasset tema på hvilket måde du vil. Selv om det kan kræve mere anstrengelse at oprette et tilpasset tema sammenlignet med at bruge et standardtema, er resultatet helt blevet det. Læs videre for at lære dig, hvordan du skaber et tilpasset Redmine-tema.


Opret et nyt Redmine-tema

Redmine ger grundlæggende stöd for teman. Disse emner kan tilføjes til nogle tilpassede JavaScript og konfigurere stilmallar (application.css).
Forsta steget er at oprette en ny mapp i public/themes. Navnet på kortet kommer til at bruges som navn på temaet. Til eksempel: public/themes/my_theme.
Sedan skaber du en tilpasset application.css og sparer den i en undermapp som flere stylesheets:
Public/themes/my_theme/stylesheets/application.css
Følgende er et eksempel på en tilpasset stilmall, som bare gør nogle indstillinger:
/* lad standardstilmallen for Redmine */
@import url (../../../ stilark / applikation.css);
/* læg til en logotype i sidehovedet */
#header {
    baggrund: #507AAA url(../images/logo.png) no-repeat 2px;
    polstring til venstre: 86px;
}
/* flytte projektmenuen til højt */
#hovedmenu {
    venstre: auto;
    højre: 0px;
}
Ovanstående eksempler på forudsætninger at du har et billede som er placeret i my_theme/images/logo.png.
Du kan downloade dette tema (eksempel) som et startpunkt for dit eget tilpassede Redmine-tema. Ekstrahera tema i public/themes-mappen.


Tillæg af tilpasset JavaScript

Inkluder kun JavaScript i javascript/theme.js, og den bliver automatisk opladt på hver side.


Indstilling af favicon

Oplysninger om favicon i favicon-mappen, og den kommer automatisk i stedet for standardfaviconen på hver side. Favicon-filens navn kan være hvad som helst. (Om du er en favorit, der er en lille 16x16 pixler, som bruges til at bruge din kontakt på din hjemmeside. Formålet er at få en besøgende til at finde din side lettere, når de flere flik har åbnet).


Tilämpning af det tilpassede tema

  • Trin 1:

Forsta steg er at downloade et nyt tema.

  • Trin 2:

Pakke op tema i ../public/themes/. Resultatet af dette skulle være en søgning til application.css som et eksempel

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

  • Trin 3:

Gå til Administration -> Indstillinger og vælg tema du nyss oprettet fra listen "Tema" (rullgardinsmeny). Spar dine indstillinger efter dette.
Vid det här laget bör Redmine visa med dit tilpassede tema.

Hvis du bruger Redmine < 1.1.0, kan det være nødvendigt at starte en applikation for at de ska vista i listen over tilgængelige temaer.


Struktur for temamappar

Et tema består af følgende filer:

  • javascripts/theme.js (valfri): tilpasset JavaScript til tema
  • favicon / (valfritt): favicon for Redmine-temat
  • stylesheets / application.css (nyt): CSS (Cascading Style Sheets) for temaet

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

Hvordan man skaber et Redmine-tema ved at bruge standardteknologi

Du kan også oprette et Redmine-tema som ændrer farven i CSS-filen til standardformat.

Säg at du vil ændre alt fra et blått tema til et rött. Det kan du gøre 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 visa nedan)
  4. Gå til administratorindstillinger og vælg sedan redtheme

/* lade standard-Redmine-stilmallen */

@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 ændrer man temaets logotype?


1:a steg:

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

2a Steg

Ersätt logo.png-filen med den nye logofil med størrelsen 43x30

...

#header> h1 {

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

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

}

Den ultimative Redmine-opgraderingen? Enkel.

Få alle kraftfulde værktøjer til perfekt projektplanlægning, -håndtering og -kontrol i en end-software.

Prova Easy Redmine i en 30 dages gratis provperiode

Fuldstændige funktioner, SSL-beskyttelse, daglig sikkerhedskopior, og din geografiske plads