Nasıl Özel Bir Redmine Teması Oluşturulur

Özel bir tema avantajı, çift olması ve tasarımının tam olarak istediğiniz gibi varlığı (bu faydanın çoğu varsayılan tema ile mevcut değildir). Özel bir tema istediğiniz gibi tasarlamak için esnekliğe yarar. Özel bir tema oluşturmak, varsayılan bir tema kullanmaktan daha fazla çaba gerektirebilir, ancak sonuçlar kesinlikle buna değer. Özel bir Redmine temasının nasıl oluşturulacağını öğrenmek için okumayı sürdürün.

Yeni Bir Redmine Teması Oluşturma

Redmine temaları için temel destek sağlar. Bu temaların birkaç özel javascript seçeneği ve stil sayfalarını (application.css) geçersiz kılabilir.
İlk adım, public/themes bölümlerinde yeni bir dizin oluşturmaktır. Dizinin adı tema adı olarak kullanılacaktır. Örneğin: genel/temalar/my_theme.
Daha sonra, özel application.css bileşimi ve bu stil sayfalarının adı verilen bir alt klasöre kaydedilmesi:
Public/themes/my_theme/stylesheets/application.css
Aşağıdaki örnek, yalnızca birkaç ayarı geçersiz kılan özel bir stil sayfasıdır:
/* varsayılan Redmine stil yükler yükler */
@import url (../../../ stil sayfaları / application.css);
/* başlıkta bir logo ekle */
#başlık {
    arka plan: #507AAA url(../images/logo.png) tekrarlanmayan 2px;
    dolgu sol: 86 piksel;
}
/* projenin sağ tarafa taşınması */
#ana menü {
    sol: otomatik;
    sağa: 0px;
}
Yukarıdaki kopyanın, my_theme/images/logo.png konumundaki bir resme sahip olduğunu varsayarsınız.
Kendi özel Redmine temasınızın başlangıç ​​noktası olarak kullanmak üzere bu temayı (örnek) indirebilirsiniz. Temayı public/themes dizinine ayırın.

Özel Javascript Eklemek

Sadece javascriptinizi javascript/theme.js içine ekleyin ve her sayfa otomatik olarak yüklenecektir.

Favicon Ayarı

Favicon'unuzu favicon bileşenlerine ve her sayfada varsayılan yerine otomatik olarak yüklenecektir. Favicon kopyalarının adı herhangi bir şey olabilir. (Bilmiyorsanız, bir favicon, web sitenizi markalamanızın amacını yerine bir araya getirerek 16x16 piksel piksellik küçük bir simgedir. Temel amaç, yönetimin birden fazla sekmede açıldıklarında sayfanızı daha kolay bulmalarınıza yardımcı olmaktır).

Özel Temayı Uygulama

• 1. Adım:

Yeni bir tema indirmek için ilk adımı atın.

• Adım 2:

Temayı ../public/themes/ dizinden çıkarın. Bu durumda, application.css için bir dizin yolu oluşturacaktır:

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

• Adım 3:

Yönetim -> Ayarlar bölümüne gidin ve "Tema" listesinden (açılır menü) yeni oluşturduğunuz temayı seçin. Bundan sonra ayarlarınızı kaydedin.
Bu konumda, Redmine artık özel temanızı kullanarak gösterilmelidir.

Redmine < 1.1.0 kullanıyorsanız, kullanılabilir temalar listesi için uygulamayı yeniden başlatmanız mümkündür.

Tema Dizin Yapısı

Bir tema şu dosyalardan oluşur:

• javascripts/theme.js (bu köprüye bağlıdır): tema için özelleştirilmiş JavaScript
• site simgesi / (bu elastik bağlıdır): Redmine teması için favicon
• stylesheets / application.css (bu gereklidir): tema için CSS (Cascading Style Sheets)

Aşağıda gösterildiği gibi:

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

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

Ayrıca varsayılan temanın CSS dosyasındaki renkleri değiştirerek bir Redmine teması oluşturabilirsiniz.

Mesela, her şeyi mavi bir temadan kırmızı bir tema yapmak. Bunun için aşağıdaki CSS'i kullanabilirsiniz.

1. sh # cd / yol / to / redmine
2. sh # mkdir -p public / temalar / redtheme / stil sayfaları
3. sh# vi public / theme / redtheme / stylesheets / application.css (kodlama aşağıdadır)
4. Yönetici ayarlarına gidin ve ardından redtheme'i seçin

/* varsayılan Redmine stil yükler yükler */

@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 Logosunu Nasıl Değiştirirsiniz?

1.Adım:

Logolarının @./ public / theme/ redminecrm / Images@ bölümlerine koyun

2^ci adım

logo.png sonuçları 43x30 periyotta yeni logo dosyasıyla elde edildi

...

#header> h1 {

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

               dolgu: 5 piksel 60 piksel; /* Kendi logonuzu ayarlamak için bunu yapabilirsiniz */

}