Hur gör du ett anpassat Redmine-tema.

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

Redmine levereras med en snabb och enkel administrativ metod om ett tema till att passa på dina preferenser tidigare. Ett par van de standaardthema's är tillgängliga, är minimalistisk, andra är mer levendig, och det finns inga av dessa alternativ du har gjort Redmine-tema på egen hand att göra.

Fördelen med ett anpassat tema är att det är unikt och designen är precis som du vill (denna fördel är inte tillgänglig för de flesta standardtema). Du har flexibilitet för ett anpassat tema på valfritt sätt att designa. Även om du kan göra ett anpassat tema mer kostnad i jämförelse med användningen av ett standardtema, är den totala kostnaden. Läs mer om hur du kan göra ett anpassat Redmine-tema.


Skapa ett nytt Redmine-tema

Redmine erbjuder grundläggande stöd för teman. Dessa teman kan läggas till ett par anpassade javaskript och stilblad (application.css) överskriva.
Det första steget är att skapa en ny karta i offentliga/teman. Namnet på kartan används som namnet på temat. Bild: offentliga /teman / mitt_tema.
Gör sedan en anpassad application.css och lägg den här på en underkarta som kallas stilmallar:
Public / teman / my_theme / stylesheets / application.css
Nedan kan du se ett exempel på en anpassad stil som bara ett par överskrivna inställningar:
/* har standard Redmine-stilblad */
@import url (../../../ stilark / applikation.css);
/* lägg en logotyp tå i rubriken */
#huvud {
    bakgrund: # 507AAA url (../ images / logo.png) no-repetera 2px;
    stoppning vänster: 86px;
}
/* placera projektmenyn till rätt */
#huvudmeny {
    vänster: auto;
    höger: 0px;
}
Det tidigare nämnda exemplet går ut på att du har en bild som finns i my_theme / images / logo.png.
Du kan ladda ner detta tema (bild) som startpunkt för din egen anpassade Redmine-thema. Paketera temat på den offentliga/temankartan.


Tillpassning av anpassad Javascript

Lägg bara till ditt javascript i javascript /theme.js och det laddas automatiskt på varje sida.


Instellen av Favicon

Lägg till din favicon-tå i favicon-kartan så laddas den automatiskt på plats av standardfavicon på varje sida. Namnet på favicon-filen kan vara allt. (I det fall du inte vet, är en favoritikon en liten 16x16 pixel ikon som behövs för varumärket på din webbplats. Det främsta målet är att besökare ska kunna hjälpa dig att hitta enklare sidor när flera flikar har öppnats).


Tillpassning av det anpassade temat

  • Steg 1:

Det första steget är att ladda ner från ett nytt tema.

  • steg 2:

Paketera temat i ../public/themes/. Resultatet av ett kartblock till application.css finns, såsom

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

  • steg 3:

Gå till Beheer -> Inställningar och välj det tema som du har skapat från "Thema"-listan (keuzelista). Därefter har du inställningar.
Redmine måste visas med ett anpassat tema.

Om du använder Redmine < 1.1.0, måste du eventuellt starta en applikation igen så att denna visas i den tillgängliga temalistan.


Struktur för temats katalog

Ett tema finns i dessa filer:

  • javascripts/theme.js (tillval): anpassad JavaScript för temat
  • favicon / (tillval): favicon för Redmine-thema
  • stylesheets / application.css (noodzakelijk): CSS (Cascading Style Sheets) för temat

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

Ett Redmine-tema görs genom att använda standardtema

Du kan också göra ett Redmine-tema genom att färga i CSS-filen för standardtema för att ändra.

Stel det är allt från ett blått tema till ett rött tema kommer att ändras. Detta kan du göra med nedanstående CSS.

  1. sh# cd / pad / naar / redmine
  2. sh # mkdir -p public / teman / redtheme / stilark
  3. sh# vi public / themes / redtheme / stylesheets / application.css (kodning visas nedan)
  4. Gå till förvaltningsinställningarna och välj sedan redtheme

/* standard Redmine stylesheet */

@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 logotypen för temat?

2e Stap

Vervang filen logo.png genom den nya logofilen med en storlek på 43x30

...

#header> h1 {

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

               stoppning: 5px 60px; /* Pass dit till om din egen logotyp i te stellen */

}

Den sista Redmine-uppgraderingen? Makkelijk.

Krijg alla kraftfulla verktyg för perfekt projektplanering, -hantering och -kontroll i en mjukvara.

Testa Easy Redmine 30 dagar gratis

Fullständiga funktioner, SSL-beveiligd, dagliga säkerhetskopieringar, på din geografiska plats