Themes for Alfresco Share

2013-09-17

With the release of 4.2.d we got an all new menu bar, and with that a new theme that is ” progress towards a lighter looking, more modern UI experience.” (Kevin Roast blog post). And I agree, it is a more modern UI experience. But I just had to add some color to it. Here you have 5 variants. Click on thumbnails for larger view.

Image

Blue, PTSans, 13

Image

Yellow, Ubuntu, 12 

Image

Red, Ubuntu, 13 

Image

Purple, Monda, 11 

Image

Grey, Ubuntu, 13

OK, the last grey one didn’t add so much color. But it is not all just black and white.

But there is another cool feature with these themes. You can select font and default size as can be seen in the images above. Currently there are three fonts included, PTSans, Ubuntu and Monda. You enable a custom font using the module deployment tool.

 

Image

Theme settings

 

The way this is done is by adding pseudo font names in presentation.css:
font-family: 'LX Ubuntu','LX PT Sans','LX Monda', Arial, sans-serif !important;.
When you enable a font in the module deployment tool you will load an additional css that has the definitions for that font, such as:
 

@font-face {
font-family: 'LX Ubuntu';
font-style: normal;
font-weight: 400;
src: local('Ubuntu'), url(Ubuntu.woff) format('woff');
}



And if you enable any of the font sizes, this will be the default size. Standard in Alfresco Share is 13px, and this is most likely what will work best. But I have found that Monda looks nice with 12px. I’m not sure it is realistic to set font size 10 or 16, but it was cool it could be done.
Possibly you can have different fonts and sizes per site using evaluator in module deployment tool, but since fonts are ordered in css, if you enable more than one the first one will win.

The theme css is based on a version of lightTheme prior to 4.2.d, so there are some enhancements I also would like to incorporate. So this is all work in progress, but I’m not sure when I get time to work on this next time. But you can help if you want, it is available on https://github.com/loftuxab/share-theme-pack. You are welcome to try the themes out, fork and enhance.

UPDATE: I made some merges from current lightTheme, and also created binary releases that you can download fromhttps://github.com/loftuxab/share-theme-pack/releases