Πώς να δημιουργήσετε ένα προσαρμοσμένο θέμα Redmine

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

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

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

Προσθήκη προσαρμοσμένου Javascript

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

Ορισμός Favicon

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

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

• Βήμα

  Δομή Καταλόγου Θεμάτων

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

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

  Αυτό αποδεικνύεται παρακάτω:
  public/
    +- themes/
         +- <όνομα θέματος>/
              |
              +- favicon/
              |    +- <favicon αρχείο> (π.χ. favicon.ico, favicon.png)
              |
              +- javascripts/
              |    +- theme.js
              |
              +- stylesheets/
                   +- application.css
  

  Δημιουργία Θέματος Redmine με Χρήση Προεπιλεγμένου Θέματος

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

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

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

  /* φόρτωση του προεπιλεγμένου αρχείου στυλ του Redmine */

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

  #top-menu {background: RGB(128,0,0);}

  #header {background-color:RGB(192,0,0);}

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

  content h1, h2, h3, h4 {color:RGB(128,0,0);}

  #main { color:RGB(128,0,0); }

  a, a:link, a:visited{ color:RGB(128,0,0); }

  a:hover, a:active{ color:RGB(128,0,0); }

  
  

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

  
  

  1^ο Βήμα:

  Τοποθετήστε το αρχείο λογότυπου στο @./ public / themes/ redminecrm / images@

  
  

  2^ος Βήμα

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

  ...

  #header > h1 {

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

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

  }