I created a git repository with some smaller CSS files to fix some annoyances within HCL Connections.
I started with this to prevent Orient Me to load fonts from external URLs or Elasticsearch Metrics to break the UI on larger screens. These issues are solved after the last updates I got from support, but Blogs and Tailored Experience Wizard can be improved with some simple rules.
Activate the CSS injection with Customizer
The following steps enable the changes.
Route /te-creation-wizard through customizer
Add the URL to NGINX configuration:
location ~ ^/(files/customizer|files/app|communities/service/html|forums/html|search/web|homepage/web|social/home|mycontacts|wikis/home|blogs|news|activities/service/html|profiles/html|viewer|te-creation-wizard) {
proxy_pass http://cnx7-rh8.stoeps.home:30301;
}
Add |te-creation-wizard
to the rule which forwards to port 30301. Or find the line which starts with location ~ ^/(files/customizer|...
and add it within the parenthesis.
So now the URL for Tailored Experience Wizards are routed through customizer.
Clone repository to customizer NFS share
cd /pv-connections/customizer
git clone https://github.com/stoeps13/stoeps-customizer-css.git
Import app to customizer
Import the file stoeps-customizer-css.json
to the App Registry (URL: https://your-connections-url/appreg – you need the admin role in Common App to access it!).
Or use this snippet:
{
"name": "CSS Customizations",
"title": "Fixing tiny annoying things",
"description": "Adding some css to fix the most annoying things..",
"services": [
"Customizer"
],
"extensions": [
{
"name": "Blogs",
"type": "com.ibm.customizer.ui",
"payload": {
"include-files": [
"stoeps-customizer-css/blogs.css"
],
"cache-headers": {
"cache-control": "max-age=0"
}
},
"path": "blogs",
"state": "enabled"
},
{
"name": "TE Wizard",
"type": "com.ibm.customizer.ui",
"payload": {
"include-files": [
"stoeps-customizer-css/te-wizard.css"
],
"cache-headers": {
"cache-control": "max-age=0"
}
},
"path": "te-creation-wizard",
"state": "enabled"
}
]
}
Use New App
> Code Editor
> Import
and save the changes to do this.
Which changes are active
Blogs

Without the customization, it is hard to see where a post starts or ends in the overview.

With the customization
Tailored Experience Wizard
I started this, because the Tailored Experience Wizard does not recognize changes in the communities-policy.xml
. So if you have changed the available Community Types, like described in Preventing members from creating specific community types , all Community Types are still visible and in case of Restricted Communities, the creation fails for Communities created from a template, even for public or moderated Communities.
I have a case open with HCL on this, but until now there is no fix available.

Without the customization, all Community Types are allowed, there are two useless options on the left column.

With the customization
This will only hide the option, but when anybody changes the CSS in browser developer tools, or just use the API to create a community, this will be successful. The better option is to disable in the communities-policy.xml
and wait for a fix until you enable the TE Wizard.
Hi Christoph, thanks for sharing the CSS customisations for blogs, that was something that was bothering me too. I have integrated your customisations into our platform and it works very well! Best Julian