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

6/3/2020
6 minuter
Lukáš Beňa.

Redmine, tercihlerinize uygun bir tema uygulamanız için hızlı ve kolay bir yönetim yoluna sahiptir. Mevcut birkaç varsayılan tema mevcuttur, bazıları daha minimalistisk iken diğerleri daha canlıdır ve eğer bu seçeneklerden hiçbiri storlek hitap etmezse, kendi özel Redmine temasınızı du kan skapa.

Özel bir tema avantajı, benzersiz olması ve tasarımının tam olarak istediğiniz gibi olmasıdır (bu fayda çoğu varsayılan tema ile mevcut değildir). Özel bir tema istediğiniz gibi tasarlamak için esnekliğe sahipsiniz. Ö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ı nasıl oluşturulacağını öğrenmek için okumaya devam edin.


Yeni Bir Redmine Teması Oluşturma

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, offentliga/teman klasöründe yeni bir dizin oluşturmaktır. Dizin adı tema adı olarak kullanılacaktır. Örneğin: public/themes/my_theme.
Sonra, özel application.css oluşturun och bunu stylesheets adlı bir alt klasöre kaydedin:
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 sayfasını yükle */
@import url (../../../ stilark / applikation.css);
/* başlıkta bir logo ekle */
#huvud {
    bakgrund: #507AAA url(../images/logo.png) no-repeat 2px;
    stoppning vänster: 86px;
}
/* proje menüsünü sağa taşı */
#huvudmeny {
    vänster: auto;
    höger: 0px;
}
Yukarıdaki örnek, my_theme/images/logo.png konumunda bir resme sahip olduğunuzu varsayar.
Kendi özel Redmine temasınızın başlangıç ​​noktası olarak kullanmak üzere bu temayı (örnek) indirebilirsiniz. Temayı offentliga/teman dizinine çıkarın.


Özel Javascript Eklemek

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


Favicon Ayarı

Favicon'unuzu favicon klasörüne yerleştirin ve her sayfada varsayılan yerine otomatik olarak yüklenecektir. Favicon dosyasının adı herhangi bir şey olabilir. (Bilmiyorsanız, bir favicon, web sitenizin markalamasının amacını yerine getiren 16x16 piksel boyutunda küçük bir simgedir. Temel amacı, ziyaretçilerin birden fazla sekme açtıklarında sayfanızmal ı daına kolırında sayfanızmalı daırha kolınırınaı.


Özel Temayı Uygulama

  • Steg 1:

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

  • Steg 2:

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

../public/themes/redminecrm/styleheets/application.css

  • Steg 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 noktada, Redmine artık özel temanızı kullanarak gösterilmelidir.

Eğer Redmine < 1.1.0 kullanıyorsanız, kullanılabilir temalar listsinde görünmesi için uygulamayı yeniden başlatmanız gerekebilir.


Tema Dizin Yapısı

Bir tema şu dosyalardan oluşur:

  • 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 (Cascading Style Sheets)

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


offentlig/
  + - teman /
       +- /
            |
            + - favicon /
            | +- (örneğin favicon.ico, favicon.png)
            |
            + - javascripts /
            | + - theme.js
            |
            + - stilark /
                 + - applikation.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 istiyorsunuz. Bunun için aşağıdaki CSS'i kullanabilirsiniz.

  1. sh # cd / path / to / redmine
  2. sh # mkdir -p public / teman / redtheme / stilark
  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 redtheme'i seçin

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

@import url (../../../ stilark / applikation.css);

# toppmeny {bakgrund: RGB (128,0,0);}

#header {bakgrundsfärg: RGB (192,0,0);}

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

innehåll h1, h2, h3, h4 {färg: RGB (128,0,0);}

#main {färg: RGB (128,0,0); }

a, a: länk, a: besökte {färg: RGB (128,0,0); }

a: svävar, a: aktiv {färg: RGB (128,0,0); }


Temanın Logosunu Nasıl Değiştirirsiniz?


Steg 1:

Logo dosyasını @./ public / themes/ redminecrm / images@ klasörüne koyun


2th Mitt namn

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

...

#header> h1 {

               bakgrund: url (../bilder / logo.png) ingen upprepning 10px 20%;

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

}

Redmine yükseltmesi için en iyi seçenek? Kolay.

Mükemmel proje planlaması, yönetimi ve kontrolü için güçlü araçları tek bir yazılımda edinin.

Lätt Redmine'ı 30 gün ücretsiz deneyin

Tam özellikli, SSL korumalı, günlük yedeklemeler, bulunduğunuz konumda