How to create custom theme in Quickr 8.1?
- Create a new design
- Apply the new design to your place

Attention: Although the information below is still valid, there are now two official documents available which describe the theme customization of Quickr (Domino). Please check the following links:

Customizing themes in IBM Lotus Quickr services for IBM Lotus Domino 8.1

Redbooks Wiki: Customizing Lotus Quickr 8.1

How to create custom theme in Quickr 8.1?

Make sure you are using a text editor which can correctly handle UTF-8 characters. Notespad is NOT such an editor! Always save the the files in UTF-8 character encoding.

In the example below the following path and design names are used. You should change them to reflect your environment:
- Lotus Quickr data directory: D:\notes\data
- Directory which contains the new design files: D:\notes\data\domino\html\qphtml\skins\newdesign

Create a new design

Copy the folder of the Quickr81 standard design (D:\notes\data\domino\html\qphtml\skins\quickr81) to an new folder within the same directory (e.g. D:\notes\data\domino\html\qphtml\skins\newdesign).

Insert 2 blank lines on top of each HTML file (page.htm, edit.htm, listfolder.htm, slideshow.htm) in the new theme directory. This is currently necessary because of a bug in Quickr.

In each of these HTML files modify all references to “Quickr81.js” to reflect the new theme directory (“/qphtml/skins/newdesign”).

Edit the file “D:\notes\data\domino\html\qphtml\skins\newdesign\scripts\Quickr81.js”:
- Update line “var theme_name='quickr81'” to the new name of your theme (use same name as your directory name, e.g. “newdesign”)
- Update line “var theme_imgLoc = '/qphtml/skins/quickr81/images/' to reflect the new image directory (e.g. ”'/qphtml/skins/newdesign/images/“
- Update line “QuickrLocaleUtil.loadCssFiles(”/qphtml/skins/quickr81”, “Quickr81.css”);“ to reflect new path to CSS file (e.g. ”/qphtml/skins/newdesign“)
- Update line “QuickrLocaleUtil.loadStringFiles(“quickr81”, ”/qphtml/skins/quickr81”, “Quickr81Strings”)“ to reflect the new name and path of your design (e.g. (“newdesign”, ”/qphtml/skins/newdesign“, “Quickr81Strings”)) ¹⁾

Make your desired changes in the 5 HTML files:
- e.g. to replace the logo change the line ”<img id=“lotusLogo” alt=“Lotus Software” src=“/qphtml/skins/common/images/logo.gif”/>“ to ”<img id=“lotusLogo” alt=“Lotus Software” src=“/qphtml/skins/newdesign/images/logo.gif”/>“ and upload the new logo to this location

Make your desired changes to the CSS file in “D:\notes\data\domino\html\qphtml\skins\newdesign\nls\en\Quickr81.css”.
Please be aware that this file exists multiple times but it is currently only used from this location. To make sure it will work for future versions copy the files also to the other directories within the “NLS\” path after you made the modifications. BTW: The file “Stylesheet.css” in the theme directory is no longer used!

Apply the new design to your place

First create a new custom theme. Open your place and choose “Customize this place → Custom Themes →Create a Custom Theme”

Enter a title and (if needed) a description of your theme)

In every of the 6 boxes either drag & drop the correct HTML/CSS file from your newly created theme directory or click on browse and select the correct file from the file dialog.

Click “Next” and the new design will be saved.

To apply this new design to your place you then choose “Customize this place → Choose a theme” and select your newly created theme (should be displayed at the bottom).

If for some reasons your place design becomes corrupted because of problems in your changed theme you can reset the design of the place to the default design by enetering the following URL in your browser:
- http:<yourServer>/LotusQuickr/<yourPlace>/Main.nsf/?opendatabase&ResetTheme —- [Special thanks to my colleague Rob Enright. I used a presentation of him as input for this entry.]

¹⁾
This is currently be verified!

Table of Contents

How to create custom theme in Quickr 8.1?

Create a new design

Apply the new design to your place