Korleis lage eit tilpassa Redmine-tema

6/3/2020
6 minuter
Lukáš Beňa
Redmine kjem med en snabb och enkel administrativ metod för dig att använda ett tema som passar dina preferansar. Nokre av dei standardtemaene som er tilgjengelege er minimalistiske, andre er meir livlege, och om ingen av dess alternativa fenger deg, kan du lage ditt eige tilpassa Redmine-tema.
Fördelar med ett anpassat tema är att det är unikt, och designat är precis som du vill ha det (denna fördelen är inte tillgänglig med de flesta standardtemaer). Du har flexibilitet för att designa och anpassa temat precis som du vill. Själv om det kan kräva mer insats för att skapa och anpassa temat i motsättning för att använda ett standardtema, är resultatet helt klart det. Läs vidare för att lära dig hur du skapar och anpassar Redmine-tema. Beskrivning av ett nytt Redmine-tema Redmine ger grundläggande stöd för temaer. Dessa tema kan läggas till någon anpassad JavaScript och överstyrning (application.css). Första steget är att skapa en ny karta i public/themes. Navnet på kartan kommer att bli använd som namnet på temaet. Till exempel: public/themes/my_theme. Återställ skapas för att anpassa application.css och lagra den i en undermappe kallade stilmallar: Public/themes/my_theme/stylesheets/application.css Följ ett exempel på en anpassad stilmall som bara överstyrer några inställningar: /* senaste standard Redmine stylesheet * / @import url(../../../stylesheets/application.css); /* lägg til et logo i headeren */ #header { bakgrund: #507AAA url(../images/logo.png) no-repeat 2px; padding-vänster: 86px; } /* flytta projektmenyn till höger */ #main-menu { vänster: auto; höger: 0px; } Det nämnde exempelet forutsetter du har ett bild som är placerad i my_theme/images/logo.png. Du kan ladda ner detta tema (exempel) som ett utgångspunkt för ditt eget anpassade Redmine-tema. Pakk ut temat i public/themes-mappen. Tillägg av anpassad JavaScript Inkluderar bara JavaScript-en din i javascript/theme.js, och den kommer att bli senaste automatiskt på varje sida. Inställning av Favicon Sett in faviconen din i favicon-mappen, och den kommer att bli automatiskt i stället för standardfavicon på varje sida. Favicon-filens namn kan vara vad som helst. (Hvis du inte vet det, är en favicon et lite 16x16 piksels ikon som tjänar syftet med märkevaren till webbplatsen ditt. Huvudmålet är att hjälpa besökare med att hitta sedan dina läser när de har flera faner öppna). Bruk av det anpassade temat Trinn 1: Första steget är att ladda ner ett nytt tema. Trinn 2: Pakk ut temaet i ../public/themes/. Resultatet av detta vil vara en kartläggning till application.css, till exempel: ../public/themes/redminecrm/stylesheets/application.css Trinn 3: Gå till Administration -> Inställningar och från "Tema" -listen (rullegardinlisten), välg temaet du just har skapat. Efter detta, lagra inställningar. På denna tidpunkt ska Redmine nå visas med det anpassade temat ditt. Om du använder Redmine < 1.1.0, kan du kanske starta applikationen på nytt för att den ska visas i lyssna på tillgängliga temaer.

Temats katalogstruktur

Temat består av denna fil:

  • javascripts/theme.js (det är valfritt): anpassa JavaScript för temaet
  • favicon / (dette er valgfritt): favicon för Redmine-temaet
  • stylesheets / application.css (det är nödvändigt): CSS (Cascading Style Sheets) för temaet

Detta demonstreras nedan:
offentlig/
  + - teman /
       +- /
            |
            + - favicon /
            | +- (t.ex. favicon.ico, favicon.png)
            |
            + - javascripts /
            | + - theme.js
            |
            + - stilark /
                 + - applikation.css


Så här skapar du ett Redmine-tema för att använda standardtemaet

Du kan också skapa ett Redmine-tema för att ändra färger i CSS-filen till standardtemaet.

Si at du vil ändra alt fra et blått tema til et rødt tema. Detta kan du göra med CSS-en nedan.

  1. sh# cd /sti/til/redmine
  2. sh# mkdir -p public/themes/redtheme/stylesheets
  3. sh# vi public/themes/redtheme/stylesheets/application.css (kodning visas nedan)
  4. Gå till administratörsinställningar och välj sedan redtheme

/* last inn standard Redmine-stilark */

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

# toppmeny {bakgrund: RGB (128,0,0);}

#header {bakgrundsfärg: RGB (192,0,0);}

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

innehåll h1, h2, h3, h4 {färg: RGB (128,0,0);}

#main {färg: RGB (128,0,0); }

a, a: länk, a: besökte {färg: RGB (128,0,0); }

a: svävar, a: aktiv {färg: RGB (128,0,0); }


Hur ändrar du temats logotyp?


1. steg:

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

2nd Steg

Erstatt logo.png-filen med den nya logofilen med storleken 43x30

...

#header> h1 {

               bakgrund: url(../images/logo.png) ingen återställning 10px 20%;

               stoppning: 5px 60px; /* Endre detta for å sette ditt eget logo */

}

Den ultimata Redmine-oppgraderingen? Enkel.

Få alla kraftiga verktyg för perfekt projektplanering, -styrning och -kontroll i en programvara.

Prova Easy Redmine i en 30-dagers gratis provperiod

Fullständig funktionalitet, SSL-skydd, daglig säkerhetskopiering, och din geografiska plats