Project

General

Profile

FrHowTo create a custom Redmine theme » History » Version 1

Thomas Godard, 2013-07-25 17:38
French translation of HowTo_create_a_custom_Redmine_theme

1 1 Thomas Godard
h1. Tutoriel de création de son propre thème personnalisé
2
3
Redmine permet la création de thème. Les thèmes peuvent suplanter les feuilles de styles (application.css) et utiliser du javascript.
4
5
h2. Créer un nouveau thème
6
7
Créez un répertoire dans @public/themes@. Le nom du répertoire sera également le nom du thème.
8
9
Example:
10
11
  public/themes/mon_theme
12
13
14
Créez votre propre @application.css@ et enregistrez le dans le sous-répertoire nommé @stylesheets@:
15
16
  public/themes/mon-theme/stylesheets/application.css
17
18
Voici un exemple de feuille de style qui suplante quelques élements de la feuille de style par défaut :
19
20
<pre><code>/* charge la feuille de style par défaut de Redmine */
21
@import url(../../../stylesheets/application.css);
22
23
/* ajoute un logo dans le header */
24
#header {
25
    background: #507AAA url(../images/logo.png) no-repeat 2px;
26
    padding-left: 86px;
27
}
28
29
/* bascule le menu Projet sur la droite */
30
#main-menu { 
31
    left: auto;
32
    right: 0px;
33
}
34
</code></pre>
35
36
Cet exemple suppose que vous avez une image dans @mon-theme/images/logo.png@
37
38
Vous pouvez télécharger ce thème comme point de départ de votre propre thème. Enregistrez le dans le répertoire @public/themes@.
39
40
h2. Ajouter du javascript
41
42
Mettez simplement votre javascript dans @javascripts/theme.js@ et il sera automatiquement chargé à chaque page (Redmine >= 1.1.0 uniquement).
43
44
h2. Appliquer votre nouveau thème
45
46
Allez dans "Administration -> Configuration -> Affichage" et sélectionnez votre tou nouveau thème dans la liste déroulante "Thème". Sauvegardez votre configuration.
47
Redmine devrait maintenant s'afficher avec votre nouveau thème.
48
49
Si vous utilisé une version de Redmine antérieure à 1.1.0, vous devrez peut-être relancer votre application afin que votre nouveau thème s'affiche dans la liste déroulante "Thème".