Hvordan gør du et tilpasset Redmine-tema.

Fordelen af ​​et tilpasset tema er, at det unikke er, og det præcise design er som du vil (dette fordel er ikke tilgængelig for de fleste standardtemaer). Du har fleksibilitet til et tilpasset tema på enhver ønsket måde at designe. Selvom det kan laves et tilpasset tema, er der mere omkostninger i sammenligning med brugen af ​​et standardtema, er det absolut værd at betale. Læs mere om hvordan du kan lave et tilpasset Redmine-tema.

Creëren af ​​et nyt Redmine-tema

Redmine tilbyder grundlæggende støtte til temaer. Disse temaer kan tilføjes et par tilpassede javascripts og stilblade (application.css) overskrivning.
Det første skridt er at skabe et nyt kort i offentlige/temaer. Navnet på kortet bruges som navnet på temaet. Eksempel: offentlige /temaer / mit_tema.
Opret derefter en tilpasset application.css og slå denne op i et underkort kaldet stylesheets:
Offentlige / temaer / my_theme / stilark / application.css
Nedenfor er et eksempel på et tilpasset stilblad, der kun er et par indstillinger, der er skrevet over:
/* har standard Redmine-stilblad */
@import url (../../../ stilark / applikation.css);
/* Tilføj et logo tå i overskriften */
#header {
    baggrund: # 507AAA url (../ images / logo.png) ingen gentagelse 2px;
    polstring til venstre: 86px;
}
/* sæt projektmenuen til højre */
#hovedmenu {
    venstre: auto;
    højre: 0px;
}
Det tidligere nævnte eksempel går ud af, hvor du har et billede, der findes i mit_tema / images / logo.png.
Du kan downloade dit tema (forbillede) som et startpunkt for dit eget tilpassede Redmine-tema. Pak temaet ud i det offentlige/temakort.

Tilpasning af tilpasset Javascript

Tilføj bare javascript-tå i javascript /theme.js, da det automatisk bliver indlæst på hver side.

Instellen af ​​Favicon

Tilføj din favicon tå i favicon-kortet, og det bliver automatisk indlæst på plads af standardfavicon på hver side. Navnet på favicon-filen kan være alt. (I tilfældet, hvor du ikke ved, er et favoritikon et lille 16x16 pixel ikon, der skal bruges til branding af dit websted. Det primære mål er, at besøgende kan hjælpe med at finde en nemmere side, når flere faner er åbne).

Tilpasning af det tilpassede tema

• Trin 1:

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

• trin 2:

Pak det tema ud i ../public/themes/. Resultatet af et kort-pad til application.css er f.eks

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

• trin 3:

Gå til Beheer -> Indstillinger, og vælg det tema, du har lavet ud af "Thema"-listen (keuzeliste). Du skal derefter indstille op.
På dette punkt skal Redmine blive vist med dit tilpassede tema.

Hvis du bruger Redmine < 1.1.0, skal du muligvis starte en applikation igen, så denne vises i den tilgængelige temaliste.

Struktur af temaets bibliotek

Et tema består af disse filer:

• javascripts/theme.js (valgfri): tilpasset JavaScript til dit tema
• favicon / (valgfrit): favicon for het Redmine-tema
• stylesheets / application.css (noodzakelijk): CSS (Cascading Style Sheets) til dit tema

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

Et Redmine-tema laves ved at bruge standardtemaet

Du kan også lave et Redmine-tema gennem farver i CSS-filen af ​​standardtemaet, der skal ændres.

Stel, at alt er af et blåt tema til et rødt tema vil ændre sig. Dette kan du gøre med nedenstående CSS.

1. sh# cd / pad / naar / redmine
2. sh # mkdir -p offentlige / temaer / redtheme / stilark
3. sh# vi public / themes / redtheme / stylesheets / application.css (kodning bliver vist nedenfor)
4. Gå til de styringsindstillinger og vælg derefter rødt tema

/* laad de 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 dit logo på temaet?

2^e Stap

Vervang bestanden logo.png fra den nye logofil med en størrelse på 43x30

...

#header> h1 {

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

               polstring: 5px 60px; /* Pas dit til om dit eget logo i te stellen */

}