Özel Redmine Teması Nasıl Oluşturulur

Özel bir temanın avantajı, benzersiz olması ve tasarımının tam olarak istediğiniz gibi olmasıdır (bu avantaj çoğu varsayılan temada mevcut değildir). İstediğiniz şekilde özel bir tema tasarlama esnekliğine sahipsiniz. Özel bir tema oluşturmak, varsayılan olanı kullanmaktan daha fazla çaba gerektirse de, sonuçlara kesinlikle değer. Özel bir Redmine temasının nasıl oluşturulacağını öğrenmek için okumaya devam edin.

Yeni bir Redmine Temasının oluşturulması

Redmine temalar için temel destek sağlar. Bu temalar birkaç özel javascript ekleyebilir ve stil sayfalarını (application.css) geçersiz kılabilir.
İlk adım, genel / temalar içinde yeni bir dizin oluşturmaktır. Dizinin adı temanın adı olarak kullanılacaktır. Örneğin: genel / temalar / temam.
Ardından, özel application.css oluşturun ve bunu stil sayfaları adı verilen bir alt klasöre kaydedin:
Genel / temalar / my_theme / stil sayfaları / application.css
Aşağıda, yalnızca birkaç ayarı geçersiz kılan özel bir stil sayfası örneği verilmiştir:
/ * varsayılan Redmine stil sayfasını yükle * /
@import url (../../../ stil sayfaları / application.css);
/ * başlığa logo ekle * /
#başlık {
    arka plan: # 507AAA url (../ images / logo.png) yineleme yok 2 piksel;
    dolgu sol: 86 piksel;
}
/ * proje menüsünü sağa hareket ettir *
#ana menü {
    sol: otomatik;
    sağa: 0px;
}
Yukarıda bahsedilen örnek, my_theme / images / logo.png adresinde bulunan bir resminiz olduğunu varsayar.
Bu temayı (örnek) kendi özel Redmine temanız için bir başlangıç ​​noktası olarak indirebilirsiniz. Genel / temalar dizinindeki temayı çıkarın.

Özel Javascript Eklenmesi

Javascript'inizi javascript /theme.js içine dahil etmeniz yeterlidir ve her sayfaya otomatik olarak yüklenecektir.

Favicon'u Ayarlama

Favicon'unuzu favicon klasörüne yerleştirin ve her sayfada varsayılan olandan ziyade otomatik olarak yüklenecektir. Favicon dosyasının adı herhangi bir şey olabilir. (Bilmiyorsanız favicon, web sitenizin markalaşması amacına hizmet eden 16×16 piksellik küçük bir simgedir. Birincil amacı, birkaç sekme açıkken ziyaretçilerin sayfanızı daha kolay bulmalarına yardımcı olmaktır).

Özel Temayı Uygulama

• 1 Adım:

İlk adım yeni bir tema indirmektir.

• 2. Adım:

Temayı ../public/themes/ içine açın. Bunun sonucu, application.css'ye giden bir dizin yolu olacaktır, örneğin

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

• 3. Adım:

Yönetim -> Ayarlar'a gidin ve "Tema" listesinden (açılır liste) yeni oluşturduğunuz temayı seçin. Bundan sonra ayarlarınızı kaydedin.
Bu noktada, Redmine şimdi özelleştirilmiş temanızı kullanarak gösterilmelidir.

Redmine <1.1.0 kullanıyorsanız, mevcut temalar listesinde görünmesi için uygulamayı yeniden başlatmanız gerekebilir.

Tema Dizini Yapısı

Bir tema şu dosyaları içerir:

• javascripts / theme.js (bu isteğe bağlıdır): tema için özelleştirilmiş JavaScript
• favicon / (bu isteğe bağlıdır): Redmine teması için favicon
• stylesheets / application.css (bu gereklidir): Tema için CSS (Basamaklı Stil Sayfaları)

Bu aşağıda gösterilmiştir:
halka açık/
  + - temalar /
       + - /
            |
            + - favicon /
            | + - (örneğin favicon.ico, favicon.png)
            |
            + - javascripts /
            | + - theme.js
            |
            + - stil sayfaları /
                 + - application.css

Varsayılan Temayı Kullanarak Redmine Teması Oluşturma

Varsayılan temanın CSS dosyasındaki renkleri değiştirerek bir Redmine teması da oluşturabilirsiniz.

Her şeyi mavi bir temadan kırmızı bir temaya değiştirmek istediğinizi varsayalım. Bunu aşağıdaki CSS ile yapabilirsiniz.

1. sh # cd / yol / to / redmine
2. sh # mkdir -p public / temalar / redtheme / stil sayfaları
3. sh # vi public / themes / redtheme / stylesheets / application.css (kodlama aşağıda gösterilmiştir)
4. Yönetici ayarlarına gidin ve ardından yeniden düzenlemeyi seçin

/ * varsayılan Redmine stil sayfasını yükle * /

@import url (../../../ stil sayfaları / application.css);

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

#header {arka plan rengi: RGB (192,0,0);}

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

içerik h1, h2, h3, h4 {renk: RGB (128,0,0);}

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

a, a: bağlantı, a: ziyaret {renk: RGB (128,0,0); }

a: üzerine gelin, a: etkin {renk: RGB (128,0,0); }

Temanın Logosu Nasıl Değiştirilir?

1^st Adım:

Logo dosyasını @. / Public / themes / redminecrm / images @ dizinine koyun

2^nd adım

Logo.png dosyasını 43x30 boyutunda yeni logo dosyasıyla değiştirin

...

#header> h1 {

               arka plan: url (../ images / logo.png) tekrarlanmayan 10 piksel% 20;

               dolgu: 5px 60px; / * Kendi logonuzu ayarlamak için bunu değiştirin * /

}