Blog

Alfresco and ECM

Themes for Alfresco Share

09GMT170000000009

Categories : Products and Add-ons

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.

Blue, PTSans, 13Blue, PTSans, 13

Yellow, Ubuntu, 12Yellow, Ubuntu, 12 Red, Ubuntu, 13Red, Ubuntu, 13 Purple, Monda, 11Purple, Monda, 11 Grey, Ubuntu, 13Grey, 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.

Theme settings

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


Categories

Archives