Bagaimana cara membuat Tema Redmine Kustom

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

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

1^st שלב:

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

2^nd שלב

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

...

#header> h1 {

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

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

}