After many years, I have recently switched from Squirrelmail to Roundcube Webmail, so I am actually
new to maintainig a Roundcube installation. I wasn't completely satisfied with either the Classic or Larry
themes, so I decided to implement my own skin as an extension of Classic. I am happy enough with the
result that I think others might find it useful too. The name I have given to the theme is "Nordic".
You can download the Nordic skin here:
http://www.sweger.com/files/roundcube/nordic-skin-roundcube.1.0.4_0.1.zip (zip format) or
http://www.sweger.com/files/roundcube/nordic-skin-roundcube.1.0.4_0.1.tar.gz (tar.gz format)
I am of course interested in any comments, observations or problems discovered
with the skin. If I think I can fix a problem, I will. Here is some more information
about Nordic from the readme file:
This skin was adapted originally from the Roundcube 1.0.3 Classic skin, and is
implemented as an extension of Classic with most templates unchanged. It should
be compatible with any version of Roundcube Webmail from 1.0 to 1.0.4 (as of
December, 2014). Changes from the Classic skin are Copyright 2014 Kristofer Sweger.
Under the GPL Version 3, you are free to use and adapt this skin as you would any
other part of Roundcube Webmail.
When creating the skin my aim was to achieve an appearance that is clean, legible,
and pleasing to my eyes, and which gives reasonable feedback as the mouse moves
around. The result incorporates the following changes from the Classic skin:
* The skin generally uses grayish blues (Nordic?) instead of just grays for
frames and borders. Contrast is a little higher than Classic, and some 3D
effects are also used, going a bit against the flat, shades-of-gray style
that now seems to be popular for applications.
* Hover effects (mainly by background color) should make it obvious when the
mouse is over something clickable, but not too irritating. Color is also used
consistently to indicate input fields and which one currently has focus.
* The skin uses the CSS3 "border-radius" property for some rounded corners.
When using an older browser that doesn't support the standard "border-radius",
sharp corners will be rendered. Preliminary versions of border-radius for
Mozilla (Firefox or Seamonkey) and Webkit (Safari or Chrome) browsers are also
still supported.
* The skin uses the CSS3 "box-shadow" property to cast shadows under pop-ups.
Older browsers that don't support shadows will simply not display them.
* The skin uses CSS linear gradients rather than image files for box title
backgrounds. On much older browsers these will display as a solid color.
* The skin uses "inset" and "outset" border styles for a simple 3D effect on
input fields and buttons.
* The font-family preference list was changed to "'Lucida Grande', Verdana,
Arial, Helvetica, 'Liberation Sans', 'DejaVu Sans', 'Bitstream Vera Sans',
sans-serif". Surveys I have seen suggest that at least one of these clean,
very legible fonts will be available to browsers on most Windows, Apple or
Linux systems. A similar list is used for monospace fonts as well.
* I have tried to make the skin a little more scalable. On my higher-resolution
screens, I tend to have my browser text (but not images) zoomed to 133%, so
font sizes, widths and heights were chosen in terms of em's and percents
wherever possible to accommodate this. This means that in an unzoomed browser,
there is a little wiggle room to change the font family or some font sizes or
to zoom text only without destroying the appearance.
* CSS changes and overrides for some Roundcube Webmail plugins, which each can
have their own stylesheet additions in their own skins directory, are included
in a skin subdirectory called "plugins". Currently only the help and zipdownload
plugins needed changes (see installation instructions following).
To install, just unpack the zip or tar.gz archive into the roundcubemail skins
directory.
Then, for each plugin you are using, go to the plugin's directory and see if it has
a skins/classic subdirectory. If it does, either create a skins/nordic subdirectory
and copy the contents of skins/classic to it, or (better) create a symlink named
"nordic" in the skins subdirectory (e.g., enter the command "ln -s classic nordic").
For the help and zipdownload plugins, make skins/nordic as a full copy of the
skins/classic subdirectory rather than a symbolic link, then copy the css files from
the nordic skin plugins directory (e.g., from skins/nordic/plugins/help/help.min.css)
over the corresponding files in the plugin (e.g., to plugins/help/skins/nordic/help.min.css).
Have fun!
Kristofer Sweger
December 23, 2014