Download the default theme
Open Administration and the customisation and Themes area. Download System default and extract the ZIP archive.
IBM PLANNING ANALYTICS
Customise a PAW theme: company logo and colours
This video shows how to adapt the Planning Analytics Workspace interface to your company’s branding. Edit the theme files, upload the archive and activate the theme.
The short answer
A Workspace theme is a ZIP archive containing spec.json and an images folder. The JSON file defines branding and colours. Upload the edited archive and activate the theme.
Florian KaiserIBM Planning Analytics consultant
Original transcript (German)
Das Design von PAW kannst du an dein Unternehmen anpassen. Hier oben sehen wir aktuell die Standardeinstellung mit der schwarzen Leiste. Gehe dazu in die Verwaltung und öffne den Bereich „Motive“. Dort findest du „System default“. Lade diese Datei herunter. Du erhältst einen images-Ordner und eine JSON-Datei. Im images-Ordner legst du zum Beispiel dein Unternehmenslogo ab. In der Datei spec.json hinterlegst du die passenden Farbcodes.
Welcher Farbcode welchen Bereich betrifft, habe ich auf meiner Webseite detailliert beschrieben. Schau dort gerne nach. Passe die Datei an und packe die Inhalte anschließend wieder in ein ZIP-Archiv. Gehe auf „Hochladen“, wähle dein angepasstes Design aus und bestätige den Upload. Danach erscheint das Theme in der Auswahl und du kannst auf „Aktivieren“ klicken.
Lade anschließend deinen Browser neu. Jetzt sehen wir, dass das Farbschema angepasst wurde. Wenn wir auf „Daten und Modelle“ gehen und mit der Datenbank arbeiten, hat die Navigation im Beispiel einen leichten Orangeton. Oben steht mein Firmenname und die Gestaltung ist ebenfalls orange angepasst.
Das ist ein Beispiel, um den Unterschied zum vorherigen Design zu zeigen. Die Anpassung lässt sich mit wenigen Schritten umsetzen.
English transcript
You can adapt the PAW design to your company. At the top, we currently see the default black bar. Go to Administration and open the Themes area. There you will find System default. Download the file. You receive an images folder and a JSON file. Place your company logo in the images folder, for example, and define the relevant colour codes in spec.json.
I have explained on my website which colour code applies to each area. Feel free to take a look. Edit the file and package the contents into a ZIP archive again. Choose Upload, select your customised design and confirm the upload. The theme then appears in the list, and you can click Activate.
Reload your browser. We can now see that the colour scheme has changed. When we open Data and models and work with the database, the navigation has a light orange tint in this example. My company name appears at the top, and the styling there is also orange.
This is an example to demonstrate the difference from the previous design. The customisation can be completed in a few steps.
Step by step
Edit the logo and colour values
Place the logo in the images folder and update the image path and colours in spec.json. File names and paths must match.
Upload and activate the theme
Package spec.json and the images folder into a new ZIP archive, upload it as a theme and activate it. Then reload your browser.
Technical context
The supported colour keys style specific parts of the interface; they do not provide unrestricted CSS for PAW. IBM limits the ZIP archive to 32 MB and prohibits underscores in its name. Image file names must not contain spaces. Book themes are managed separately.
Which key controls which area?
| spec.json | Meaning / area |
|---|---|
schemaVersion | Theme file format version, not the PAW product version; the IBM sample uses 3.0 |
name | Theme name shown in Administration. System default is reserved for the built-in theme |
brandText | Company name |
brandIcon | Logo image path |
favicon | Browser tab icon; currently unsupported by IBM |
uiShellTheme | Light or dark Home menu |
appbarBackground / appbarForeground | Application bar background / text and icons |
appbarSelectLine | Application bar selection border |
appbarPushButtonBackground | Application bar hover / pressed background |
navbarBackground / navbarForeground | Navigation background / text and icons |
navbarSelectLine | Selected navigation item indicator |
navbarPushButtonBackground | Navigation button background |
personalMenuBackground | Use inherit for navigation colours |
The favicon key is currently unsupported. Keep the original archive as a backup and validate the JSON before upload.
Practical example
Scenario
The PAW interface uses the default design. Its logo, company name and colours need to match the company’s branding.
Result
After upload, activation and a browser reload, the interface displays the updated branding and colour settings.
Frequently asked questions
Which file contains the colour codes?
The supported theme keys are stored in spec.json. They define settings such as background, foreground and selection colours.
Does this theme also change books?
Workspace themes apply outside books. Use book themes to style books and their widgets.
More Planning Analytics tutorials
Florian KaiserIBM Planning Analytics consultantPlanning Analytics support
Discuss your project
Do you use Planning Analytics or want to introduce it? I can help you plan and implement your next steps.
Discuss your project ↗