如何创建自定义的Redmine主题

10/22/2023
דקות 6
卢卡什·贝尼

Redmine带有一种快速简便的管理方式,让您可以应用适合您喜好的帻题。一些默认主题极简主义的,其他一些则更加活力四溢,如果这些选项都不符合您的口味,您还可以创建您自己的定制Redmine主题.

היתרון של ערכת נושא מותאמת אישית הוא בכך שהוא ייחודי, והעיצוב שלו הוא בדיוק איך שאתה רוצה אותו (הטבה הזו לא זמינה ברוב ערכות נושא ברירת המחדל). יש לך את הגמישות לעצב ערכת נושא מותאמת אישית בכל דרך שתרצה. למרות שיצירת ערכת נושא מותאמת אישית עשויה לדרוש מאמץ רב יותר לעומת שימוש בערכת נושא המוגדרת כברירת מחדל, התוצאות בהחלט שוות את זה. המשך לקרוא כדי ללמוד כיצד ליצור ערכת נושא Redmine מותאמת אישית.


יצירת נושא Redmine חדש

Redmine מספק תמיכה בסיסית לנושאים. ערכות נושא אלה יכולות להוסיף כמה ג'אווה סקריפט בהתאמה אישית ולבטל את גיליונות הסגנון (application.css).
הצעד הראשון הוא ליצור ספריה חדשה בציבור / נושאים. שם הספרייה ישמש כשם העיצוב. לדוגמא: פומבי / נושאים / my_theme.
לאחר מכן, צור application.css מותאם אישית ושמור זאת בתיקיית משנה בשם גליונות סגנון:
ציבורי / נושאים / my_theme / גיליונות סגנונות / application.css
להלן דוגמה לגליון סגנונות מותאם אישית אשר מבטל רק כמה הגדרות:
/ * טען את גיליון הסגנון Redmine המוגדר כברירת מחדל * /
@ ייבוא ​​url (../../../ סגנונות / יישום.css);
/ * הוסף לוגו בכותרת * /
#header {
    רקע: # 507AAA url (../ images / logo.png) ללא חזרה 2px;
    ריפוד שמאל: 86 פיקסלים;
}
/ * העבר את תפריט הפרויקט ימינה * /
#תפריט ראשי {
    משמאל: אוטומטי;
    משמאל: 0px;
}
הדוגמה הנ"ל מעלה את ההנחה שיש לך תמונה שנמצאת ב- my_theme / images / logo.png.
באפשרותך להוריד נושא זה (דוגמה) כנקודת התחלה עבור ערכת Redmine המותאמת אישית שלך. חלץ את הנושא בספריית הציבור / ערכות הנושא.


תוספת של Javascript מותאם אישית

כלול רק את javascript שלך ב- javascript /theme.js והוא ייטען בכל עמוד באופן אוטומטי.


הגדרת Favicon

הכנס את ה-favicon שלך לתיקיית favicon, והוא ייטען אוטומטית ולא ברירת המחדל בכל עמוד. השם של קובץ ה-favicon יכול להיות כל דבר. (במקרה שאינך יודע, favicon הוא סמל זעיר בגודל 16×16 פיקסלים המשרת את מטרת המיתוג של האתר שלך. המטרה העיקרית שלו היא לסייע למבקרים לאתר את הדף שלך בקלות רבה יותר כאשר יש להם מספר לשוניות פתוחות).


החלת הנושא המותאם אישית

  • שלב 1:

השלב הראשון הוא להוריד נושא חדש.

  • שלב 2:

פתח את ערכת הנושא ל- ../public/themes/. התוצאה של זה תהיה נתיב ספריות ל- application.css כגון

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

  • שלב 3:

עבור אל ניהול -> הגדרות ומרשימת "ערכת נושא" (רשימה נפתחת) בחר את הנושא שיצרת לאחרונה. לאחר מכן, שמור את ההגדרות שלך.
בשלב זה, Redmine כעת אמור להיות מוצג באמצעות הנושא המותאם אישית שלך.

אם אתה משתמש ב- Redmine <1.1.0, ייתכן שיהיה עליך להפעיל מחדש את היישום כך שהוא יופיע ברשימת הנושאים הזמינים.


מבנה מדריך התמות

נושא מורכב מהקבצים הבאים:

  • javascripts / theme.js (זה לא חובה): JavaScript מותאם אישית לנושא
  • favicon / (זה אופציונלי): favicon לנושא Redmine
  • גיליונות סגנון / application.css (זה הכרחי): CSS (גליונות סגנון מדורגים) לנושא

זה מודגם להלן:
ציבורי /
  + - ערכות נושא /
       + - /
            |
            + - favicon /
            | + - (למשל favicon.ico, favicon.png)
            |
            + - javascripts /
            | + - theme.js
            |
            + - גיליונות סגנונות /
                 + - יישום. css


יצירת נושא Redmine באמצעות נושא ברירת המחדל

ניתן גם ליצור ערכת נושא Redmine על ידי שינוי הצבעים בקובץ CSS של ערכת ברירת המחדל.

נניח שאתה רוצה לשנות הכל מנושא כחול לנושא אדום. אתה יכול לעשות זאת באמצעות CSS שלהלן.

  1. sh # cd / path / to / redmine
  2. sh # mkdir -p ציבורי / נושאים / redtheme / גיליונות סגנונות
  3. sh # vi public / themes / redtheme / stylesheets / application.css (קידוד מוצג למטה)
  4. עבור אל הגדרות מנהל המערכת ובחר redtheme

/ * טען את גיליון הסגנון Redmine המוגדר כברירת מחדל * /

@ ייבוא ​​url (../../../ סגנונות / יישום.css);

# התפריט העליון {רקע: RGB (128,0,0);}

#header {צבע רקע: RGB (192,0,0);}

# פרויקטים-אינדקס ul.projects div.root a.project {color: RGB (128,0,0); }

תוכן h1, h2, h3, h4 {צבע: RGB (128,0,0);}

#main {צבע: RGB (128,0,0); }

א, קישור: א, ביקרו {color: RGB (128,0,0); }

א: רחף, א: פעיל {צבע: RGB (128,0,0); }


כיצד לשנות את הלוגו של הנושא?


1st שלב:

שים קובץ לוגו ל- @. / Public / נושאים / redminecrm / images @


2nd שלב

החלף את קובץ logo.png עם קובץ הלוגו החדש בגודל 43x30

...

#header> h1 {

               רקע: url (../ images / logo.png) ללא חזרה 10px 20%;

               ריפוד: 5px 60px; / * שנה זאת כדי להגדיר לוגו משלך * /

}

最终的Redmine升级?轻松搞定.

在一个软件中获得完美的项目规划、管理和控制的强大工具。

尝试Easy Redmine 30天免费试用

完整功能,SSL 保护,每日备份,在您的地理位置