Asponte Labs > Blog Detail

Web Content Viewer- Asponte Custom Skin

Actions

Customizing Connections 6 Series: Setting up for CSS Customization

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

Introduction

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:

 

https://www.ibm.com/support/knowledgecenter/en/SSYGQH_5.5.0/admin/customize/t_customize_enable_custom_debugging.html

 

The steps are:

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


 

  • Locate the variable CONNECTIONS_CUSTOMIZATION_DEBUG
  • 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
    com.ibm.lconn.core.web.customization.*=all
    , 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:


 

  • Locate the variable CONNECTIONS_CUSTOMIZATION_PATH
  • 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:

CONNECTIONS_CUSTOMIZATION_PATH/themes/<themename>Theme

 

So in my case, that is:

/opt/IBM/SharedContent/customization/themes/hikariTheme/custom.css

 

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 {
 background:#25363f;
}

 

  • 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.

 

Complementary Content
${loading}