Our Blog > Blog Detail

Web Content Viewer- Asponte Custom Skin


Customizing Connections 6 Series: Setting up for CSS Customization

  • Created By: Chris Knight
  • Updated: February 15, 2018
  • Tags: development, customization, connections, developer


In order to customize your IBM Connections CSS, there are several steps you have to take in order to perform the customizations.

Enable Customization Debug Mode

It is possible to make CSS changes show on the site without requiring server restarts after every change.  In order to do so, you have to enable customization debug mode.  


Information about this setting can be found here:




The steps are:

  • Log into the WAS console, navigate to the WebSphere variables:


  • Set to true, click Apply and save the settings.
  • Navigate to Troubleshooting -> Logs and trace:

  • Click on the server that is running connections, and click on Diagnostic trace, then on the Configuration tab, click on Change Log Level Details.
    Add the following trace string
    , then apply and save.  Then restart server.


Locate Custom Directory

Next you have to locate where on the filesystem the custom files are going to reside.  This setting is also stored as a WebSphere variable.


The steps are:

  • Log into the WAS console, navigate to the WebSphere variables:


  • The value for this will determine where you place your custom files.

Custom CSS Example

On my install, the value of CONNECTIONS_CUSTOMIZATION_PATH is /opt/IBM/SharedContent/customization.  When you are customizing CSS for the pages, you will place a custom.css file that will reside in a path that corresponds to the active theme in your connections install.  


I am still using the default out of the box theme, which is called hikari.  For connections, the path for a custom css will be:



So in my case, that is:



For a simple change, I am going to make the top “toolbar” area to have a default color of:



And instead have it use the color:



The steps are:

  • Examine the html on the page to see the item you want to change.  In this case, I can see that the CSS that is affecting the page is:


  • In my custom.css file, I add the following:

.lotusui30 div.lotusBanner .lotusRightCorner {


  • I then uploaded my custom.css file to /opt/IBM/SharedContent/customization/themes/hikariTheme/custom.css
  • In order for the change to get picked up, an application in the Connections environment needs to be restarted.  
  • Login to the WAS admin console, and navigate to Applications -> Application Types -> WebSphere enterprise applications.


  • Select the Common application, and stop and then start it.
  • Reload the page (may have to clear browser cache), and you should see updated css affecting the page.


Contact Form- Asponte Custom Skin


Contact Us


Call Us 888-926-9434
Complementary Content