Hur man skapar ett anpassat Redmine-tema

6/3/2020
6 λεπτά
Lukáš Beňa.

Redmine kommer med ett snabbt och enkelt administrativet sätt för dig att applicera ett tema som passar dina preferenser. Några av de standardteman som finns tillgängliga är μινιμαλιστική, andra är mer livfulla, och om ingen av dessa alternativ tilltalar dig kan du skapa ditt alldeles egna anpassade Redmine-tema.

Fördelen med ett anpassat tema är att det är unikt och designen är precis som du vill ha den (denna fördel finns inte med de flesta standardteman). Du har flexibiliteten att designa ett anpassat tema på vilket sätt du vill. Även om det kan kräva mer ansträngning att skapa ett anpassat tema jämfört med att använda ett standardtema, är resultatet helt värt det. Läs vidare för att lära dig hur du skapar ett anpassat Redmine-tema.


Skapande av ett nytt Redmine-tema

Redmine ger grundläggande stöd för teman. Μπορείτε να χρησιμοποιήσετε το JavaScript και να χρησιμοποιήσετε τη νέα γλώσσα (application.css).
Första steget är att skapa en ny mapp i public/themes. Namnet på mappen kommer att användas som namnet på temat. Μέχρι exempel: public/themes/my_theme.
Sedan skapar du en anpassad application.css och sparar den i en undermapp som heter stylesheets:
Public/themes/my_theme/stylesheets/application.css
Följande är ett exempel på en anpassad stilmall som bara åsidosätter några inställningar:
/* ladda standardstilmallen för Redmine */
@import url (../../../ stylesheets / application.css);
/* lägg till en logotyp i sidhuvudet */
# επικεφαλής {
    φόντο: #507AAA url(../images/logo.png) χωρίς επανάληψη 2px;
    πληκτρολόγηση αριστερά: 86px;
}
/* flytta projektmenyn till höger */
#κυρίως μενού {
    αριστερά: auto;
    δεξιά: 0px;
}
Ovanstående exempel förutsätter att du har en bild som är placerad στο my_theme/images/logo.png.
Du kan ladda ner detta tema (exempel) som en startpunkt för ditt eget anpassade Redmine-tema. Extrahera themat i public/themes-mappen.


Συμπληρώστε το JavaScript

Συμπεριλαμβάνεται η JavaScript και το javascript/theme.js και το εμπορικό σήμα της laddas automatiskt på varje sida.


Εγκατάσταση favicon

Infoga din favicon i favicon-mappen, och den kommer att laddas automatiskt istället for standardfaviconen på varje sida. Favicon-filens namn kan vara vad som helst. (Om du inte vet det är en favicon en liten 16x16 pixlars ikon som används for att marknadsföra din webplats.


Προετοιμασία από το θέμα της μετάβασης

  • Βήμα 1:

Första steget är att ladda ner ett nytt θέμα.

  • Βήμα 2:

Packa upp themat i ../public/themes/. Resultatet av detta skulle vara en sökväg till application.css som till exempel

../public/themes/redminecrm/stylesheets/application.css

  • Βήμα 3:

Για τη διαχείριση -> Inställningar och välj temat du nyss skapat från listan "Tema" (rullgardinsmeny). Spara dina inställningar after detta.
Βεβαιωθείτε ότι έχετε λάβει θεώρηση Redmine και το θέμα.

Om du använder Redmine < 1.1.0 kan det vara nödvändigt att starta om applicationen for att den ska visas i listan över tillgängliga teman.


Struktur for temamppar

Και το καλύτερο θέμα του αρχείου:

  • javascripts/theme.js (valfritt): anpassad JavaScript για θέμα
  • favicon / (valfritt): favicon για Redmine-temat
  • φύλλα στυλ / application.css (nödvändigt): CSS (Cascading Style Sheets) για θέμα

Detta visa nedan:
δημόσιο/
  + - θέματα /
       +- /
            |
            + - favicon /
            | +- (t.ex. favicon.ico, favicon.png)
            |
            + - javascripts /
            | + - theme.js
            |
            + - φύλλα στυλ /
                 + - application.css

Hur man skapar ett Redmine-tema genom att använda standardtemat

Μπορείτε να δείτε το γονίδιο Redmine-tema att ändra färgerna and CSS-file για το πρότυπο αρχείο.

Säg att du vill ändra allt från ett blått tema till ett rött. Μπορείτε να χρησιμοποιήσετε το CSS.

  1. sh# cd /path/to/redmine
  2. sh# mkdir -p public/themes/redtheme/stylesheets
  3. sh# vi public/themes/redtheme/stylesheets/application.css (koden visas nedan)
  4. Μπορείτε να το διαχειριστείτε και το κόκκινο θέμα σεντάν

/* ladda standard-Redmine-stilmallen */

@import url (../../../ stylesheets / application.css);

# top-menu {φόντο: RGB (128,0,0);}

#header {φόντο-χρώμα: RGB (192,0,0);}

# έργα-δείκτης ul.projects div.root a.project {color: RGB (128,0,0); }

περιεχόμενο h1, h2, h3, h4 {color: RGB (128,0,0);}

# κύριο {χρώμα: RGB (128,0,0); }

a, a: link, a: επισκέφθηκε {color: RGB (128,0,0); }

a: hover, a: ενεργό {color: RGB (128,0,0); }


Hur man ändrar temats λογότυπο;


1:a steg:

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

2a Steg

Ersätt logo.png αρχείο med den nya logofilen med storleken 43x30

...

#header> h1 {

               φόντο: url (../ images / logo.png) χωρίς επανάληψη 10px 20%;

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

}

Είναι τελικά το Redmine-upgradering; Ένκελ.

Få alla kraftfulla verktyg för perfekt projektplanering, -hantering och -controll i en enda programvara.

Prova Easy Redmine και 30 dagars δωρεάν προσφορά

Fullständiga funktioner, SSL-skyddad, dagliga säkerhetskopior, και din geografiska plats