Cách tạo một giao diện Redmine tùy chỉnh

Το πλεονέκτημα ενός προσαρμοσμένου θέματος είναι ότι είναι μοναδικό και ο σχεδιασμός του είναι ακριβώς όπως τον θέλετε (αυτό το πλεονέκτημα δεν είναι διαθέσιμο στα περισσότερα προεπιλεγμένα θέματα). Έχετε την ευελιξία να σχεδιάσετε ένα προσαρμοσμένο θέμα με όποιον τρόπο θέλετε. Αν και η δημιουργία ενός προσαρμοσμένου θέματος μπορεί να απαιτεί περισσότερη προσπάθεια σε αντίθεση με τη χρήση ενός προεπιλεγμένου θέματος, τα αποτελέσματα αξίζουν τον κόπο. Διαβάστε παρακάτω για να μάθετε πώς να δημιουργείτε ένα προσαρμοσμένο θέμα Redmine.

Δημιουργία νέου θέματος Redmine

Το Redmine παρέχει θεμελιώδη υποστήριξη για θέματα. Αυτά τα θέματα μπορούν να προσθέσουν μερικά προσαρμοσμένα javascript και να παρακάμψουν τα φύλλα στυλ (application.css).
Το πρώτο βήμα είναι να δημιουργήσετε έναν νέο κατάλογο στο κοινό / θέματα. Το όνομα του καταλόγου θα χρησιμοποιηθεί ως το όνομα του θέματος. Για παράδειγμα: δημόσια / θέματα / my_theme.
Στη συνέχεια, δημιουργήστε προσαρμοσμένο application.css και αποθηκεύστε το σε έναν υποφάκελο που ονομάζεται στιλ φύλλων:
Δημόσιο / θέματα / my_theme / stylesheets / application.css
Το παρακάτω είναι ένα παράδειγμα προσαρμοσμένου φύλλου στυλ που παρακάμπτει μόνο μερικές ρυθμίσεις:
/ * φορτώστε το προεπιλεγμένο φύλλο στυλ Redmine * /
@import url (../../../ stylesheets / application.css);
/ * προσθέστε ένα λογότυπο στην κεφαλίδα * /
# επικεφαλής {
    φόντο: # 507AAA url (../ images / logo.png) no-repeat 2px;
    πληκτρολόγηση αριστερά: 86px;
}
/ * μετακινήστε το μενού έργου προς τα δεξιά * /
#κυρίως μενού {
    αριστερά: auto;
    δεξιά: 0px;
}
Το προαναφερθέν παράδειγμα κάνει την παραδοχή ότι έχετε μια εικόνα που βρίσκεται στο my_theme / images / logo.png.
Μπορείτε να κατεβάσετε αυτό το θέμα (δείγμα) ως αφετηρία για το δικό σας προσαρμοσμένο θέμα Redmine. Εξαγάγετε το θέμα στον κατάλογο δημόσιων / θεμάτων.

Προσθήκη Custom Javascript

Απλώς συμπεριλάβετε το javascript σας στο javascript /theme.js και θα φορτώνεται αυτόματα σε κάθε σελίδα.

Ρύθμιση Favicon

Εισαγάγετε το favicon σας στο φάκελο favicon και θα φορτωθεί αυτόματα και όχι το προεπιλεγμένο σε κάθε σελίδα. Το όνομα του αρχείου favicon μπορεί να είναι οτιδήποτε. (Σε περίπτωση που δεν το γνωρίζετε, το favicon είναι ένα μικροσκοπικό εικονίδιο 16×16 pixel που εξυπηρετεί τον σκοπό της επωνυμίας του ιστότοπού σας. Ο πρωταρχικός του στόχος είναι να βοηθήσει τους επισκέπτες να εντοπίζουν τη σελίδα σας ευκολότερα όταν έχουν πολλές ανοιχτές καρτέλες).

Εφαρμογή του προσαρμοσμένου θέματος

• Βήμα 1:

Το πρώτο βήμα είναι να κατεβάσετε ένα νέο θέμα.

• Βήμα 2:

Αποσυμπιέστε το θέμα σε ../public/themes/. Το αποτέλεσμα αυτού θα ήταν μια διαδρομή καταλόγου για το application.css όπως

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

• Βήμα 3:

Μεταβείτε στην επιλογή Διαχείριση -> Ρυθμίσεις και από τη λίστα "Θέμα" (αναπτυσσόμενη λίστα), επιλέξτε το θέμα που έχετε δημιουργήσει πρόσφατα. Μετά από αυτό, αποθηκεύστε τις ρυθμίσεις σας.
Σε αυτό το σημείο, το Redmine θα πρέπει τώρα να εμφανίζεται χρησιμοποιώντας το προσαρμοσμένο θέμα σας.

Εάν χρησιμοποιείτε το Redmine <1.1.0, ίσως χρειαστεί να κάνετε επανεκκίνηση της εφαρμογής έτσι ώστε να εμφανίζεται στη λίστα διαθέσιμων θεμάτων.

Δομή καταλόγου θεμάτων

Ένα θέμα περιλαμβάνει αυτά τα αρχεία:

• javascripts / theme.js (αυτό είναι προαιρετικό): προσαρμοσμένη JavaScript για το θέμα
• favicon / (αυτό είναι προαιρετικό): favicon για το θέμα Redmine
• stylesheets / application.css (αυτό είναι απαραίτητο): CSS (Cascading Style Sheets) για το θέμα

Αυτό φαίνεται παρακάτω:
δημόσιο/
  + - θέματα /
       + - /
            |
            + - favicon /
            | + - (π.χ. favicon.ico, favicon.png)
            |
            + - javascripts /
            | + - theme.js
            |
            + - φύλλα στυλ /
                 + - application.css

Δημιουργία θέματος Redmine χρησιμοποιώντας το προεπιλεγμένο θέμα

Μπορείτε επίσης να δημιουργήσετε ένα θέμα Redmine αλλάζοντας τα χρώματα στο αρχείο CSS του προεπιλεγμένου θέματος.

Ας πούμε ότι θέλετε να αλλάξετε τα πάντα από ένα μπλε θέμα σε ένα κόκκινο. Μπορείτε να το κάνετε με το CSS παρακάτω.

1. sh # cd / path / to / redmine
2. sh # mkdir -p public / θέματα / redtheme / stylesheets
3. sh # vi public / θέματα / redtheme / stylesheets / application.css (η κωδικοποίηση φαίνεται παρακάτω)
4. Μεταβείτε στις ρυθμίσεις διαχειριστή και, στη συνέχεια, επιλέξτε redtheme

/ * φορτώστε το προεπιλεγμένο φύλλο στυλ Redmine * /

@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); }

Πώς να αλλάξετε το λογότυπο του θέματος;

1^st Βήμα:

Βάλτε το αρχείο λογότυπου στο @. / Public / θέματα / redminecrm / images @

2^nd Βήμα

Αντικαταστήστε το αρχείο logo.png με το νέο αρχείο λογότυπου με μέγεθος 43x30

...

#header> h1 {

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

               επένδυση: 5px 60px; / * Τροποποιήστε το για να ορίσετε το δικό σας λογότυπο * /

}