Author Topic: New Roundcube 1.x theme Nordic  (Read 18399 times)

Offline kswgr

  • Newbie
  • *
  • Posts: 4
New Roundcube 1.x theme Nordic
« on: December 23, 2014, 06:02:27 PM »
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

Offline kswgr

  • Newbie
  • *
  • Posts: 4
Re: New Roundcube 1.x theme Nordic
« Reply #1 on: December 28, 2014, 03:01:02 PM »
Today, I have updated the Nordic skin to version 0.2. The revised skin adds specific support for four more plugins: Advanced Search, Jqueryui, Message Highlight, and Thunderbird Labels. Other adjustments have been made to the main CSS files, for example, to make the Advanced Search, Message Highlight and Thunderbird Labels plugins play well together in the message list with Nordic's rollover highlighting. The Jqueryui styling will hopefully make Jquery popups look more like they belong as part of the Nordic theme.

The updated skin can be downloaded here:

  http://www.sweger.com/files/roundcube/nordic-skin-roundcube.1.0.4_0.2.zip (zip format) or
  http://www.sweger.com/files/roundcube/nordic-skin-roundcube.1.0.4_0.2.tar.gz (tar.gz format)

Http links to outdated versions of the skin (e.g., the original release) will automatically be redirected to the most recent compatible version. If you need to download older versions, they are available by FTP here:

  ftp://ftp.sweger.com/roundcube

As always, I am of interested in any comments, observations or problems discovered with the skin.

Offline alias_neo

  • Newbie
  • *
  • Posts: 1
Re: New Roundcube 1.x theme Nordic
« Reply #2 on: December 29, 2014, 10:43:41 AM »
I'd suggest you post a screenshot, it'll make people more likely to try it out, if it looks nice. Without one, nobody is likely to want to take the time to give it a go.

Thanks for the effort and sharing, and I'll give it a go now myself.

Offline kswgr

  • Newbie
  • *
  • Posts: 4
Re: New Roundcube 1.x theme Nordic
« Reply #3 on: December 29, 2014, 02:13:51 PM »
Here a link to some Nordic skin screenshots:

  http://www.sweger.com/files/roundcube/screenshots/\

Hope this helps.

Offline ABerglund

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 673
Re: New Roundcube 1.x theme Nordic
« Reply #4 on: December 29, 2014, 03:44:01 PM »
I've installed it into my test instance. I suppose it's not bad, but my test group felt that the colors were a bit too intense, and that it looked out-dated rather than modern. One tester actually noted that it reminded him of squirrelmail, which he did not consider to be a compliment.

That said, the functionality seems good, and all of the plugins we use worked out of the gate. For those who like the look, it seems like a valid option.
Arne Berglund
SysAdmin, Internet Services
Lane Education Service District
Eugene, OR, USA

Offline kswgr

  • Newbie
  • *
  • Posts: 4
Re: New Roundcube 1.x theme Nordic
« Reply #5 on: January 05, 2015, 02:17:42 PM »
I have posted Version 0.3 of the Nordic skin. This update includes the following changes:
  • Softer colors: lightened gray backgrounds, less intense (saturated) buttons, slightly lighter blue headers/frames, all while maintaining the same hues and contrast for legibility;
  • Specific support for the Hide_Blockquote plugin;
  • Highlighting of focused links/entry fields, which should make keyboard navigation easier, especially within forms; and
  • Other adjustments to the main CSS files.
The updated skin can be downloaded here:

    http://www.sweger.com/files/roundcube/nordic-skin-roundcube.1.0.4_0.3.zip (zip format) or
    http://www.sweger.com/files/roundcube/nordic-skin-roundcube.1.0.4_0.3.tar.gz (tar.gz format)

Nordic skin screenshots are here:

  http://www.sweger.com/files/roundcube/screenshots/

Http links to outdated versions of the skin will automatically be redirected to the most recent compatible version. If you need to download older versions (e.g., to compare for differences), they are available by FTP here:

  ftp://ftp.sweger.com/roundcube

Please reply if you have any comments, or if you discover any problems with the skin.

Offline BarbaraInMemphis

  • Newbie
  • *
  • Posts: 6
Re: New Roundcube 1.x theme Nordic
« Reply #6 on: February 01, 2015, 06:23:03 PM »
I would love to be able to use your template but I have no idea how or where to install it. I want the options of using different fonts & at least to be able to use a "Center" justification. Under the User Interface, I only have Classic & Larry to choose from but neither give me options.
I use LunarPages & they put Roundcube on my computer for me so I have NO idea where to go from here. Please help.

Offline SKaero

  • Administrator
  • Hero Member
  • *****
  • Posts: 5,876
    • SKaero - Custom Roundcube development
Re: New Roundcube 1.x theme Nordic
« Reply #7 on: February 02, 2015, 04:19:57 AM »
Since your using a hosted version of Roundcube you wont be able to add a new skin.

Offline BarbaraInMemphis

  • Newbie
  • *
  • Posts: 6
Re: New Roundcube 1.x theme Nordic
« Reply #8 on: February 02, 2015, 01:32:39 PM »
If I were to download Roundcube & install it from there, would it be possible? Maybe I should stay with the hosted version?? I am a newbie at this.

Offline SKaero

  • Administrator
  • Hero Member
  • *****
  • Posts: 5,876
    • SKaero - Custom Roundcube development
Re: New Roundcube 1.x theme Nordic
« Reply #9 on: February 02, 2015, 02:52:42 PM »
If you setup your own install of Roundcube then you could change your skin. Keep in mind that if you setup your own install you will also need to take care of updates. To install Roundcube you'll need to upload the Roundcube files via FTP and setup a MySQL or similar database, you can find the full installation guide here: http://trac.roundcube.net/wiki/Howto_Install

Offline BarbaraInMemphis

  • Newbie
  • *
  • Posts: 6
Re: New Roundcube 1.x theme Nordic
« Reply #10 on: February 02, 2015, 03:35:34 PM »
Umm, I better leave well enough alone. Thanks for letting me know what I was about to embark upon. Nope, not up for that.  ;)

Offline catherineparker

  • Newbie
  • *
  • Posts: 4
Re: New Roundcube 1.x theme Nordic
« Reply #11 on: March 26, 2015, 12:59:22 AM »
why don't you posted all the screen shots on the forums