Introduction
L’application squirrelmail est un ensemble de frames et de tableaux aux couleurs prédéfinies. La feuille de style concerne les différentes polices et leurs tailles que l’on peut choisir. En guise d’exemple, un morceau de la frame gauche est donnée ci-dessous :
<body bgcolor="#f8f8ff" text="#1B2C68" link="#1B2C68" vlink="#1B2C68" alink="#1B2C68">
<table align="left" border="0" cellspacing="0" cellpadding="0" width="99%">
<tr>
<td align="left">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">
<font size="4"><b>Folders</b><br /></font>
<small>
<span style="white-space: nowrap;">Last Refresh:</span><br />
<span style="white-space: nowrap;">Fri, 10:15 pm</span>
</small>
<br />
<small style="white-space: nowrap;">(<a href="" target="left">Check mail</a>)</small>
</td></tr></table>
...
En l’absence de feuilles de styles, il est difficile d’intervenir sur la charte graphique du webmail. La seule possibilté est de créer un thème en agissant sur les couleurs de tableaux, des liens et des polices.
Un thème LCS
La première étape consiste à transformer un fichier de thème de squirrelmail en y insérant les couleurs du LCS. Pour mémoire, les cinq couleurs de base du LCS sont :
- Bleu foncé (#1B2C68) que l’on retrouve sur les boutons de la barre de navigation.
- Bleu pale (#F8F8FF) qui constitue la couleur de fond d’écran
- Orange (#FDB218) couleur dans le logo et le cahier de texte
- Vert (#0D6A1E) aussi dans le logo et le cahier de texte
- Violet (#9207C2) présente dans le logo et le cdt
global $color;
$color[0] = ’#dcdcdc’; // (light gray) TitleBar
$color[1] = ’#800000’; // (red)
$color[2] = ’#cc0000’; // (light red) Warning/Error Messages
$color[3] = ’#a0b8c8’; // (green-blue) Left Bar Background
$color[4] = ’#ffffff’; // (white) Normal Background
$color[5] = ’#ffffcc’; // (light yellow) Table Headers
$color[6] = ’#000000’; // (black) Text on left bar
$color[7] = ’#0000cc’; // (blue) Links
$color[8] = ’#000000’; // (black) Normal text
$color[9] = ’#ababab’; // (mid-gray) Darker version of #0
$color[10] = ’#666666’; // (dark gray) Darker version of #9
$color[11] = ’#770000’; // (dark red) Special Folders color
$color[12] = ’#ededed’; // (light gray) Alternate color for message list
$color[13] = ’#800000’; // (dark red) Color for quoted text -- > 1 quote
$color[14] = ’#ff0000’; // (red) Color for quoted text -- >> 2 or more
$color[15] = ’#002266’; // (dark blue) Unselectable folders
$color[16] = ’#ff9933’; // (orange) Highlight color
que l’on enregistre en lcs_theme.php et que l’on modifie ainsi:
global $color;
$color[0] = ’#dcdcdc’; // (light gray) TitleBar
$color[1] = ’#800000’; // (red)
$color[2] = ’#cc0000’; // (light red) Warning/Error Messages
$color[3] = ’#f8f8ff’; // (green-blue) Left Bar Background
$color[4] = ’#ffffff’; // (white) Normal Background
$color[5] = ’#E7CD9C’; // (light yellow) Table Headers
$color[6] = ’#1B2C68’; // (black) Text on left bar
$color[7] = ’#0D6A1E’; // (vert) Links
$color[8] = ’#1B2C68’; // (bleu foncé) Normal text
$color[9] = ’#FDB218’; // (orange) Darker version of #0
$color[10] = ’#666666’; // (dark gray) Darker version of #9
$color[11] = ’#0D6A1E’; // (vert) Special Folders color
$color[12] = ’#ededed’; // (light gray) Alternate color for message list
$color[13] = ’#800000’; // (dark red) Color for quoted text -- > 1 quote
$color[14] = ’#ff0000’; // (red) Color for quoted text -- >> 2 or more
$color[15] = ’#002266’; // (dark blue) Unselectable folders
$color[16] = ’#FDB218’; // (orange) Highlight color
Appliquer le thème au Webmail
Lorsque les modifications sont réalisées, il faut modifier le fichier config.php dans le répertoire /squirrelmail/config/. Les thèmes se trouvent en fin de fichier. Il suffit d’ajouter les deux lignes suivantes : $theme[XX][’PATH’] = SM_PATH . ’themes/lcs_theme.php’;
$theme[XX][’NAME’] = ’LCS’;
en remplaçant XX par le numéro du thème.
Pour que le thème LCS soit choisi par défaut, il faut remplacer dans le même fichier de config le numéro de thème à la ligne située juste avant la liste des thèmes.
$theme_default = XX;
Ci dessous, une capture d’écran du thème LCS :
On peut supprimer la bordure entre les deux frames (gauche et droite).
Cela se fait dans le fichier /squirrelmail/src/webmail.php. En fin de fichier, on a la création des deux frames avec le code suivant:
Il suffit de remplacer chaque frameborder = 1 par un frameborder = 0 et la bordure ne sera plus là comme le montre la capture suivante.
Les plugins pour squirremail
Squirrelmail permet l’insertion dans le code de plugins. On en trouve un assez grand nombre sur le site officiel de squirrelmail. Après avoir parcouru la doc sur les plugins, voici ce que j’en ai compris et un plugin pour modifier légèrement l’apparence du webmail.
Un plugin se crée dans un répertoire du même nom que votre plugin. Ce répertoire contiendra au minimum 4 fichiers :
- INSTALL qui explique la procédure d’installation du plugin qui n’est autre qu’un décompression d’une archive du répertoire.
- README qui donne l’utilité du plugin, l’apport à squirrelmail.
- version qui donne le numéro de version du plugin
- setup.php qui contient les fonctions php de votre plugin et les points d’entrée dans le code squirrelmail.
C’est surtout ce dernier fichier qui nous intéressera. Pour que les fonctions développées dans votre plugin agissent, il faut indiquer à quel endroit du code vous devez intervenir. Les entrées dans squirrelmail se font par des balises du type "do_hook()". En regardant les différents fichiers de squirrelmail, on trouve deux ou trois points d’entrées de ce type.
L’initialisation du plugin, se fait comme suit :
function squirrelmail_plugin_init_"nom_du_plugin"() {
global $squirrelmail_plugin_hooks;
$squirrelmail_plugin_hooks[’balise_d’entrée’][’nom_du_plugin’] = ’fonction_associée’;
}
Prenons comme exemple, un plugin qui ajoute une image dans la frame gauche juste avant l’affichage du menu.
On appelle ce plugin "left_img". Dans le fichier /squirrelmail/src/left_main.php, le point d’entrée est "do_hook(’left_main_before’)".
Le code donnera :
global $squirrelmail_plugin_hooks;
$squirrelmail_plugin_hooks[’left_main_before’][’left_img’] = ’left_img_add’;
}
Ensuite, il faut écrire la fonction associée. Comme je vais juste ajouter une image, cela se ramène juste à écrire un echo d’image. Attention l’image est placé dans le dossier /images du plugin mais elle est appelée depuis le fichier /src/left_main.php !
function left_img_add()
{
echo ’<img src="../plugins/left_img/images/ecureuil.png" alt="un écureuil" style="margin: 0 auto; display: block;" title="un écureuil, fév. 2010" />’;
}
Notre premier plugin est fini, mais il reste à l’activer dans squirrelmail. C’est dans le fichier de config qui se trouve dans /squirrelmail/config/ qu’il se trouve. Il faut repérer la partie "plugin" est ajouter la ligne suivante :
La capture d’écran ci-dessous montre le résultat que l’on obtient.
A suivre
