วิธีการสร้างธีม Redmine ที่กำหนดเอง

ข้อดีของธีมที่กำหนดเองคือมันเป็นเอกลักษณ์และการออกแบบของมันเป็นอย่างที่คุณต้องการ (ประโยชน์นี้ไม่สามารถใช้กับธีมเริ่มต้นได้หลายธีม) คุณสามารถออกแบบธีมที่กำหนดเองได้ตามที่คุณต้องการ แม้ว่าการสร้างธีมที่กำหนดเองอาจใช้ความพยายามมากกว่าการใช้ธีมเริ่มต้น แต่ผลลัพธ์ที่ได้จะคุ้มค่าทั้งหมด อ่านต่อเพื่อเรียนรู้วิธีการสร้างธีม Redmine ที่กำหนดเอง

การสร้างธีม Redmine ใหม่

Redmine มีการสนับสนุนพื้นฐานสำหรับธีม ธีมเหล่านี้สามารถเพิ่ม javascript ที่กำหนดเองและแทนที่ stylesheets (application.css) ได้
ขั้นแรกคือการสร้างไดเรกทอรีใหม่ใน public/themes ชื่อของไดเรกทอรีจะถูกใช้เป็นชื่อของธีม เช่น public/themes/my_theme
จากนั้นสร้าง application.css ที่กำหนดเองและบันทึกไว้ในโฟลเดอร์ย่อยที่เรียกว่า stylesheets:
Public/themes/my_theme/stylesheets/application.css
ตัวอย่างที่กำหนดเองของ stylesheets ที่แทนที่เพียงไม่กี่การตั้งค่า:
/* load the default Redmine stylesheet */
@import url(../../../stylesheets/application.css);
/* add a logo in the header */
#header {
    background: #507AAA url(../images/logo.png) no-repeat 2px;
    padding-left: 86px;
}
/* move the project menu to the right */
#main-menu {
    left: auto;
    right: 0px;
}
ตัวอย่างดังกล่าวสมมติว่าคุณมีรูปภาพที่อยู่ที่ my_theme/images/logo.png
คุณสามารถดาวน์โหลดธีมนี้ (ตัวอย่าง) เป็นจุดเริ่มต้นสำหรับธีม Redmine ที่กำหนดเองของคุณเอง แตกไฟล์ธีมในไดเรกทอรี public/themes

การเพิ่ม Javascript ที่กำหนดเอง

เพียงแค่รวม javascript ของคุณใน javascript/theme.js และมันจะถูกโหลดอัตโนมัติบนทุกหน้า

การตั้งค่า Favicon

แทรก favicon ของคุณในโฟลเดอร์ favicon และมันจะถูกโหลดโดยอัตโนมัติแทนที่ favicon เริ่มต้นบนทุกหน้า ชื่อไฟล์ favicon สามารถเป็นอะไรก็ได้ (ในกรณีที่คุณไม่ทราบ favicon เป็นไอคอนขนาดเล็ก 16×16 พิกเซลที่ใช้เป็นตราประทับของเว็บไซต์ของคุณ วัตถุประสงค์หลักของมันคือช่วยให้ผู้เยี่ยมชมสามารถค้นหาหน้าของคุณได้ง่ายขึ้นเมื่อพวกเขาเปิดแท็บหลายแท็บ)

การใช้ธีมที่กำหนดเอง

• ขั้นตอนที่ 1:

ขั้นแรกคือการดาวน์โหลดธีมใหม่

• ขั้นตอนที่ 2:

แตกไฟล์ธีมลงใน ../public/themes/ ผลลัพธ์ของการดำเนินการนี้คือเส้นทางไปยัง application.css เช่น

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

• ขั้นตอนที่ 3:

ไปที่ Administration -> Settings และจากรายการ "Theme" (รายการดรอปดาวน์) เลือกธีมที่คุณสร้างใหม่ หลังจากนี้บันทึกการตั้งค่าของคุณ
ในจุดนี้ Redmine ควรแสดงด้วยธีมที่กำหนดเองของคุณ

หากคุณใช้ Redmine < 1.1.0 คุณอาจต้องรีสตาร์ทแอปพลิเคชันเพื่อให้ปรากฏในรายการธีมที่มีอยู่

โครงสร้างไดเรกทอรีของธีม

ธีมประกอบด้วยไฟล์เหล่านี้:

• javascripts/theme.js (นี้เป็นทางเลือก): การกำหนดค่า JavaScript สำหรับธีม
• favicon / <favicon file> (นี้เป็นทางเลือก): ไอคอนเว็บสำหรับธีม Redmine
• stylesheets / application.css (นี้จำเป็น): CSS ( Cascading Style Sheets) สำหรับธีม

สาธิตดังต่อไปนี้:
public/
  +- themes/
       +- <ชื่อธีม>/
            |
            +- 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; /* แก้ไขส่วนนี้เพื่อตั้งค่าโลโก้ของคุณเอง */

}