Cum să creați un temă Redmine personalizată.

Avantajul unui temă personalizată este că aceasta este unică, iar designul său este exact cum doriți (acest beneficiu nu este disponibil în majoritatea temelor implicite). Aveți flexibilitatea de a proiecta o temă personalizată în orice fel doriți. Deși crearea unei teme personalizate poate necesita mai mult efort decât utilizarea uneia implicite, rezultatele merită cu totul. Continuați să citiți pentru a afla cum să creați o temă Redmine personalizată. Crearea unei noi teme Redmine Redmine oferă suport fundamental pentru teme. Aceste teme pot adăuga câteva javascript personalizate și pot suprascrie foile de stil (application.css). Primul pas este de a crea un director nou în public/themes. Numele directorului va fi utilizat ca numele temei. De exemplu: public/themes/my_theme. Apoi, creați application.css personalizat și salvați-l într-un subfolder numit stylesheets: Public/themes/my_theme/stylesheets/application.css Următorul exemplu este un stylesheet personalizat care suprascrie doar câteva setări: /* încarcă stylesheet-ul implicit Redmine */ @import url(../../../stylesheets/application.css); /* adaugă un logo în antet */ #header { background: #507AAA url(../images/logo.png) no-repeat 2px; padding-left: 86px; } /* mută meniul proiectului spre dreapta */ #main-menu { left: auto; right: 0px; } Exemplul menționat presupune că aveți o imagine care se află în my_theme/images/logo.png. Puteți descărca această temă (exemplu) ca punct de pornire pentru propria temă Redmine personalizată. Extrageți tema în directorul public/themes. Adăugarea Javascript personalizat Trebuie doar să includeți javascript-ul dvs. în javascript/theme.js și acesta va fi încărcat automat pe fiecare pagină. Setarea Favicon Introduceți favicon-ul în folderul favicon și acesta va fi încărcat automat în locul celui implicit pe fiecare pagină. Numele fișierului favicon poate fi orice. (În cazul în care nu știți, un favicon este un mic icon de 16x16 pixeli care servește scopului de branding al site-ului dvs. Scopul său principal este de a ajuta vizitatorii să găsească mai ușor pagina dvs. atunci când au mai multe file deschise). Aplicarea temei personalizate Pasul 1: Descărcați o temă nouă. Pasul 2: Dezarhivați tema în ../public/themes/. Rezultatul acestui lucru ar fi un director către application.css, cum ar fi ../public/themes/redminecrm/stylesheets/application.css. Pasul 3: Accesați Administrare -> Setări și din lista "Temă" (listă derulantă), selectați tema pe care ați creat-o recent. După aceasta, salvați setările. În acest moment, Redmine ar trebui să fie afișat folosind tema personalizată. Dacă utilizați Redmine < 1.1.0, este posibil să trebuie să reporniți aplicația pentru a apărea în lista de teme disponibile.

Structura de directoare a temelor

O temă este formată din aceste fișiere:

• javascripts/theme.js (opțional): JavaScript personalizat pentru tema
• favicon / <favicon file> (opțional): favicon pentru tema Redmine
• stylesheets / application.css (necesar): CSS (Cascading Style Sheets) pentru tema

Acest lucru este demonstrat mai jos:
public/
  +- themes/
       +- <nume temă>/
            |
            +- favicon/
            |    +- <favicon file> (de exemplu, favicon.ico, favicon.png)
            |
            +- javascripts/
            |    +- theme.js
            |
            +- stylesheets/
                 +- application.css

Cum să creați o temă Redmine folosind tema implicită

Puteți crea, de asemenea, o temă Redmine schimbând culorile în fișierul CSS al temei implicite.

Să spunem că doriți să schimbați totul de la o temă albastră la una roșie. Puteți face acest lucru cu CSS-ul de mai jos.

1. sh# cd / path / to / redmine
2. sh# mkdir -p public / themes / redtheme / stylesheets
3. sh# vi public / themes / redtheme / stylesheets / application.css (codul este prezentat mai jos)
4. Accesați setările de administrare și selectați redtheme

/* încărcați foaia de stil implicită 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); }

Cum să schimbați logo-ul temei?

Primul pas:

Puneți fișierul de logo în @./ public / themes/ redminecrm / images@

Al doilea pas

Înlocuiți fișierul logo.png cu noul fișier de logo cu dimensiunea de 43x30

...

#header > h1 {

               background: url(../images/logo.png) no-repeat 10px 20%;

               padding: 5px 60px; /* Modificați acest lucru pentru a seta propriul logo */

}