Author Topic: New outlook.com desktop and mobile theme for roundcube  (Read 26239 times)

Offline cyberdan

  • Full Member
  • ***
  • Posts: 57
    • www.roundcubeplus.com
New outlook.com desktop and mobile theme for roundcube
« on: July 15, 2014, 05:18:54 PM »
Hi Guys,

We are in the process of releasing our new outlook.com roundcube theme. We're still working on the finishing touches, if you would like to test it out here is the link:

http://ensigniamail.com/rcsbeta
username: beta@ensigniamail.com
password: rcsbeta

This upgrade will be compatible with 90% of the available roundcube plugins. The good news is that we were also able to get many of them to work with our mobile skins. We will be upgrading the rest of our skins on www.roundcubeskins.net with the same functionality.


1. Fully compatible with Roundcube 1.x
2. Desktop skins fully compatible with all the MyRoundcube plugins (http://myroundcube.com)
3. Desktop skins directly based on Larry, which for the most part eliminates the need for copying skin templates to the plugin directories to make the plugins work.
4. Mobile skins integrated with the desktop skins, so one skin handles both the desktop and mobile devices.
5. Mobile skins re-created to handle all the RC 1.x functionality
6. Mobile skins able to handle plugins
7. Using font icons instead of svg/png icons - giving icons retina display resolution on all devices
Roundcube Skins and Plugins
www.roundcubeplus.com

Offline Yoni

  • Full Member
  • ***
  • Posts: 164
    • MyRoundcube
Re: New outlook.com desktop and mobile theme for roundcube
« Reply #1 on: July 15, 2014, 10:23:05 PM »
Beautiful job that from folks at ensignia! The Outlook skin is very clean in its design and it offers support for several MyRoundcube Plugins.

I will be certainly purchasing this skin once it becomes available. Your skins collection is getting better every time guys. Keep up the exceptional work!

All the best,

Yoni

Offline cyberdan

  • Full Member
  • ***
  • Posts: 57
    • www.roundcubeplus.com
Re: New outlook.com desktop and mobile theme for roundcube
« Reply #2 on: July 17, 2014, 09:10:52 AM »
Thanks Yoni, appreciate the compliments. All feedback good and bad are welcome. It's how we improve on the product.
Roundcube Skins and Plugins
www.roundcubeplus.com

Offline Jaime_Pomales

  • Jr. Member
  • **
  • Posts: 18
Re: New outlook.com desktop and mobile theme for roundcube
« Reply #3 on: July 19, 2014, 01:38:44 PM »
That is an awesome theme. I have one suggestion though, could you include support for the three col plugin. Lots of desktops have so much horizontal real-estate and limited vertical that it's convenient to lay out the panes next to each other rather than message list on top of preview pane.

Let us know when it's available for purchase.

Offline cyberdan

  • Full Member
  • ***
  • Posts: 57
    • www.roundcubeplus.com
Re: New outlook.com desktop and mobile theme for roundcube
« Reply #4 on: July 21, 2014, 02:00:46 PM »
Jaime_Pomales, thanks for your feedback. That is an excellent point.

We're hopping to roll this out by the end of the week - we'll be sure to let you know when it's available.
Roundcube Skins and Plugins
www.roundcubeplus.com

Offline ehych

  • Newbie
  • *
  • Posts: 2
Re: New outlook.com desktop and mobile theme for roundcube
« Reply #5 on: July 21, 2014, 05:16:32 PM »
Some icons are retina enabled and some aren't, it would be great to have them all retina ready. Nice theme!

Offline Jaime_Pomales

  • Jr. Member
  • **
  • Posts: 18
Re: New outlook.com desktop and mobile theme for roundcube
« Reply #6 on: July 27, 2014, 06:04:06 PM »
Just purchased the new outlook skin.  It's very nice, and I figured out the horizontal layout issue with the threecol plugin. It seems that you need a symlink inside of plugins/threecol/skins/ for the skin in which you want to enable the three column layout.

I just did this from within the threecol plugin's skin subdirectory and the horizontal layout is now working great. So it wasn't an issue with this skin. The threecol plugin just needs to be enabled for any additional skins by creating a symlink like so:

Code: [Select]
ln -s larry outlook

Offline Jaime_Pomales

  • Jr. Member
  • **
  • Posts: 18
Re: New outlook.com desktop and mobile theme for roundcube
« Reply #7 on: July 28, 2014, 09:22:00 AM »
Would it be possible to explain how I might extend this skin to other plugins? Like for example, I use a kolab version of roundcube (which looks great btw), and I don't get the color scheme on the kolab calendar. The icon gets picked up because the plugin is called "calendar", but I only get grey coloring from within the calendar area. The file store and task manager have neither the theme colors nor the flat icons.

Would you be willing to point me in the right direction to extend this skin to color those areas in the same manner?

Offline chris_scott

  • Jr. Member
  • **
  • Posts: 12
Re: New outlook.com desktop and mobile theme for roundcube
« Reply #8 on: July 30, 2014, 04:47:40 AM »
Jaime_Pomales, here are some points that will get you started with adding support for the plugins you mentioned (I assume you have good knowledge of css and js):

Plugins use their own html code, css rules, javascript and images located in the plugin directories to render their output. We shouldn't modify any of the plugin files directly, so all our modifications need to be done in the skin's css and js files: outlook/skin/skin_desktop.css (or _mobile.css for mobile devices) and outlook/skin/skin.js.

(If you need unminified versions of the files, we can send them to you, just open a ticket in our helpdesk at http://roundcubeskins.net.)

Icons

The Outlook skin uses Font Awesome for the icons (http://fortawesome.github.io/Font-Awesome.) To replace a png icon loaded by a plugin with a flat icon, you'll need to remove the background image specified by the plugin and load the icon character into the element, for example:

Code: [Select]
#some-element {
    background-image: none;
}

#some-element:before {
    font-family: FontAwesome;
    content: "\f073";
}

(You may need to add some additional styling, but these are the basics. To find the codes for the icons, look in the file outlook/skin/icons/css/font-awesome.css)

If the plugin uses html img tags, replacing the icons won't be as straightforward, but it's still doable.

Colors

The skin has 18 color schemes to chose from and each scheme has 4 colors that can be applied to html elements. You'll find the list of the schemes, their colors and the applied styles in the file skins.js. The first color in the scheme is used to create a body element class that can be later used in the css rules (for example color-8d2297.)

If you want to apply a color to an element, simply add it to the styles in skins.js. There are ready-made rules for applying the active scheme's colors to the elements' background, borders and text. You can of course create your own rules if you wish.

Incompatible plugins

Some plugins don't support any other skins than larry and classic. They will check if the current skin name is "larry" and if not, they will assume it's "classic." And since the layout positioning of classic is different than larry (and our skins are based on larry,) they will render their output in the wrong places.

If any of your plugins use hard-coded checks for "larry" and render things incorrectly, our plugin rcs_skins can fix this for you. Simply add the name of the incompatible plugin to the $plugins array in plugins/rcs_skins/rcs_skins.php. This will make the incompatible plugin believe it's running under "larry" and so it will render its output in the proper places.

This will also fix the problem with the missing skin template files in the plugin directions that you mentioned in your previous post (you won't need to symlink the larry directories to outlook.)

Hope this will be enough to get you started. Thanks for using our skins! If you need any more help, let us know.

Offline Jaime_Pomales

  • Jr. Member
  • **
  • Posts: 18
Re: New outlook.com desktop and mobile theme for roundcube
« Reply #9 on: July 30, 2014, 11:11:34 AM »
Got it, thanks. I removed the symlink and added the threecol plugin to the plugin array in rcs_skins.  Works like a charm.

Thanks for the detailed information. I'll be opening a trouble ticket for the un-minified source files.  Appreciate it.

Now that I study the generated html a little more, I see that the pages that stay default grey aren't getting the body class color-#foo. I'll probably better understand why not with access to the unminified files.

Offline cyberdan

  • Full Member
  • ***
  • Posts: 57
    • www.roundcubeplus.com
Re: New outlook.com desktop and mobile theme for roundcube
« Reply #10 on: August 05, 2014, 10:26:30 PM »
Thank you for the input and suggestions. We're always trying to find ways to improve our product so comments and feedback are still welcome.

In other news, as promised, the outlook theme has finally been released :) http://roundcubeskins.net

The demo is still available for try outs http://ensigniamail.com/rcsbeta
Roundcube Skins and Plugins
www.roundcubeplus.com

Offline cyberdan

  • Full Member
  • ***
  • Posts: 57
    • www.roundcubeplus.com
Re: New outlook.com desktop and mobile theme for roundcube
« Reply #11 on: September 10, 2014, 10:05:54 AM »
Hi All,

We have just finished updating our FREE webmail skin for RC desktop users: LITECUBE . Our team has changed the skin format to be more flexible.

Updates include:
- color selection options
- works with all the https://myroundcube.com plugins
- includes the rcs_skin plugin, which makes it possible to set different skins for different device types
- extended the skin from larry making it possible to use larry’s plugin templates

Please feel free to download and play with it, of course feedback is welcome http://roundcubeskins.net/portfolio/litecube/
Roundcube Skins and Plugins
www.roundcubeplus.com