Tutoriel de création de son propre thème personnalisé

Redmine permet la création de thème. Les thèmes peuvent suplanter les feuilles de styles (application.css) et utiliser du javascript.

Créer un nouveau thème

Créez un répertoire dans public/themes. Le nom du répertoire sera également le nom du thème.

Example:

public/themes/mon_theme

Créez votre propre application.css et enregistrez le dans le sous-répertoire nommé stylesheets:

public/themes/mon-theme/stylesheets/application.css

Voici un exemple de feuille de style qui suplante quelques élements de la feuille de style par défaut :

/* charge la feuille de style par défaut de Redmine */
@import url(../../../stylesheets/application.css);

/* ajoute un logo dans le header */
#header {
    background: #507AAA url(../images/logo.png) no-repeat 2px;
    padding-left: 86px;
}

/* bascule le menu Projet sur la droite */
#main-menu { 
    left: auto;
    right: 0px;
}

Cet exemple suppose que vous avez une image dans mon-theme/images/logo.png

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.

Ajouter du javascript

Mettez simplement votre javascript dans javascripts/theme.js et il sera automatiquement chargé à chaque page (Redmine >= 1.1.0 uniquement).

Appliquer votre nouveau thème

Allez dans "Administration -> Configuration -> Affichage" et sélectionnez votre tou nouveau thème dans la liste déroulante "Thème". Sauvegardez votre configuration.
Redmine devrait maintenant s'afficher avec votre nouveau thème.

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".

AG-2.zip (129 KB) Thomas Godard, 2013-07-25 17:38

sample_theme.tar.gz (5.98 KB) Thomas Godard, 2013-07-25 17:38