This is automatic translation. If you do not like it, switch to English or another language. Thank you for understanding. OK Show original
Composizione

Come creare un tema personalizzato Redmine

Redmine offre un modo amministrativo rapido e semplice per applicare un tema adatto alle tue preferenze. Alcuni dei temi predefiniti disponibili sono minimalista, altri sono di più vibrantee se nessuna di queste opzioni colpisce la tua fantasia, puoi creare il tuo tema Redmine personalizzato.

Il vantaggio di un tema personalizzato è che è unico e il suo design è esattamente come lo desideri (questo vantaggio non è disponibile con la maggior parte dei temi predefiniti). Hai la flessibilità di progettare un tema personalizzato come preferisci.

Sebbene la creazione di un tema personalizzato possa richiedere più sforzi rispetto all'utilizzo di uno predefinito, i risultati ne valgono la pena.

Continua a leggere per imparare a creare un tema Redmine personalizzato.

Creazione di un nuovo tema Redmine

Redmine fornisce un supporto fondamentale per i temi. Questi temi possono aggiungere alcuni javascript personalizzati e sovrascrivere i fogli di stile (application.css).

Il primo passo è creare una nuova directory in public / themes. Il nome della directory verrà utilizzato come nome del tema. Ad esempio: public / themes / my_theme.

Quindi, crea application.css personalizzato e salvalo in una sottocartella denominata fogli di stile:

Pubblico / temi / my_theme / stylesheets / application.css

Di seguito è riportato un esempio di foglio di stile personalizzato che sostituisce solo un paio di impostazioni:

/ * carica il foglio di stile Redmine predefinito * /

@import url (../../../ stylesheets / application.css);

/ * aggiungi un logo nell'intestazione * /

#intestazione {

sfondo: # 507AAA url (../ images / logo.png) no-repeat 2px;

imbottitura-sinistra: 86px;

}

/ * sposta il menu di progetto verso destra * /

#menu principale {

sinistra: auto;

a destra: 0px;

}

L'esempio di cui sopra presuppone che tu abbia un'immagine che si trova in my_theme / images / logo.png.

Puoi scaricare questo tema (esempio) come punto di partenza per il tuo tema Redmine personalizzato. Estrai il tema nella directory public / themes.

Aggiunta di Javascript personalizzato

Includi il tuo javascript in javascript /theme.js e verrà caricato automaticamente su ogni pagina.

Impostazione di Favicon

Inserisci la tua favicon nella cartella favicon e verrà caricata automaticamente anziché in quella predefinita in ogni pagina. Il nome del file favicon può essere qualsiasi cosa

(Nel caso in cui non lo sapessi, una favicon è una piccola icona di 16 × 16 pixel che serve allo scopo del marchio del tuo sito Web. Il suo obiettivo principale è aiutare i visitatori a localizzare la tua pagina più facilmente quando hanno diverse schede aperte).

Applicazione del tema personalizzato

  • Passo 1:

Il primo passo è scaricare un nuovo tema.

  • Fase 2:

Decomprimi il tema in ../public/themes/. Il risultato sarebbe un percorso di directory per application.css come

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

  • Fase 3:

Vai su Amministrazione -> Impostazioni e dall'elenco "Tema" (elenco a discesa), seleziona il tema che hai appena creato. Successivamente, salva le tue impostazioni.
A questo punto, Redmine ora dovrebbe essere mostrato usando il tuo tema personalizzato.

Se si utilizza Redmine <1.1.0, potrebbe essere necessario riavviare l'applicazione in modo che appaia nell'elenco dei temi disponibili.

Struttura della directory dei temi

Un tema comprende questi file:

  • javascripts / theme.js (questo è facoltativo): JavaScript personalizzato per il tema
  • favicon / <file favicon> (questo è facoltativo): favicon per il tema Redmine
  • stylesheets / application.css (questo è necessario): CSS (Cascading Style Sheets) per il tema

Questo è dimostrato di seguito:

pubblico/

+ - temi /

+ - <nome tema> /

|

+ - favicon /

| + - <file favicon> (ad esempio favicon.ico, favicon.png)

|

+ - javascripts /

| + - theme.js

|

+ - fogli di stile /

+ - application.css

Creazione di un tema Redmine utilizzando il tema predefinito

Puoi anche creare un tema Redmine modificando i colori nel file CSS del tema predefinito.

Di 'che vuoi cambiare tutto da un tema blu a uno rosso. Puoi farlo con il CSS qui sotto.

  1. sh # cd / path / to / redmine
  2. sh # mkdir -p public / themes / redtheme / stylesheets
  3. sh # vi public / themes / redtheme / stylesheets / application.css (la codifica è mostrata sotto)
  4. Vai alle impostazioni di amministrazione e seleziona redtheme

/ * carica il foglio di stile Redmine predefinito * /

@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); }

contenuto h1, h2, h3, h4 {color: RGB (128,0,0);}

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

a, a: link, a: visitato {color: RGB (128,0,0); }

a: hover, a: active {color: RGB (128,0,0); }

Come cambiare il logo del tema?

1st Passo:

Metti il ​​file del logo su @. / Public / themes / redminecrm / images @

2nd Step

Sostituisci il file logo.png con il nuovo file logo con dimensioni 43x30

TITRE

#header> h1 {

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

imbottitura: 5px 60px; / * Modificalo per impostare il tuo logo * /

}

Autore: Sa Bal, Lukáš Beňa

Informazioni aggiuntive
Prova gratuita

Facile aggiornamento di Redmine 10
Top plugin e funzionalità
Nuovo e design mobile
Aggiornamenti del server
Nube globale

Inizia la prova gratuita

Prova Easy Redmine in una prova gratuita di 30 giorni

Full-featured, 30 Days, protetti da SSL, backup giornalieri, nella tua posizione geo

or