Content Feed
Subscribe via Email
I've been asked about this topic a number of times recently, including at NLLUG last week.
How does one go about theming Lotus Quickr so that all pages appear using the custom theme, including places and the 'general pages' such as My Places?
The answer is to use CSS as you would expect, but then to call that CSS from a couple of JS files.
So here's the steps required:
Create a directory for your theme under \qphtml\skins, e.g. \qphtml\skins\collabmatters
Copy any additional images required into that directory (company logos etc.)
Setup Skin:
\qphtml\skins\setup contains the theme detail for the Quickr general screens, e.g. MyPlaces etc.
In \qphtml\skins\setup\scripts:
Create a 'setup_ext.js' file, containing:
var head = document.getElementsByTagName("head");In \qphtml\skins\setup\nls\en:
if (head && head[0]) {
var lang = (QuickrLocaleUtil.getStyleLocaleList())[0];
var skinCss = document.createElement("link");
skinCss.rel = ("stylesheet");
skinCss.type = ("text/css");
skinCss.href = ("/qphtml/skins/setup/nls/"+lang+"/setup81collabmatters.css");
head[0].appendChild(skinCss);
}
Add your custom CSS code in a new file, e.g. setup81collabmatters.css
Quickr Skin:
\qphtml\skins\quickr81 contains the theme detail for Quickr places
In \qphtml\skins\quickr81\scripts:
Create a 'Quickr81_ext.js' file, containing:
var head = document.getElementsByTagName("head");In \qphtml\skins\quickr81\nls\en:
if (head && head[0]) {
var lang = (QuickrLocaleUtil.getStyleLocaleList())[0];
var skinCss = document.createElement("link");
skinCss.rel = ("stylesheet");
skinCss.type = ("text/css");
skinCss.href = ("/qphtml/skins/setup/nls/"+lang+"/setup81collabmatters.css");
head[0].appendChild(skinCss);
}
Add your custom CSS code in a new file, e.g. quickr81collabmatters.css (the file is typically the same as setup81collabmatters.css above).
Whilst it is obviously still possible to theme Quickr on a place-by-place basis using Placetypes, this solution makes it easier to apply a theme across the whole of a Quickr infrastructure. In addition, this makes it possible to theme both Connections and Quickr to look very similar, for example:
| Connections | Quickr |
 |  |
(images copyright Collaboration Matters)
This show'n'tell presentation from Lotusphere 2010 (by Bob Barber & Brian O'Gorman) covers the topic in fine detail, and goes on to discuss more in-depth customisation too.
Lastly, I have had some issues with copying these .js files from one Windows machine to another (i.e. from pre-prod to live environments) with strange characters creeping in, meaning that the CSS doesn't get applied correctly - so watch out for that.
By: Stuart McIntyre | 5 Comments | On: 13 September 2010 15:06:04 | Tags: quickr 8.2 customisation css
Comments
Thanks for this blog post! I did not realize the solution would be to update the JS files of the default theme.
It is a pitty though that all control on the UI is controlled by JavaScript.
First a set of css files is being loaded by the client, these files are being removed by JS and new files are being added again. This results in extra HTTP requests which are completely useless. All this JS has to be executed clientside which increases the wait time (EVERY PAGELOAD).
And if you would want to change some HTML structure, it would become a fairly complex and heavy process to locate and replace certain elements by JavaScript. Especially because the default theme already has several JavaScripts running modifying the css resources.
Because the 8.1/8.2 Quickr themes are not completely OneUI Compliant, some changes in the HTML would be preferable.
Thanks for your effort though,
Stijn
Stijn, it sounds as if you know far more about this than I do, but I would argue that in most cases the CSS updates required are small changes to the overall design of the Quickr theme, and thus an entirely new CSS file would not be desirable, this approach allows us to just pull in the changes we require from our custom CSS.
However, having said that, we have had some interesting challenges controlling the inheritance of various classes in this scenario. However, it works in the end.
I now need to check what changes have been made in 8.5 to see whether this approach has been altered at all.
I agree with the fact that only minor updates in CSS should be made to default products Like Quickr and Connections.
But the customer disagrees with our opinion. They want to have their own style on their websites.
I am currently having a look at 8.5, it seems to work the same as the previous versions. Don't have a working theme yet though ;-)
Stuart,
Thank you for sharing this. Good stuff.
Had strange character issues as well. We discovered it was related to encoding files where saved in. Try saving files using UTF-8 encoding. (Eg. use Notepad and select "Save As.." where the dialog allows for selecting encoding to use).