topic Adding a custom CSS to Alfresco Share in Alfresco Archive

Adding a custom CSS to Alfresco Share

technaton — Fri, 22 Jun 2012 08:32:32 GMT

Hello everybody!My users request that they can print out web pages, so I'm planning to include a CSS file specifically for printing through the media="print" tag. The Alfresco documentation does not explicitly mention the availability of such a file, so I guess I need to include it manually.Is there

Re: Adding a custom CSS to Alfresco Share

afaust — Fri, 22 Jun 2012 08:36:15 GMT

Hello,

in Alfresco 4 you should be able to do this via a Surf Extension Module that is keyed to your theme (via evaluator) and which customizes the /org/alfresco/components/head/resources component to inject CSS imports into the markup regions.

Regards
Axel

Re: Adding a custom CSS to Alfresco Share

technaton — Fri, 22 Jun 2012 12:28:02 GMT

Hello Axel,

thanks for your pointers. However, I'm stuck right now. I've read David Draper's posts about evaluators (e.g., http://blogs.alfresco.com/wp/ddraper/2011/07/29/sub-component-evaluations/).

However, I do not know how to create a java class that is called during rendering and that injects a CSS file (with media tag). Do I need to call it from the evaluator?

TIA!

— Eric

Re: Adding a custom CSS to Alfresco Share

afaust — Fri, 22 Jun 2012 12:38:34 GMT

Hello,

please also read the other posts from Davids blog - this should hopefully help you see things a bit more clearly.
For the approach I outlined you need to implement a evaluator Java class that implements ExtensionModuleEvlauator and checks the current theme. For the injection part, you need to configure a "customization" which targets the web script I mentioned and implement a small FTL template that renders the stylesheet-import code (HTML) using a @markup macro-call.

Regards
Axel

Re: Adding a custom CSS to Alfresco Share

technaton — Thu, 29 Nov 2012 10:44:41 GMT

Hello,

it took longer than I wanted, but I'd like to share the solution with the community. I packaged it in form of an AMP so that everybody could benefit from it.

I decided to skip the evaluator part at first and include a general print.css file. It comes with some sane defaults and looks quite nice. Next item on the TODO list is to actually introduce one, but let it check whether a theme-specific print.css override exists and apply that on top of the default style sheet.

The source code is available on Github: https://github.com/Wilhelm-Buechner-Hochschule/Alfresco-Wiki-Printout
The finished AMP can also be obtained via addons.alfresco.com: http://addons.alfresco.com/addons/wiki-printout

Even if its only a small addon, I hope it might be useful for somebody.

Thanks again for your hints, Axel!

— Eric