[imp] Colours and Legend

Tue Jun 17 04:50:30 PDT 2003

Hello,

Firstly, I would like to thank everyone involved in the Horde Project
for a superb set of applications. Well done and keep up the good work.

I have been trying to install Horde 2.2.1 &  IMP 3.2.1 and have got it
to work reasonably well albeit with some session expired/logout
and other problems still to solve... (but maybe in another email).

Some colour-blind users raised issues about the default Horde/IMP
colours being very hard to distinguish. The two main problems
were; the colours were too dark and that the colour cues for the
mailbox page were pretty useless for them (as they couldn't distinguish
the pastel shades on the grey background.

The trick for the legend is not to use colour cues but iconic cues.
I looked into this and found that icons were being used as cues but
the don't appear in the legend.

Attached in a copy of the legend.inc from horde/imp/templates/mailbox/
directory. This puts the icons over the pastel panels, and in addition
puts the personal icon and attachment icon on the legend too.
One question is what does the 'alternate.gif' denote? I assumed it was
to
denote a message in pure html format but after sending myself a few of
those the icon did not appear. However, I received a junk email today
that was flagged with the alternate icon. Could some tell me what this
suppose to denote? [see mailbox.jpg, first message]

This leads on to; why does html messages denote themselves as
messages with an attachment? Is there a facility to turn on html
messages
flagging as with attachments
($conf['mailbox']['show_attachments']=true)?

As regards to the dark colour issues with colour blind users, I have
created a horde/imp theme which gives a light background similar to the
'blue' theme by Atif Ghaffar. Attached it the horde/config/html.php.

You can see a screen shots here:
http://www.st-andrews.ac.uk/~svt/mailbox.jpg
http://www.st-andrews.ac.uk/~svt/compose.jpg

Together with the legend.inc, I think this scheme would work
well for sites that want a light background as opposed to the default
theme of a dark background. What do you say, is it good enough for
inclusion on the Horde themes page?

Comments?
Son

--
Son V Truong * Systems Programmer
IT Services * University of St Andrews
svt at st-andrews.ac.uk * 01334 462373

-------------- next part --------------
<?php if (!strstr($imp['protocol'], 'pop3')): ?>
<tr>
    <td class="header" colspan="6">

<table border="0" cellpadding="0" cellspacing="4">
<tr>
    <td width="30" class="unseen" align="center"><img src="graphics/unseen.gif"></td>
    <td width="60" class="legend"><?php echo _("New") ?></td>
    <td width="30" class="text">&nbsp;</td>
    <td width="60" class="legend"><?php echo _("Seen") ?></td>
    <td width="30" class="answered" align="center"><img src="graphics/answered.gif"></td>
    <td width="60" class="legend"><?php echo _("Answered") ?></td>
    <td width="30" class="important" align="center"><img src="graphics/important.gif"></td>
    <td width="60" class="legend"><?php echo _("Important") ?></td>
    <td width="30" class="deleted" align="center"><img src="graphics/deleted.gif"></td>
    <td width="60" class="legend"><?php echo _("Deleted") ?></td>
    <td width="15" class="draft" align=right><img src="graphics/draft.gif"></td>
    <td width="60" class="legend"><?php echo _("Draft") ?></td>
    <td width="15" class="personal" align=right><img src="graphics/personal.gif"></td>
    <td width="60" class="legend"><?php echo _("Personal") ?></td>
    <?php
      if ($conf['mailbox']['show_attachments']) {
        echo "<td width=\"15\" class=\"text\" align=middle><img src=\"graphics/attachment.gif\"></td>";
        echo "<td width=\"60\" class=\"legend\">" . _("Attachment") . "</td>";
      }
    ?>
</tr>
</table>

    </td>
</tr>
<?php endif; ?>
-------------- next part --------------
<?php

/* Base Horde CSS properties.
 * This file is parsed by css.php, and used to produce a stylesheet.
 *
 * $Horde: horde/config/html.php.dist,v 1.20.2.7 2002/11/03 17:02:48 jon Exp $
 */

$css['body']['font-family'] = 'Geneva,Arial,Helvetica,sans-serif';
$css['body']['font-size'] = '12px';
$css['body']['background-color'] = '#f7f5f2';
$css['body']['color'] = 'black';
if ($browser->hasQuirk('scrollbar_in_way')) {
    $css['body']['margin-right'] = '15px';
}
$css['body']['scrollbar-base-color'] = '#b1c1ea';
$css['body']['scrollbar-arrow-color'] = 'black';
$css['html']['scrollbar-base-color'] = '#b1c1ea';
$css['html']['scrollbar-arrow-color'] = 'black';

$css['input']['font-family'] = 'Geneva,Arial,Helvetica,sans-serif';
$css['input']['font-size'] = '12px';

$css['form']['margin'] = '0px';

$css['a']['color'] = '#333399';
$css['a']['font-family'] = 'Geneva,Arial,Helvetica,sans-serif';
$css['a']['font-size'] = '12px';
$css['a']['text-decoration'] = 'none';
$css['a:hover']['color'] = 'blue';
$css['a:hover']['text-decoration'] = 'underline';

$css['a.menuitem']['color'] = '#eeeeff';
$css['a.menuitem']['font-family'] = 'Verdana,Helvetica,sans-serif';
$css['a.menuitem']['font-size'] = '11px';
$css['a.menuitem']['font-weight'] = 'normal';
$css['a.menuitem:hover']['color'] = 'yellow';

$css['a.helpitem']['color'] = '#cccccc';
$css['a.helpitem']['font-family'] = 'Verdana,Helvetica,sans-serif';
$css['a.helpitem']['font-size'] = '12px';
$css['a.helpitem']['font-weight'] = 'normal';
$css['a.helpitem:hover']['color'] = 'yellow';

$css['a.helplink']['color'] = 'white';
$css['a.helplink']['background-color'] = '#6181ae';
$css['a.helplink']['font-family'] = 'Verdana,Helvetica,sans-serif';
$css['a.helplink']['text-decoration'] = 'underline';
$css['a.helplink:hover']['color'] = 'yellow';

$css['a.widget']['color'] = '#222244';
$css['a.widget']['font-family'] = 'Verdana,Helvetica,sans-serif';
$css['a.widget']['font-size'] = '11px';
$css['a.widget:hover']['color'] = 'blue';
$css['a.widget:hover']['background-color'] = '#e9e9e9';

$css['.outline']['background-color'] = 'black';

$css['.menu']['color'] = 'white';
$css['.menu']['background-color'] = '#6181ae';
$css['.menu']['font-family'] = 'Verdana,Helvetica,sans-serif';

$css['.header']['color'] = 'white';
$css['.header']['background-color'] = '#6181ae';
$css['.header']['font-family'] = 'Verdana,Helvetica,sans-serif';
$css['.header']['font-weight'] = 'bold';
$css['.header']['font-size'] = '17px';
$css['a.header:hover']['color'] = 'white';

$css['.light']['color'] = 'black';
$css['.light']['font-family'] = 'Geneva,Arial,Helvetica,sans-serif';
$css['.light']['font-size'] = '12px';

$css['.smallheader']['color'] = 'white';
$css['.smallheader']['background-color'] = '#6181ae';
$css['.smallheader']['font-family'] = 'Geneva,Arial,Helvetica,sans-serif';
$css['.smallheader']['font-size'] = '12px';
$css['a.smallheader:hover']['color'] = 'yellow';

$css['.small']['color'] = '#aaaacc';
$css['.small']['font-family'] = 'Geneva,Arial,Helvetica,sans-serif';
$css['.small']['font-size'] = '11px';

$css['.legend']['color'] = 'white';
$css['.legend']['font-family'] = 'Geneva,Arial,Helvetica,sans-serif';
$css['.legend']['font-size'] = '11px';

$css['.control']['color'] = 'black';
$css['.control']['background-color'] = '#cccccc';

$css['.item']['color'] = 'black';
$css['.item']['background-color'] = '#e9e9e9';

$css['.button']['color'] = 'black';
$css['.button']['background-color'] = '#c8defc';
$css['.button']['border-bottom'] = 'thin solid #222244';
$css['.button']['border-right'] = 'thin solid #222244';
$css['.button']['border-top'] = 'thin solid #48658c';
$css['.button']['border-left'] = 'thin solid #48658c';
$css['.button']['font-size'] = '11px';
$css['.button']['font-family'] = 'Verdana,Helvetica,sans-serif';
$css['.button']['font-weight'] = 'normal';

$css['.selected']['background-color'] = '#bbcbff';

$css['.text']['color'] = 'black';
$css['.text']['background-color'] = 'white';

$css['.item0']['background-color'] = '#f3f3f3';

$css['.item1']['background-color'] = '#e9e9e9';

$css['.fixed']['font-size'] = '13px';
$css['.fixed']['font-family'] = 'monospace, fixed';

$css['td']['font-size'] = '12px';
$css['td']['font-family'] = 'Geneva,Arial,Helvetica,sans-serif';

$css['th']['font-size'] = '12px';
$css['th']['font-family'] = 'Geneva,Arial,Helvetica,sans-serif';

$css['.list']['background-color'] = '#f0f0ff';
$css['.listlt']['background-color'] = '#ffffff';

$css['.signature']['color'] = '#cccccc';
$css['.signature-fixed']['color'] = '#cccccc';
$css['.signature-fixed']['font-size'] = '13px';
$css['.signature-fixed']['font-family'] = 'monospace, fixed';

$css['.quoted1']['color'] = '#660066';
$css['.quoted2']['color'] = '#007777';
$css['.quoted3']['color'] = '#990000';
$css['.quoted4']['color'] = '#000099';
$css['.quoted5']['color'] = '#bb6600';