Alright, our first (and probably only) theme was finished today. Our goal was to create a theme for
MyRoundcube with the additional option of using most of the info. for the standard release of RoundCube. For our purposes the theme had to be soft, attractive, user friendly to all ages (no clown colors and garish selection fields), and modern ... to a degree anyway. This theme was tested extensively on IE7 and Firefox 2x. Before we go on with the description, see some screenshots and decide for yourself if this is something that you'd like to implement.
The Login ScreenAdding ContactsFolder View & EditingInbox with MessagesAll of the colors are uniform throughout. The title field has been widened to accommodate a larger font in the login screen. We wanted to maintain some contrast in certain areas like the addressebook and others, in order to make those editing areas stand out better. The folder view shows the folder names in english since we've had those titles translated (
thanks Roland) for our german based webmail. We also recreated the folder tabs because we thought the old ones were to bland ... and we also wanted a space between the tabs. Almost all of the original images have been kept, but we shaded them to match our colors and we darkened the passive images since thoses ended up "too passive" once the color was added to the backgrounds. The taskbar has been made more "3D translucent" and the searchbox has been brightened up to make it more visible/obvious. Using two different background shades also means that you can't have the selection fields i.e. input dimples translucent everywhere since two different files cause the backgrounds. We've made them translucent where it matters most, i.e. where they're more visible, more frequently.
We like the fact that the information screen shows up after login, but feel that that's the only time this screen should be important enough to view. So we disabled the information.png image in the mail.html template. Another reason for doing that was because our logo image clashed with it. That way we killed two birds with one stone so to speak.
Font color and background changes were made in the following css files only:(Keep in mind that we're using Myroundcube as opposed to basic Roundcube)
addresses.css - common.css - mail.css - settings.css
Additional adjustments (very minor) were made in these templates:compose.html - login.html - mail.html - message.html
If you want a two color login screen you'll have to adjust one of the colors in either the common or the mail.css file, and the second color in the mail.html template file. If you like this particular theme then that's already been done for you. All of the images that were changed should realistically work for Roundcube and most of the other file adjustments too. The main
visual difference between the two programms is that MyRoundcube is wrapped which means that one or two tweaks were done with that in mind, but again, may not impact Roundcube at all.
The download file is apx. 108 KB in size, in zip format. The only thing that you will find there, are the folders with the appropriate files that were changed. So if you wanted to repalce your common.css with our adjusted common.css file, you'd simply rename your file first (common.css.old) followed by uploading our common.css file to your server. If you test one file at a time, it'll obviously end up looking rather ridiculous. Best would be to download everything, open the folders, rename all of your "to be exchanged" files to
filename.ext.old followed by uploading all of the new files to your server at once. Then you'll get the right look, the first time around. Credit for the theme would be nice if you use it, but it's certainly not mandatory. Don't forget to hard refresh your browser after the uploads, good luck, and enjoy this theme!
Download Peaches & Cream Theme here!
