Hoe maak je een aangepast Redmine-thema.

Het voordeel van een aangepast thema is dat het uniek is en het ontwerp precies is zoals je het wilt (dit voordeel is niet beschikbaar bij de meeste standaardthema's). Je hebt de flexibiliteit om een aangepast thema op elke gewenste manier te ontwerpen. Hoewel het maken van een aangepast thema meer moeite kan kosten in vergelijking met het gebruik van een standaardthema, zijn de resultaten absoluut de moeite waard. Lees verder om te leren hoe je een aangepast Redmine-thema kunt maken.

Creëren van een nieuw Redmine-thema

Redmine biedt fundamentele ondersteuning voor thema's. Deze thema's kunnen een paar aangepaste javascripts toevoegen en stijlbladen (application.css) overschrijven.
De eerste stap is het creëren van een nieuwe map in public/themes. De naam van de map wordt gebruikt als de naam van het thema. Bijvoorbeeld:  public /themes / my_theme.
Maak vervolgens een aangepaste application.css en sla deze op in een submap genaamd stylesheets:
Public / themes / my_theme / stylesheets / application.css
Hieronder staat een voorbeeld van een aangepast stijlblad dat slechts een paar instellingen overschrijft:
/* laad het standaard Redmine-stijlblad */
@import url(../../../stylesheets/application.css);
/* voeg een logo toe in de header */
#header {
    background: #507AAA url (../ images / logo.png) no-repeat 2px;
    padding-left: 86px;
}
/* verplaats het projectmenu naar rechts */
#main-menu {
    left: auto;
    right: 0px;
}
Het eerder genoemde voorbeeld gaat ervan uit dat je een afbeelding hebt die zich bevindt in my_theme / images / logo.png.
Je kunt dit thema (voorbeeld) downloaden als startpunt voor je eigen aangepaste Redmine-thema. Pak het thema uit in de public/themes map.

Toepassen van aangepaste Javascript

Voeg gewoon je javascript toe in javascript /theme.js en het wordt automatisch geladen op elke pagina.

Instellen van Favicon

Voeg je favicon toe in de favicon map en het wordt automatisch geladen in plaats van de standaard favicon op elke pagina. De naam van het favicon-bestand kan alles zijn. (In het geval dat je het niet weet, is een favicon een klein 16x16 pixel icoon dat dient voor de branding van je website. Het primaire doel is om bezoekers te helpen je pagina gemakkelijker te vinden wanneer ze meerdere tabbladen open hebben).

Toepassen van het aangepaste thema

• Stap 1:

De eerste stap is het downloaden van een nieuw thema.

• Stap 2:

Pak het thema uit in ../public/themes/. Het resultaat hiervan zou een map-pad naar application.css zijn, zoals

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

• Stap 3:

Ga naar Beheer -> Instellingen en selecteer het thema dat je zojuist hebt gemaakt uit de "Thema"-lijst (keuzelijst). Sla vervolgens je instellingen op.
Op dit punt zou Redmine nu moeten worden weergegeven met je aangepaste thema.

Als je gebruik maakt van Redmine < 1.1.0, moet je mogelijk de toepassing opnieuw starten zodat deze verschijnt in de beschikbare themalijst.

Structuur van het thema's directory

Een thema bestaat uit deze bestanden:

• javascripts/theme.js (optioneel): aangepaste JavaScript voor het thema
• favicon / <favicon-bestand> (optioneel): favicon voor het Redmine-thema
• stylesheets / application.css (noodzakelijk): CSS (Cascading Style Sheets) voor het thema

Dit wordt hieronder gedemonstreerd:
public/
  +- themes/
       +- <themanaam>/
            |
            +- favicon/
            |    +- <favicon-bestand> (bijv. favicon.ico, favicon.png)
            |
            +- javascripts/
            |    +- theme.js
            |
            +- stylesheets/
                 +- application.css

Een Redmine-thema maken door het standaardthema te gebruiken

Je kunt ook een Redmine-thema maken door de kleuren in het CSS-bestand van het standaardthema te veranderen.

Stel dat je alles van een blauw thema naar een rood thema wilt veranderen. Dit kun je doen met de onderstaande CSS.

1. sh# cd / pad / naar / redmine
2. sh# mkdir -p public / themes / redtheme / stylesheets
3. sh# vi public / themes / redtheme / stylesheets / application.css (codering wordt hieronder weergegeven)
4. Ga naar de beheerinstellingen en selecteer vervolgens redtheme

/* laad de standaard Redmine stylesheet */

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

Hoe verander je het logo van het thema?

2^e Stap

Vervang het bestand logo.png door het nieuwe logobestand met een grootte van 43x30

...

#header > h1 {

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

               padding: 5px 60px; /* Pas dit aan om uw eigen logo in te stellen */

}