Applying customizations to IBM Connections on the cloud may be a simple task with the launch of the IBM Connections Customizer technology, however, often times, we do not know where to start. Our team felt that way when the technology first launched, but after listening to our customers asking for a more modern, intuitive, user experience, we knew leveraging Customizer to apply a newly redesigned layer over IBM Connections would act as an example of what the technology could do.

The IBM Connections Design Team dove into the Connections Cloud code to understand the IDs and Classes used in the HTML and CSS code that powers the current design in an effort to start restyling the applications that live within Connections. Over time, our team constructed a repository comprising of SCSS and CSS files as they traversed over the various apps that made the restyling efforts of the next application on our backlog, that much easier. We realized that, with a bit more commenting and structuring of the code, that our customers could leverage our work as a model to implement their own customizations in a more rapid manner.

In December, we launched the preview of “Visual Update 1 for IBM Connections,” an application downloadable for free on the Connections App Registry, that applies the new-modern restyle as a layer on top of your current Connections UI. Today, our design team is opening up the repository as open source for you to utilize as a model for your own customization. You can access the announcement on the What’s New page and follow the links to detailed documentation and instructions for use of the open source code.

Let’s walk through a quick example on how the open source code for Visual Update 1 for IBM Connections will accelerate your customization effort.

**Note that the example does not include compiling instructions, enablement on the repository, nor installation instructions into Connections. For those, please refer to the product page.

Say your organization wishes for the Connections color scheme to mimic those if your organization. Inside of the repository, the colors are defined as variables and are centrally located in the file /scss/prereqs/_colors.scss.


Image 1: _colors.scss file

Brand color variables are defined in $brand-{n} variables within the scss document and take a hex color as a value. These variables modify the colors of major UI elements such as the upper navigation bar, header colors, buttons, links, and more. Once you modify the hex values of each of these variables to the ones consistent with your organization, you simply need to re-compile the code and refresh your page. Since the changes were done in the scss file, the compiler will generate the css files required since _colors.scss is used in all of them.

See the simplicity?

Imagine the ability to rapidly change styles specific to applications within Connections such as profiles, files, and blogs or even changing icons and fonts on a global level. Our goal with opening the code for Visual Update 1 for IBM Connections is to allow you to do just that. Our team has spent a considerable amount of time commenting each file and structuring the repository in such as way that customizing Connections can be done with little up-front enablement.

Code to this repository is consistently being committed as our team re-styles more applications from Connections, so you will always get the latest code. We encourage you to clone the repository and start restyling today!

Considerations before Customizing

  • Support for Customizer applications follows the same policy as any other customization to the IBM Connections UI – i.e. IBM Support can address questions about the customization process, but cannot address questions about the particulars of your customization.
  • Customizer extensions are currently restricted to the organization in which they have been added. For example, users from one organization may have access to communities in other organizations if they have been so invited, but they would not see any customizations added to such “external” communities.
  • Any bugs, feature requests and other observations pertaining to the open source code should create a ticket in the repository

Join The Discussion

Your email address will not be published. Required fields are marked *