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

10/14/2023

דקות 6

Lukáš Beňa.

Redmine đi kèm với một cách quản trị nhanh chóng và dễ dàng cho bạn áp dụng một chủ đề phù hợp vởi s. Một số chủ đề בְּרִירַת מֶחדָל có sẵn là לפשט, những chủ đề khác lại מלא חיים, và nếu không có một trong những lựa chọn này làm bạn thích, bạn có thể tạo chủ đề Redmine tùy chỉnh của riêng bạn.

היתרון של ערכת נושא מותאמת אישית הוא בכך שהוא ייחודי, והעיצוב שלו הוא בדיוק איך שאתה רוצה אותו (הטבה הזו לא זמינה ברוב ערכות נושא ברירת המחדל). יש לך את הגמישות לעצב ערכת נושא מותאמת אישית בכל דרך שתרצה. למרות שיצירת ערכת נושא מותאמת אישית עשויה לדרוש מאמץ רב יותר לעומת שימוש בערכת נושא המוגדרת כברירת מחדל, התוצאות בהחלט שוות את זה. המשך לקרוא כדי ללמוד כיצד ליצור ערכת נושא 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 שלהלן.

sh # cd / path / to / redmine
sh # mkdir -p ציבורי / נושאים / redtheme / גיליונות סגנונות
sh # vi public / themes / redtheme / stylesheets / application.css (קידוד מוצג למטה)
עבור אל הגדרות מנהל המערכת ובחר 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); }

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

1^st שלב:

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

2^nd שלב

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

...

#header> h1 {

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

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

}

Phiên bản nâng cấp Redmine tối ưu nhất? Dễ Dàng.

Được trang bị tất cả các công cụ mạnh mẽ để lập kế hoạch, quản lý và kiểm soát dự duo hàng ất.

Khám phá Easy Redmine