Fix some annoyances with Customizer

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

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.

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.